search

OFFLINE-GmbH / oc-gdpr-plugin

October CMS plugin to make websites GDPR and ePrivacy compliant
https://octobercms.com/plugin/offline-gdpr
MIT License
36 stars 20 forks source link

Feedback for your Plugin #8

Closed ghost closed 6 years ago

ghost commented 6 years ago

Hi,

Firstly, congratulations on your plugin so far! I hope you don't mind if I give you a very long list of feedback suggestions, some are idea suggestions and others are very important. I will try and label each thing as such and try to give you as much information as possible.

Backend

Going to start with the backend as the very important ones are here when I create fields in October in the Backend, I have the "label" on the top and a "comment" on the bottom explaining the field, also I will say required or not.

List View

  1. "Name" did some checking and the correct Label would be "Owner". Maybe change it to "Name/Owner"?

  2. "Group Name" that is fine and perfect.

Item View

  1. "Description" field, technically this is not a description from reading the law so I would recommend changing the label and adding a comment.

Label = Purpose Comment = Describe the Purpose of the Use, Processing and any Notifications e.g. Determines if the user's navigation should be registered in a certain statistical placeholder. Required = Yes (has to be displayed by law) Field Type = TextArea (I also think maybe make the textarea size - large. As we gonna write at least 3-4 sentences for each and maybe list the cookie codes as well)

  1. "Name (Cookie Identification)", please add this field. It is the cookie name code, there could be several of them.

Label = Name (Cookie Identification) Comment = The Name of the of the Cookie Prefix code e.g. _ga, ASP.NET_SessionId Required = No (Not everything will use a cookie code - like social sharing buttons) Field Type = TextArea (I think use a Text Area because we may need to list several, Google Anayltics uses 8 different ones): utma utmz _gat _gid _ga utmb utmc __utmv

  1. "Provider", please add this field. The Provider will be the website domain name.

Label = Provider Comment = Under ePrivacy Law, you need to state the website domain name e.g. google.com Required = Yes (has to be displayed by law) Field Type = String

  1. "Cookie Levels", looks great, wonderful idea and concept, again change the description and add the comment and required. I think remove the word Cookies as this plugin can manage everything! Maybe Change the Label to "Manage Levels".

  2. "Duration/Expiry" please add this field, by law you need to state how long the cookie will be used for?

Label = Duration/Expiry Comment = Under ePrivacy Law, you need to state how long it will be used in the user browser e.g. Session, 3 months, 2 years. Required = Yes (has to be displayed by law) Field Type = String

  1. "Type" please add this field, you need to state what type of cookie or module this is.

Label = Type Comment = Under ePrivacy Law, you need to state what type of cookie or module this is e.g. HTTP Cookie, Pixel Tracker, Twitter Widget Required = Yes (has to be displayed by law) Field Type = String or Drop-Down Selector

Do in an extra line below the above data

  1. "Contact Details of Data Controller" please add this field, by law you have to give the DPO Contact Address of the cookie.

Label = Contact Details of Data Controller Comment = Under ePrivacy Law, you have to give the DPO Contact Address of the cookie e.g. Cloudflare, Inc. 101 Townsend St. San Francisco, CA 94107. Attention: Data Protection Officer, privacyquestions@cloudflare.com Required = Yes (has to be displayed by law) Field Type = TextArea

  1. "Contact DPO" please add this field, by law you need to give a link directly to the webpage of the DPO of the cookie.

Label = Contact DPO Comment = Under ePrivacy Law, you need to give a link directly to the webpage of the DPO of the cookie e.g. Link to their Terms, Privacy, Cookie Privacy page etc. Required = Yes (has to be displayed by law) Field Type = String or repeater field

(Repeater Field I usually do two string fields: one for link and one for anchor - but totally up to you).

p.s. This is a screenshot of an example:

103

You should make the link external and with the correct codes e.g.

<a role="link" rel="nofollow external noopener noreferrer" href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy Policy</a>

Correct Layout to Pass GDPR + ePrivacy

Sorry I sound like I got OCD or ADHD, but the information needs to be in the correct order and locations to pass GDPR and ePrivacy, here is a screenshot of how the data fields would look like in your plugin to pass:

104

  1. Unambiguous specification, meaning that all the settings must be turned off by "default" when a user enters the cookie config screen. The only cookie allow to be on at default is the "Required - Session Cookie". I know this sounds really bad, but a way to make websites work great with this law is when a user clicks on the "Accept Cookies" button on the Banner then all the settings are turned on. But if the user never clicks that button and goes straight to the advanced settings page then all cookies etc. must all be turned off (except session etc.)

Rest of Backend

  1. Editing the "Cookie Groups" I couldn't find it at first, it would be easier to move the fields around like this:

101

Link to get the Information

Extra infomation how to fill out all these details, you can use the website found here to get the cookie information, DPO address and DPO hyperlink: https://cookiepedia.co.uk/

For example, see Google Analytics: https://cookiepedia.co.uk/host/google-analytics.com

Banner

First of all, it creates a gdpr_cookie_consent with HTTPonly and Secure and later on in PHP 7.3 you can turn on SameSite. So that looks perfect.

Is there an option in the backend to turn this section on/off, see screenshot. As it's not required and is an extra feature.

102

The Banner Description, the description text has different laws depending on which EU country. Therefore say I have a website of .co.uk which is for UK. Then I would use the UK Law for The Banner Description. I think I found a website that has a list of descriptions for each EU country. So I was thinking maybe we could create a drop-down menu of the list of EU Countries and let users either select these preloaded defaults or create their own description. Up to you, I can go find all the descriptions for you and add them to the lang files.

