Cookies blockieren

Cookies blockieren

Viele kostenlose Plugins, Module und Scripte machen Umsatz, indem sie Tracker in die Seiten schleusen, in denen sie eingesetzt werden. Tracker sind Cookies, die im Browser des Benutzers gespeichert werden und den Benutzer auf anderen Webseiten wieder erkennen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Woher kommen Cookies?

Sie erhalten Plugin-Autoren Informationen zum Verhalten der User, die sie entweder selber nutzen oder an die Tracking-Industrie verkaufen.

Persönlich ausgerichtete Werbung ist schon fast ein harmloser Hintergrund. Lasst uns mal eine Ecke weiterdenken: ein Zeitschriftenverlag, der erkennt, dass ein Benutzer, die die Abendpost lesen, auch den Volksbrief liest.

Über Plugins und Extensions – auf der technischen Ebene iframes und Javascript – gelangen Tracker mit Video-Playern, Social Sharing Widgets, Statistiken und Galerien in Webseiten, ohne dass wir so einfach etwas davon mitbekommen.

Wir können nie sicher sein, ob sie nicht gleich eine ganze Invasion von Cookies im Browser des Besuchers absetzen.

Cookie Blocker

Cookie Blocker für WordPress gibt es in vielen Schattierungen, für einfache HTML-Seiten sind wir scheint's auf uns selber angewiesen.

Cookies finden

Der erste Schritt ist: Herausfinden, ob und welche Cookies gesetzt werden. Seiten, in denen wir durch iframes, Skripte oder Plugins Inhalte hinzufügen, sollten immer mit verschiedenen Browsern geprüft werden, ob die Erweiterungen hier Cookies absetzen.

Testen mit Chrome, Firefox, Safari kann unterschiedliche Ergebnisse liefern, darum lieber mit allen Browsern prüfen, die zur Verfügung stehen. Dazu die Entwickler-Werkzeuge oder Browser-Konsole laden. Firefox zeigt die Cookies der Seite z.B. unter Web-Speicher.

Cookies in Firefox anzeigen
Firefox – Cookies der Seite anzeigen

Dabei nicht außer Acht lassen, dass Browser wie Firefox und Safari schon in den Grundeinstellungen bestimmte Cookies blockieren, wir aber nicht davon ausgehen können, dass alle Benutzer moderne Browser nutzen und die Privatsphäre-Einstellungen festgezurrt haben.

Laden von Scripten blockieren

Es gibt nur eine sichere Methode, externe Scripte, Plugins, Module und Extensions vom Setzen von Cookies abzuhalten: Sie dürfen gar nicht erst geladen werden.

Scripte lassen sich mit Hilfe des MutationObserver relativ einfach (na ja …) abschalten. Der MutationObserver reagiert auf Änderungen des DOM und ist in allen Browsern inkl. IE11 installiert.

let observer = new MutationObserver(callback);
    
function callback (mutations) {
  // unternimm was …
}

observer.observe(targetNode, observerOptions);

Um bestimmte Scripts zu blockieren, müssen sie in der Callback-Funktion des Mutation Observers registriert werden, und wenn der Benutzer dem Einspielen der Scripte zustimmt, sollen sie nachträglich geladen werden.

Das lässt sich mit Hilfe von yett von Julien Elbaz realisieren. yett basiert auf dem MutationObserver API, für ältere Browser, die den MutationObserver noch nicht unterstützen (IE9/IE10), kann ein Polyfill eingesetzt werden.

Laden von iframes verhindern

YouTube-Video ist grundsätzlich eine Bereicherung für die Webseite. Obwohl wir den iframe von YouTube als www.youtube-nocookie.com abrufen können – oh – sobald der Besucher den Play-Button klickt, kommen die Cookies ohne den Consent des Besuchers.

Darum also nennt Google diese Technik verzögerte Cookies.

Hier filtert ein Script Youtube-Videos und entfernt das src-Attribut. Anstelle dessen holt das Script das Vorschaubild des Videos und setzt es in einem CSS Overlay über das wirkungslose iframe. Zusätzlich geht die Consent-Nachricht in den Overlay.

document.addEventListener("DOMContentLoaded", function(event) {

… 
	let youtube_video_id = src.match(/youtube-nocookie\.com.*(\?v=|\/embed\/)(.{11})/).pop();
	let poster = document.createElement ("img");
	poster.src = "https://img.youtube.com/vi/" + youtube_video_id + "/maxresdefault.jpg";
…
}

Am Rande: Vorsichtshalber sollte das Script auch die YouTube-Videos aufnehmen, die nicht mit dem nocookie-Zusatz eingesetzt sind und ebenso Vimeo-Videos und die URL dementsprechend ebenfalls ändern.

Wenn der Benutzer dem Abspielen des Videos zustimmt, muss das Script den Consent und die Zeit des Consents entweder in einem Cookie oder im localStorage bzw. sessionStorage speichern.

const heute = new Date();
sessionStorage.setItem("hasConsentedYouTube", "true");
sessionStorage.setItem("hasConsentedYouTubeTime", heute);

Das ist nur der grobe Ablauf des Scripts. Natürlich muss das Script zu Beginn abfrage, ob und wann der Benutzer dem Abspielen des Videos bereits zugestimmt hat. Mit einem Cookie kann das Script eine Ablaufzeit setzen. Speichert das Script den Consent im Session Storage, gilt der Consent nur bis der Benutzer die Seite schließt, aber überlebt ein Neuladen der Seite.

Cookies und Javascript nicht aktiviert?

Ohne Javascript keine Cookies und keine iframes.

Ein Fehler ist aufgetreten. Schau dir das Video auf www.youtube.com an oder aktiviere Javascript, falls es in deinem Browser deaktiviert sein sollte.