document.cookie: Cookies lesen und prüfen

Nach Cookies suchen

Der Benutzer kann das Cookie zwischenzeitlich gelöscht haben oder das Cookie ist abgelaufen. Darüber hinaus können sich beim Benutzer mehr Cookies dieser Seiten angesammelt haben (z.B. durch das Content Management System, durch Analytics wie Matomo oder Google Analytics oder Werbung auf der Seite), und das gewünschte Cookie muss zuerst herausgefiltert werden.

Man merkt der Cookie-Syntax und den Methoden an, dass Cookies eine alte Technik sind (1997!), zwar nicht besonders kompliziert, aber reichlich angestaubt. Es gibt keine Methoden, um ein einzelnes Cookie zu isolieren.

Javascript setzt und untersucht Cookies über das globale document.cookie. Beim Auslesen verhält sich document.cookie wie ein String und gibt eine Semikolon-getrennte Liste aller Cookies des aktuellen Dokuments zurück. Nur eine Suche im Cookie-String bringt einen bestimmten Cookie-Wert zutage.

document.cookie
   cookiereader=4711; status=allow; 
   buttons=green large top; 

Nach einem bestimmten Cookie suchen:

function getCookieValue(a) {
   const b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
   return b ? b.pop() : '';
}

console.log ("getCookieValue " + getCookieValue("cookiereader"));

Wenn Javascript das erwartete Cookie nicht findet, gibt das Script einen leeren String zurück. Das passiert z.B., wenn der Besucher die Cookies in seinem Browser gelöscht hat.

Cookies dekodieren

Cookies sind oft kodiert, damit sie keine unerlaubten Zeichen enthalten. Sind sie z.B. URI-enkodiert (encodeURIComponent), können sie mit decodeURIComponent dekodiert werden.

const rawValue = getCookieValue("cookiereader");
const decodedValue = decodeURIComponent(rawValue);

Alle Cookies lesen

Früher galt, dass individuelle Cookies durch ein Semikolon gefolgt von einem Leerzeichen getrennt werden. Darauf sollte man sich nicht mehr verlassen. Ebenso darf vor und nach dem Gleichheitszeichen zwischen Cookie-Name und Cookie-Wert ein Leerzeichen sitzen.

Zuerst alle sichtbaren Cookies in ein Hash extrahieren, um das gesuchte Cookie zu untersuchen.

• Die Liste der Cookies aus document.cookie lesen
• Die Liste anhand des Semikolons in einzelne Cookies splitten.
• Jedes Cookie in Name und Wert splitten
• Cookies nach Namen indexieren
• Das gewünschte Cookie herausfiltern und den Wert des Cookies dekodieren

const cookieList = (document.cookie) ? document.cookie.split(';') : [];

const cookieValues = {};
for (let i = 0, n = cookieList.length; i != n; ++i) {
	const cookie = cookieList[i];
	const f = cookie.indexOf('=');
	if (f >= 0) {
		const cookieName = cookie.substring(0, f);
		const cookieValue = cookie.substring(f + 1);
		//console.log (`cookieName ${cookieName} – cookieValue ${cookieValue}`);
		if (!cookieValues.hasOwnProperty(cookieName)) {
			cookieValues[cookieName] = cookieValue;
		}
	}
}

Quelle Inspect the value of a cookie in JavaScript

Cookies löschen

Um ein Cookie zu löschen, setzt man einen Zeitpunkt in der Vergangenheit. Der Browser sieht darin das abgelaufene Cookie und löscht es aus seinen Speicher.

Kompliziert ist allenfalls das Ablaufdatum. Alles beginnt mit dem aktuellen Zeitpunkt – date.getTime():

const date = new Date();
date.setTime (date.getTime() + 
    days * 24 * 60* 60 * 1000);
      ^     ^
      |     |
      |     +-- Tage in Millisekunden umsetzen
      |
      +--- Tage bis zum Ablaufdatum
const expires = date.toGMTString();

Viel einfacher funktioniert das Löschen des Javascript-Cookies mit dem neueren max-age: max-age=0

document.cookie = "theme=twenty; 
                   max-age=0; 
                   path=/; 
                   domain=myhome.me"

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.

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.

Wie kann ich Cookies blockieren? 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.