~I just remembered you have to state how long the banner cookie duration will last for. Let's say a user clicks on "Accept Cookies" button then a cookie is created for let's say 6 months, the user should be able to change this duration time in the setting page. Let's say the user wants to set it to "2 years" before seeing the banner again. This is another requirement under ePrivacy law. I believe the max duration is 2 or 3 years, but I can't remember where I read that?

README.md

I find it a bit hard to read and understand, plus various bits of information is missing, if you are happy, I can try and re-write it for you to make the reading easier for people to understand how to use the plugin for the first time. Some ideas I was thinking was to remove the repeated content and explain the feature list in an API list, of these settings:

(The Hard vs Soft Reload is a bit confusing when there is no soft_reload only hard_reload options etc.)

CSS and Javascript Code Snippets

I noticed you have a default CSS and some Javascript. My website design's use an "App Shell Model" where I have all my CSS in Partials and combine them into a single Page .htm file. Also, my Javascript is the same style but only having two files one at the top and one at the bottom. Then everything is either lazy-loaded or preloaded etc.

Basically what I am suggesting is a way to turn off the default CSS and then be able to copy and paste the CSS into my website design structure. So just add some extra notes to the README file explaining this and a location where I can download the CSS Script. Also the same for the Javascript if possible, just copy the code into the website directly.

I know the plugin code will update over time and if a user decides to do this way, then you could have the JS and CSS saved in a folder with a VERSION number for us to download off this github.

AMP-HTML (Mobile - Extension)

This is not important but an extra feature I would like to code for you and add on to the plugin. Basically, I use a Desktop PWA and AMP-HTML combination website design. The AMP-HTML pages I want to merge the AMP-Consent Module and your plugin together. Then the plugin can be used on AMP-HTML Pages.

Final Thoughts

That's basically everything I wanted to say. If you need help with anything, let me know and I can create some Pull Requests etc.

I haven't downloaded and installed the plugin yet on one of my websites. I just wanted to wait for a few more updates. But I plan to do a full test of the plugin in the coming days. For now I just tested out the plugin using your demo website at mall.offline.swiss

Thanks.

ghost commented 6 years ago

One extra thing, I just checked on the components you are using |raw tags. Very dangerous and opens up XSS Attacks. Best to use one of these two methods:

  1. html_clean() see webpage: https://octobercms.com/docs/markup/function-html
  2. HtmlPurifier see webpage: https://octobercms.com/plugin/adrenth-htmlpurifier

Best to force people into good habits!

tobias-kuendig commented 6 years ago

Hi @ayumihamsaki

Wow, thank you very much for this much appreciated feedback! To make keeping track of everything a bit easier, I'm creating individual issues.

I have seen a website with a list of these descriptions for the most common things, so I don't know if it would be useful to make a list for you and then users could select from a list and write custom ones.

I think this is a great idea. It's cumbersome if users have to type the same sentences over and over. Furthermore I can imagine that most people simply won't know what to write. A curated list of examples would be a great feature.

The Contact Details of Data Controller and Contact DPO fields are on group level, not on cookie level, right?

So I was thinking maybe we could create a drop-down menu of the list of EU Countries and let users either select these preloaded defaults or create their own description. Up to you, I can go find all the descriptions for you and add them to the lang files.

This sounds a great!

Is there an option in the backend to turn this section on/off, see screenshot. > As it's not required and is an extra feature.

An option to hide this information makes sense. We copied this feature from cookiebot.com's banner. I think this is a very user-friendly way to present the options but as you said, it makes the banner bigger and not everyone wants to provide this option.

Any concrete inputs to make the README easier to understand are welcome!

Basically what I am suggesting is a way to turn off the default CSS and then be able to copy and paste the CSS into my website design structure. So just add some extra notes to the README file explaining this and a location where I can download the CSS Script. Also the same for the Javascript if possible, just copy the code into the website directly.

You can currently choose to not include the default css styles with the cookieBanner and cookieManager components. I'll add another option to also not include the JS code. The default code can be copied from the component partials.

ghost commented 6 years ago

@tobias-kuendig

The Contact Details of Data Controller and Contact DPO fields are on group level, not on cookie level, right?

Yes, correct.

Over the next few days I will start creating some lists. I will try and create a list of the "Purpose" point number 3.

Also a list for point 10. With regards to links to various cookies.

Maybe a list for 9, selecting addresses for the most common cookies.

Point 2, cookie groups I think I made a list for that already, will copy and paste it here:

  1. Authentication cookies - To track user login to a web application
  2. Statistic cookies - help website owners to understand how visitors interact with websites by collecting and reporting information anonymously. Cookies for analytics e.g. Google Analytics, Facebook etc.
  3. Form cookies - set when you fill forms e.g. contact us etc.
  4. Preference cookies - enable a website to remember information that changes the way the website behaves or looks, like your preferred language or the region that you are in.
  5. Marketing cookies - are used to track visitors across websites. The intention is to display ads that are relevant and engaging for the individual user and thereby more valuable for publishers and third party advertisers.
  6. Mandatory cookies (SESSION COOKIES) - cannot be deselected. Necessary cookies help make a website usable by enabling basic functions like page navigation and access to secure areas of the website. The website cannot function properly without these cookies.

Let me know if I can help you with anything! I wrote quite a lot of little things.

README

Maybe best to fix and upgrade at the end, when all these other issues have been complete.