JavaScripts › Verschiedenes

Cookietest

Prüft, ob der Browser des Besuchers Cookies annimmt — auf Wunsch mit einer echten Gegenprobe.

Dieses kleine Script prüft, ob der Besucher eurer Seite Cookies aktiviert hat. Das Ergebnis erscheint sofort beim Laden der Seite. Nützlich ist das überall dort, wo eine Funktion ohne Cookies nicht arbeiten kann: bei einem Anmeldebereich, einem Warenkorb oder einer Merkliste. Statt den Besucher später mit einem rätselhaften Fehler stehen zu lassen, könnt ihr ihn vorher freundlich darauf hinweisen, dass er in den Einstellungen seines Browsers etwas ändern muss.

Cookies sind kleine Textschnipsel, die eine Seite im Browser des Besuchers ablegen darf und beim nächsten Besuch wieder auslesen kann. Sie liegen auf dessen Rechner, nicht bei euch, und sind an die Domain gebunden, die sie gesetzt hat. Verwendet werden sie für alles, was sich der Browser merken soll — von der gewählten Sprache über den Anmeldestatus bis zu einer To-Do-Liste, die ganz ohne Server auskommt.

Ein Wort zur Zuverlässigkeit: Die Auskunft, die das Script beim Laden gibt, stammt von der Eigenschaft navigator.cookieEnabled — der Browser sagt also selbst, wie er es mit Cookies hält. In manchen Fällen ist diese Auskunft zu optimistisch, etwa wenn Cookies nur für bestimmte Seiten blockiert sind oder eine Erweiterung sie nachträglich wegräumt. Der Knopf „Gegenprobe" macht deshalb den ehrlichen Test: Er setzt tatsächlich einen Cookie, versucht ihn sofort wieder zu lesen und räumt ihn anschließend wieder weg. Was dabei herauskommt, gilt.

Und noch ein rechtlicher Hinweis, weil er hier oft gestellt wird: Ein Cookie, der für den Betrieb der Seite technisch notwendig ist, braucht keine Einwilligung. Alles darüber hinaus — insbesondere Cookies für Reichweitenmessung oder Werbung — darf erst nach ausdrücklicher Zustimmung gesetzt werden. Der Testcookie dieses Scripts wird nur für den Moment der Prüfung angelegt und sofort wieder gelöscht. Weitere Angaben zum Browser eures Besuchers liefern euch die Browserinformationen.

Verschiedenes Baujahr 2004 läuft in deinem Browser

Die Gegenprobe legt einen Cookie namens ksjs_test an und löscht ihn sofort wieder.

So funktioniert das Script

Das Script hat zwei Teile: Beim Laden fragt es den Browser nach seiner Einstellung und schreibt das Ergebnis in die Anzeigefläche; auf Knopfdruck macht es zusätzlich den praktischen Versuch mit einem echten Cookie. Beides steckt in einer sofort ausgeführten Funktion, damit die Namen im Script nicht mit anderen Scripts auf derselben Seite kollidieren.

if (navigator.cookieEnabled) {
  ausgabe.innerHTML = "<strong>Cookies aktiviert.</strong>";
} else {
  ausgabe.innerHTML = "<strong>Cookies nicht aktiviert.</strong>";
}

navigator ist ein Objekt, das der Browser jeder Seite über sich selbst zur Verfügung stellt; cookieEnabled ist darin ein Wahrheitswert — entweder true oder false. Genau solche Werte erwartet if, deshalb steht die Eigenschaft ohne jeden Vergleich in den Klammern. Ein === true dahinter wäre erlaubt, aber überflüssig. Die Ausgabe erfolgt über innerHTML, damit das <strong> im Text auch als Hervorhebung ankommt und nicht als sichtbarer Tag.

document.cookie = "ksjs_test=1; path=/; SameSite=Lax";

So wird ein Cookie gesetzt. document.cookie sieht aus wie eine ganz gewöhnliche Variable, verhält sich aber ungewöhnlich: Beim Zuweisen kommt ein Cookie hinzu, ohne dass die vorhandenen verschwinden. Vor dem Gleichheitszeichen steht der Name, dahinter der Wert, und die durch Strichpunkte abgetrennten Angaben sind Zusatzoptionen. path=/ bedeutet, dass der Cookie für die ganze Website gilt und nicht nur für das aktuelle Verzeichnis. SameSite=Lax sorgt dafür, dass er nicht bei Aufrufen von fremden Seiten mitgeschickt wird — heutige Browser erwarten diese Angabe und meckern sonst in der Konsole.

const angekommen = document.cookie.indexOf("ksjs_test=") !== -1;

Und so wird nachgesehen. Beim Lesen liefert document.cookie alle Cookies der Seite in einer einzigen Zeichenkette, etwa "sprache=de; ksjs_test=1". indexOf() sucht darin einen Text und gibt dessen Position zurück — oder -1, wenn er nicht vorkommt. Der Vergleich !== -1 macht daraus einen sauberen Wahrheitswert: gefunden oder nicht. Weil das Setzen direkt darüber steht, ist die Antwort eindeutig — wenn der Cookie hier nicht auftaucht, hat der Browser ihn abgelehnt.

document.cookie = "ksjs_test=; path=/; Max-Age=0; SameSite=Lax";

Zum Schluss wird aufgeräumt. Einen Cookie löscht man, indem man ihn noch einmal setzt und ihm dabei eine Lebensdauer von null Sekunden gibt; Max-Age=0 heißt für den Browser: sofort verfallen. Wichtig ist, dass Name und path exakt zum ursprünglichen Cookie passen, sonst legt der Browser einen zweiten an, statt den ersten zu entfernen.

Zum Anpassen: Die vier Meldungstexte könnt ihr frei ändern — dort gehört der Hinweis hin, was der Besucher tun soll, wenn Cookies bei ihm blockiert sind. Wollt ihr die Gegenprobe automatisch beim Laden mitlaufen lassen, ruft statt auskunftAnzeigen() einfach gegenprobe() auf. Die Originalfassung schrieb ihr Ergebnis übrigens mit document.write() direkt in die Seite und legte den Text in einer Variablen ohne var ab, die dadurch ungewollt global wurde. Beides ist hier ersetzt: document.write() funktioniert nur während des Ladens und würde die Seite überschreiben, wenn es später aufgerufen wird.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Verschiedenes