DSVGO Cookie-Consent

Geschrieben von am .

Jede Website, die sich im Besitz einer Einrichtung in der Europäischen Union befindet oder an Bürger der EU vermarktet wird, muss die Datenschutz-Grundverordnung einhalten. Diese Verordnung regelt den Umgang mit personenbezogene Daten.

Aus der Verordnung ergibt sich unter anderem, dass technisch nicht notwendige Cookies nur dann gesetzt werden dürfen, wenn der Kunde zuerst über den Zweck der Nutzung und den Umgang mit den Daten informiert wurde und dann seine Zustimmung erteilt.

Gerne wird zu diesem Zweck ein externer Dienst eingesetzt, eine sogenannte Consent-Management-Platform (CMP).

Es ist natürlich grober Unfug, zur Information der Kunden und zum Einholen von dessen Einwilligung einen externen Dienst zu bemühen, ohne zuvor den Kunden über die Datenweitergabe an diesen externen Dienst informiert und seine Einwilligung hierzu eingeholt zu haben.

Ich habe ein kleines JavaScript erstellt, das ohne externe Dienste den Kunden informiert und eine Zustimmung (oder Ablehnung) einholt und speichert.

Das Skript

Mein Skript euconsent.js enthält weder Texte noch Layout und es interagiert nicht mit anderen Skripten, außerdem belegt es keine globalen Namen. Daher stört das Skript keine anderen Skripte und lässt sich nicht von anderen Skripten stören, auch nicht von Browser-AddOns.

Das Skript lässt den Besucher eine Cookie-Policy aus einer Liste auswählen und speichert die vom Besucher bestätigte Auswahl im Web-Storage, also je nach Konfiguration im LocalStorage oder SessionStorage.

Es interagiert mit den Elementen der Seite, die mit class="euconsent" markiert sind. Dazu durchsucht es beim Start die Seite nach Elementen dieser Klasse, merkt sich diese, und installiert Callbacks auf aktiven Elementen wie Radio-Buttons und Buttons. Die Klasse "euconsent" wird nicht für das Layout benutzt, sie dient ausschließlich zur Markierung der relevanten Elemente.

Einbindung und Konfiguration

Binden Sie das Skript so ein, dass es erst gestartet wird, wenn die Webseite geladen ist. Fügen Sie das <script src="euconsent.js">-Element also am Ende der Seite ein oder markieren Sie es im <head> mit defer:

<head>
    [...]
    <script defer="defer" src="euconsent.js"></script>
    [...]
</head>

Konfiguriert wird das Skript über "data"-Attribute an einem der mit "class=euconsent" markierten Elemente:

  • Cookie-Lebensdauer in Sekunden (default 0):
    <element class="euconsent" data-euconsent-cookie-lifetime="0">

    Der Wert 0 bedeutet bis zum Schließen des Browsers; das Cookie wird dann im SessionStorage statt des persistenten LocalStorage gespeichert.

  • Urls der Scripte, die bei Zustimmung geladen werden:
    <element class="euconsent" data-euconsent-script-urls-policy-id="path/name.js">

    Es können mehrere Skripte mit Blankspace getrennt angegeben werden.

  • Policy-Id, die bei gesetztem Do-Not-Track-Header gewählt wird (default: DNT nicht beachten):
    <element class="euconsent" data-euconsent-dnt-policy"policy-id">

    Wenn ein DNT-Header gesetzt ist, wird ohne Rückfrage diese Policy ausgewählt.

    Achtung: Nach Artikel 21 Absatz 5 der DSGVO (kann die betroffene Person ungeachtet der Richtlinie 2002/58/EG ihr Widerspruchsrecht mittels automatisierter Verfahren ausüben, bei denen technische Spezifikationen verwendet werden) ist das Ignorieren von Do Not Track möglicherweise rechtswidrig.

  • Name des Storage-Items (default: euconsent):
    <element class="euconsent" data-euconsent-store-key="euconsent">

    Nur nötig, wenn innerhalb einer Domain unterschiedliche Bereiche unterschiedliche Cookie-Policies haben.

  • Geschwätzigkeit des Skriptes (default: 0):
    <element class="euconsent" data-euconsent-verbosity="0">

    Wenn ungleich 0, schreibt das Skript Einträge in das Browser-Log.

