Current website and its consent banner are violating GDPR and TTDSG

[puresick]

Recently I was browsing your website from a device without any adblocking and noticed that the current implementation of the consent banner is not conforming with neither the GDPR nor the german TTDSG (Telekommunikation-Telemedien-Datenschutz-Gesetz).

Roughly summarized: For complying with GDPR you need an active consent from a person if you want to process their personal identifiable information in any way that is not technically necessary. For complying with TTDSG you need an active consent to save anything on a persons device, except if it is something technically necessary to run needed functionality (e.g. a cookie saving a login session token).

Based on that, the website and consent banner have to:

• Not save anything on the device before any active consent has been given (e.g. the google analytics and algolia search cookies are not allowed on the device without consent).
• Offer the person visiting your website a choice for their consent, e.g. with two similar looking buttons for accepting and declining the consent. If the consent has been declined it is allowed to save that setting via a cookie or similar.
• If no consent is being given, both the Google Analytics and Algolia are not allowed in being set.
• Only if a consent is actively given by the person, the GA and Algolia scripts are being allowed to load and save information on the persons device

I hope this issues does not sound harsh or similar, as such issues often tend to do.
If you need a helping hand on implementing this I would be happy to offer my time and help! :)

[ghys]

We happened to discuss that very issue less than 2 weeks ago in relation to #404, so it could be a good opportunity to combine the two.

What would probably work is to refactor those things that only need to happen when consent has been given into a function, and call this function either when:

• a cookie signifying consent has already been set (CookieInfoScript=1)
• or the "Got It" button has been clicked (a click handler has to be installed manually on that button, for instance using its class: cookieinfo-close).

For Algolia this could be a little bit trickier because it's a VuePress plugin and I'm not sure we can control it dynamically...

Many thanks for the offer to help, if you want to give it a try please do and don't hesitate to ask for advice!

[puresick]

Yeah something like this should do the trick 👍
I plan to have some time this weekend to get hands on with this.

You're welcome! Yep, if anything is unclear I'll ask.

[puresick]

Altough I did not find as much time as I wanted last weekend, I had some time to get get an rough overview of the project and got the dev environment running on my machine.

There were some things I noticed during setup:

1. Due to the realtively old dependencies I had to use Node.JS 11.15.0 to properly run vuepress.
2. Using above mentioned Node.JS version resulted in it throwing an error mentioning that its memory heap limit has been exceeded. I could circumvent this by increasing the heap limit manually for now.
3. The dependency SockJS-client was missing in the package.json

Should I open a separate PR treating the above mentioned points, like at least updating the CONTRIBUTING.md and updating the package.json to add SockJS-client, or is it fine if I just do so in the PR I am planning to open for this particular issue?

[Confectrician]

I would go for a dedicated PR.
This way we can use title and description to explain, why this was added.

[puresick]

@Confectrician I just opened a dedicated PR which adds the missing information to the contribution documentation.

[Confectrician]

Sorry for the delay, i am not sure why i did approve, but not merge the PR.
Done now.

[puresick]

No worries! :) Had some busy weeks myself aswell.

[puresick]

Looking at the current consent banner I noticed that it is a minimized version of https://web.archive.org/web/20230330213907/https://cookieinfoscript.com/, which is managed in the Openhab Docs repository: https://github.com/openhab/openhab-docs/blob/main/.vuepress/public/cookieinfo.min.js. Is there an important reason to do so?

It also seems that this script is not maintained anymore (thus the archive.org link since its landing page is not available anymore).

Instead of altering the minimized "cookieinfoscript" consent banner I'd go for implementing a dedicated ConsentBanner.vue component with the same visual representation. That way we keep the current look and feel of it while having a more maintainable component in the end.

One thing which we'll need to change though is the description text, which will not make sense anymore in its wording. Should I just suggest one in my PR?

[hmerk]

I would say yes, please do so.

[puresick]

Hello again! 👋
First of all sorry for my long time of silence — I had quiet the busy summer.

So far I have implemented the new consent banner logic into its own dedicated ConsentBanner.vue component, which includes logic to check if a consent cookie has already been set on mount and offers the methods for the buttons to set such a cookie accordingly.
It looks like this:

Right now, these are the tasks left on my side before being able to open a PR:

• [] Add GA script if consent has been given
• [] Update description text to be a bit more descriptive on why the cookie is being set
• [] Remove unused old code

For the first task I need help from someone with access to the Google Analytics dashboard.
Based on the documentation for Googles Universal Analytics the script tag for a project has to be generated on the Google Analytics admin page.
I need this tag to ensure that I implement this properly and the script gets applied as it should.

[kaikreuzer]

Hi @puresick, that looks nice already!

Note that the documentation you link to is outdated (see the warning at the top: "Universal Analytics has been replaced by Google Analytics 4.").

The script tag for the GA4 property is the following:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-47717934-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-47717934-1');
</script>

Is this what you are looking for?

[puresick]

@kaikreuzer Thanks :)

Oh you are right, looks like I overlook it 🙈.

Yes this is the snippet I was looking for, thank you!

[puresick]

The PR is finally open: #423.

As mentioned above I updated the text inside the consent banner to be a bit more descriptive.
It is not great, but feels a bit more descriptive. What do you think? :)

Edit: CI on the PR is also green now.

[simonwes]

I think some of the changes affect the CSS of the rest of the website. Links are now yellow:

Font of p looks different than for li:

[puresick]

@simonwes Good catch! I missed adding the scoped attribute to the style element inside of ConsentBaner.vue.

I opened a PR fixing this issue: #429

[stefan-hoehn]

@ghys @kaikreuzer @hmerk @puresick

#410, #423 and #429 are merged/done. Is anything left open because it is a dependency for #404

[puresick]

AFAIK everything regarding the consent banner should be done. 👍

[stefan-hoehn]

So, don't you want to close the issue or do you want me to do it?

[puresick]

@stefan-hoehn I was not sure if I am allowed to close it or someone from the team/member/collaborators has to do it.