aurovrata / cf7-grid-layout

A WordPress plugin extension for Contact Form 7 to design responsive grid-layout forms.
https://wordpress.org/plugins/cf7-grid-layout/
GNU General Public License v2.0
6 stars 7 forks source link

GPDR: Date Field/Jquery UI links a Stylesheet from ajax.googleapis.com #38

Closed netzgestaltung closed 1 year ago

netzgestaltung commented 1 year ago

First of all - i forgot how to disable all styles of the plugin. Anyway.

I noticed that one stylesheet is not loaded locally which is a no-go nowadays and led customer-data flow to google per http-request(headers), which is to avoid - foremost without consent. https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.min.css?ver=1.13.2

its loaded from here: https://github.com/aurovrata/cf7-grid-layout/blob/dev-v4.0/public/class-cf7-grid-layout-public.php#L245

It should be included in the Plugins Assets. Updates should be easy possible with git-modules.

Example: https://www.line-dance.wien/anmeldung/

If you can hint me to the airplane mode thats noted arround that ui-loading stuff i would really be pleasured.

netzgestaltung commented 1 year ago

Besides of that i get some "jQuery not defined" errors with the jQuery-UI and Datepicker JS load, which i think will be at the same Corner. You can see it at the example page console.

aurovrata commented 1 year ago

I noticed that one stylesheet is not loaded locally which is a no-go nowadays and led customer-data flow to google per http-request(headers), which is to avoid - foremost without consent.

JQuery UI stylesheets are never included in a plugin/theme, if so that's bad practice in my book.

I am not aware this is in conflict with GDPR, Fonts yes, but none are being loaded in the jQuery UI stylesheets. So don't see what is the issue here.

It should be included in the Plugins Assets.

I disagree, themeing should be in themes is at all, and this is squarely in the realm of themeing.

You can easily override this in your themes function file,

add_action('smart_grid_register_styles','register_styles',10,0);
function register_styles(){
  global $wp_scripts;
  $ui_ver = '1.12.1'; //default, but dynamically updated with the version of jquery included in WP.
  if(!empty($wp_scripts)) $ui_ver = $wp_scripts->query('jquery-ui-core')->ver;
  $protocol = is_ssl() ? 'https' : 'http';
  $url_path = "$protocol://ajax.googleapis.com/ajax/libs/jqueryui/{$ui_ver}/";
  wp_register_style('cf7-jquery-ui', $url_path . 'themes/smoothness/jquery-ui.min.css', array(), $ui_ver , 'all');
  wp_register_style( 'cf7-jquery-ui-theme', $url_path . 'jquery-ui.theme.min.css', array(), $ui_ver, 'all');
  wp_register_style( 'cf7-jquery-ui-structure', $url_path . 'jquery-ui.structure.min.css', array(), $ui_ver, 'all');
}

use register rather than enqueue to ensure you don't load theme unnecessarily for all forms.

Besides of that i get some "jQuery not defined" errors with the jQuery-UI and Datepicker JS load, which i think will be at the same Corner. You can see it at the example page console.

In v5.0, which is currently being worked on, jQuery UI will be completely removed, so all these issues will be removed.

netzgestaltung commented 1 year ago

then it should be loaded from /wp-includes/js/jquery/ui

the problem is exactly the same with google fonts. a user loads the page and it connects to a google server which leads the client to send all http-headers including IP Adress and Browser Fingerprint to it without consent (and a normal user don't even notice, what happend).

where can i set this mentioned $airplane variable?

themeing should be in themes is at all

i agree but the style-load is in your plugin - which leeds to problems, so maybe omitting own styles an relying on WP Styles/Theming might be the best option here.

Anyway - if the plugin loads styles, what is the difference when loading from a themes folder inside of the plugin? You already have stylesheets in /wp-content/plugins/cf7-grid-layout/public/css there.

Besides of all that, the uBlock Origin Firefox extension is blocking the request to the google api, so the style never gets loaded in browsers with AdBlock active.

When you plan something new, please take this into account.

Also found a call to //cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js in the same file. A cleanup seems a good idea.

netzgestaltung commented 1 year ago

I researched our older discussion where i found the _cf7sg_managed_form part - so thats why i forgot about it. I only use the HTML only part so i thought no further styles get loaded - which seems to be broken then? https://github.com/aurovrata/cf7-grid-layout/pull/13

https://github.com/aurovrata/cf7-grid-layout/pull/13/files#diff-c525d9c35651617f9311265f27598218686f254f98e982b1adb03c0d6b1be2a5R277

aurovrata commented 1 year ago

where can i set this mentioned $airplane variable?

this is set when the airplane mode plugin is activated. I use this for working when travelling and don't have an Internet connection.

Anyway - if the plugin loads styles, what is the difference when loading from a themes folder inside of the plugin? You already have stylesheets in /wp-content/plugins/cf7-grid-layout/public/css there.

Indeed, but the majority of those css files only affect the layout and not the look. For example the grid layout of forms is using a pure CSS library to set out the columns. JQuery UI in that sense is squarely in the themeing realm, affecting and therefore potentially conflicting with the stylesheets loaded by a theme.

Also found a call to //cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js in the same file. A cleanup seems a good idea.

this is used by the select2 js plugin.

I researched our older discussion where i found the _cf7sg_managed_form part - so thats why i forgot about it. I only use the HTML only part so i thought no further styles get loaded - which seems to be broken then?

it still loads styles and scripts depending on what functionality you use. However, all these can be overloaded with the script/style action hook mentioned above.

aurovrata commented 1 year ago

I am not sure how all this impacts the GDPR compliance, can you explain?

netzgestaltung commented 1 year ago

I think this one's clear to see: https://law.stackexchange.com/questions/49412/gdpr-and-cdn-content-delivery-networks

Every page using it will need to adopt the privacy policy at least or disable that part at least until a consent (depending on your lawers advice).

netzgestaltung commented 1 year ago

I have checked now the file and in the functions -since 4.11.0

This parts are completely missing: $is_form = get_post_meta($cf7_id, '_cf7sg_managed_form', true);

    if(array_search('has-select2',$class, true)!==false){
      wp_enqueue_script('jquery-select2');
      wp_enqueue_style('select2-style');
      $use_grid_js=true;
    }
    //nice-select
    if(array_search('has-nice-select',$class, true)!==false){
      wp_enqueue_script('jquery-nice-select');
      wp_enqueue_style('jquery-nice-select-css');
      $use_grid_js=true;
    }
    //benchmark
    if(array_search('has-benchmark',$class, true)!==false){
      wp_enqueue_script('js-cf7sg-benchmarking');
      $use_grid_js=true;
    }
    if(array_search('has-date',$class, true)!==false){
      wp_enqueue_script('jquery-ui-datepicker');
      wp_enqueue_style('cf7-jquery-ui');
      $use_grid_js=true;
    }

    $use_grid_js = ($use_grid_js || $is_form);

In my honest opionion, using CDN should be opt-in in some options - and GPDR regarding hints. You have it the same way with W3TotalCache for example.

w3-general-settings-cdn-1024x599

The airplane mode should be default - and the meta field _cf7sg_managed_form repected, too.

netzgestaltung commented 1 year ago

for now i switched to another plugin that translate form contents with polylang in order to get the form done tomorrow.