Auswahl der Policy durch den Besucher

Der Besucher wählt die Policy durch Betätigung eines Button oder Radio-Button. Die Id der Policy wird in einem Parameter des HTML-Elementes angegeben:

<button type="button" class="euconsent" data-euconsent-select="policy-id">Policy-Name</button>
<label><input type="radio" class="euconsent" value="policy-id"/> Policy-Name</label>

Der Besucher bestätigt seine Auswahl durch Betätigung eines type=submit-Button:

<button type="submit" class="euconsent"​>Auswahl bestätigen</button>

Durch Betätigung eines type=reset-Buttons kann der Besucher eine einmal erteilte Zustimmung widerrufen. Nach Löschen des Cookies wird die Seite neu geladen, denn anders kann man die bei der vorherigen Zustimmung gestarten Skripte nicht stoppen.

<button type="reset" class="euconsent"​>Zustimmung widerrufen</button>

Alternativ können Sie auf einer Seite, die nicht erst nach Zustimmung angezeigt wird — zum Beispiel auf der Datenschutz-Seite — eine Neuauswahl der Zustimmung anbieten. Diese wird gespeichert, ist aber auf der ungesicherten Seite bedeutungslos und wird erst beim Aufruf der nächsten normalen Seite wirksam.

Anzeige der Auswahl

Das Skript ordnet alle mit class="euconsent" markierten Elemente dynamisch entweder der Klasse euconsent-selected oder der Klasse euconsent-unselected nach diesen Regeln zu:

  1. Das Element enthält ein Attribut data-euconsent-select="policy-id".

    In diesem Fall ist das Element selected, wenn die policy-id mit der ausgewählten Policy übereinstimmt, unselected sonst.

  2. Das Element enthält kein Attribut data-euconsent-select.

    In diesem Fall ist ist das Element selected, wenn irgendeine Policy ausgewählt und bestätigt wurde, unselected sonst.

Zusammen mit CSS-Regeln erlaubt der erste Mechanismus, die Cookie-Consent-Seite ansprechend zu gestalten, und der zweite Mechanismus, die Cookie-Consent-Seite dynamisch ein- und auszublenden.

Nachladen der Cookie-Content-Seite

Man kann den Inhalt der Consent-Box in eine getrennte Datei auslagern und deren URL in das Wurzelelement der Consentpage aufnehmen. Dieser Inhalt wird dann und nur dann in das Wurzelelement nachgeladen, wenn er gebraucht wird, also wenn keine Policy im Storage gefunden wurde.

Der HTML-Code der Cookie-Consent-Funktion reduziert sich so auf das (fast) leere Wurzelelement:

<section class="euconsent"
    data-euconsent-consent-form-url="consent-form.htm"
    data-euconsent-cookie-lifetime="60"
    data-euconsent-script-urls-keiner="payload-no-tracking.js"
    data-euconsent-script-urls-einer="payload-bnd.js"
    data-euconsent-script-urls-viele="payload-bnd.js payload-cia.js payload-fsb.js payload-nsa.js payload-mossad.js"
    data-euconsent-script-urls-alle="payload-target-marketing.js">
    Loading …
</section>

Das reduziert die übertragene Datenmenge, da der Box-Inhalt nur auf der ersten besuchten Seite gebraucht wird.

Resourcen

Disclaimer

  1. Keine Garantie (§ 521 BGB, § 675 (2) BGB).
  2. Warnung: der Browser des Seitenbesuchers ist nicht unter Ihrer Kontrolle. Obskure oder veraltete Browser, Browser-Plugins und kranke Browser-Einstellungen können Seiten-Inhalte, also auch Information- und Zustimmungs-Formulare, verunstalten oder ganz unterdrücken. Finden Sie einen kompetenten Webdesigner, der mehr kann als bunt, der die Fallstricke kennt und Sie zu diesem Thema beraten kann.
  3. Ich hoffe, dass Datenschützer mit diesem Skript zufrieden sind, kann das aber natürlich nicht garantieren. Fehler beim Thema Datenschutz können durch das kranke deutsche Wettbewerbsrecht sehr schnell sehr teuer werden. Lassen Sie sich von einem befugten Rechtskundigen beraten. IANAL.

Wer darf Ihre Daten einsehen?





(Cookie und damit die Auswahl verfallen nach einer Minute.)