set a cookie in javascript

set a cookie in javascript

Stellen Sie sich vor, Sie haben gerade die neue Login-Funktion für einen mittelständischen Onlineshop fertiggestellt. Alles sieht gut aus, die Tests laufen durch. Doch drei Tage nach dem Live-Gang bemerken Sie, dass Nutzer sich über seltsame Warenkorb-Änderungen beschweren oder, noch schlimmer, Support-Tickets wegen Identitätsdiebstahls eröffnen. Was war passiert? Jemand hat versucht, Set A Cookie In Javascript ohne die nötigen Sicherheitsvorkehrungen zu implementieren. Ein Angreifer hat ein einfaches Cross-Site-Scripting-Manöver (XSS) genutzt, um die Session-IDs Ihrer Kunden im Klartext auszulesen. Das hat die Firma nicht nur das Vertrauen der Kunden gekostet, sondern auch eine saftige Untersuchung der Datenschutzbehörden nach sich gezogen, weil grundlegende Sicherheitsstandards missachtet wurden. Ich habe dieses Szenario oft genug bei Kunden erlebt, die dachten, ein schneller Einzeiler im Browser-Code würde ausreichen.

Die Illusion des einfachen Set A Cookie In Javascript

Viele Entwickler greifen zu einer simplen Zuweisung wie document.cookie = "user=name". Das ist der Moment, in dem das Problem beginnt. In meiner Erfahrung glauben die Leute, dass der Browser sich schon um den Rest kümmern wird. Das Gegenteil ist der Fall. Wenn Sie diese Methode ohne Parameter nutzen, ist Ihr Datenschnipsel standardmäßig für jedes Skript auf der Seite lesbar. Das ist grob fahrlässig, wenn es sich um Authentifizierungs-Token handelt.

Ein großer Fehler ist die Annahme, dass clientseitiges Scripting der richtige Ort für sensible Daten ist. In der Realität sollten Sie Session-Daten fast immer über den Server mit dem HttpOnly-Flag setzen. Wenn Sie jedoch clientseitig arbeiten müssen – etwa für Personalisierungen oder UI-Präferenzen –, dann müssen Sie die Attribute manuell und explizit definieren. Ein fehlendes SameSite-Attribut sorgt heute in modernen Browsern wie Chrome oder Firefox oft dafür, dass Ihre Logik gar nicht erst funktioniert oder die Privatsphäre der Nutzer unnötig verletzt wird.

Das Ablaufdatum ist kein nettes Extra sondern Pflicht

Ein häufiger Stolperstein ist das Vergessen von max-age oder expires. Ohne diese Angabe wird die Information gelöscht, sobald der Nutzer den Tab oder den Browser schließt. Ich habe Projekte gesehen, bei denen Marketing-Teams verzweifelt sind, weil ihre Tracking-Daten nach jedem Neustart weg waren. Sie hatten einfach die Lebensdauer vergessen.

Noch schlimmer ist es, wenn man sich auf das alte expires-Format verlässt. Es ist fehleranfällig, weil es ein spezielles Datumsformat in UTC verlangt. Wer hier manuell Zeichenketten zusammenbastelt, baut sich fast garantiert einen Bug ein, der erst Wochen später auffällt, wenn die Zeitumstellung zuschlägt oder ein Schaltjahr kommt. Verwenden Sie max-age in Sekunden. Das ist präzise, leicht zu rechnen und weniger anfällig für Parsing-Fehler. 3600 Sekunden sind eine Stunde. Das versteht jeder, und das versteht vor allem jeder Browser ohne Interpretation von Zeitzonen.

Warum Set A Cookie In Javascript ohne Secure Flag Ihr Todesurteil ist

Wenn Ihre Seite über HTTPS läuft – was 2026 der absolute Standard ist –, darf kein einziger Datensatz ohne das Secure-Attribut gespeichert werden. Ich sehe oft, dass Entwickler dies in der lokalen Entwicklungsumgebung weglassen, weil sie dort kein SSL verwenden. Dann schieben sie den Code auf den Server, und plötzlich wundern sie sich, warum nichts mehr gespeichert wird oder warum Sicherheits-Scanner Alarm schlagen.

Die Gefahr von Man-in-the-Middle-Angriffen

Ohne das Secure-Flag wird die Information auch über unverschlüsselte HTTP-Verbindungen gesendet, falls der Nutzer versehentlich auf eine solche Version Ihrer Seite gelangt. Ein Angreifer im gleichen WLAN, zum Beispiel im Café oder am Flughafen, kann diese Daten dann einfach mitlesen. Das ist kein theoretisches Problem aus Lehrbüchern. Das passiert jeden Tag. Wenn Sie sensible Informationen anfassen, ist dieses Flag nicht optional. Es ist die einzige Verteidigungslinie, die verhindert, dass Ihre Daten im Klartext durch die Luft fliegen.

Der Pfad und die Domain als Fehlerquelle Nummer Eins

Ein klassisches Szenario aus meiner Praxis: Ein Entwickler setzt einen Wert auf der Seite example.de/shop/checkout. Er nutzt dafür den Standardweg. Später versucht er, diesen Wert auf example.de/home auszulesen. Das Ergebnis ist leer. Warum? Weil der Browser ohne Angabe von path=/ die Gültigkeit auf das aktuelle Verzeichnis beschränkt.

Hier ist ein konkreter Vorher/Nachher-Vergleich, um den Unterschied in der Praxis zu verdeutlichen:

Vorher (Der fehleranfällige Weg): Der Entwickler schreibt document.cookie = "theme=dark". Er testet es auf der Unterseite des Profils. Alles funktioniert. Am nächsten Tag beschweren sich Nutzer, dass ihre Einstellungen auf der Startseite nicht übernommen werden. Er verbringt vier Stunden mit der Suche nach einem Fehler im State-Management seines Frameworks, nur um festzustellen, dass der Browser für die Startseite gar keinen Zugriff auf diesen Wert hat. Er hat die Reichweite seiner Daten unbewusst eingeschränkt.

Nachher (Der professionelle Weg): Der Entwickler schreibt eine kleine Helferfunktion, die standardmäßig path=/ und SameSite=Lax setzt. Er definiert den Wert als theme=dark; path=/; SameSite=Lax; Secure. Jetzt ist die Einstellung auf der gesamten Domain verfügbar. Die Fehlersuche entfällt komplett, die Nutzererfahrung ist konsistent, und die Sicherheitsrichtlinien moderner Browser werden eingehalten. Er spart sich und seinem Team Stunden an frustrierender Fehlersuche in Chrome-DevTools.

Die vergessene Last der DSGVO und ePrivacy

In Deutschland und der EU ist die technische Implementierung nur die halbe Miete. Wer einfach drauflos speichert, riskiert rechtlichen Ärger. Viele denken, solange es "nur JavaScript" ist, gilt das Gesetz nicht so streng wie bei serverseitigen Datenbanken. Das ist falsch. Die ePrivacy-Richtlinie ist hier eindeutig: Für alles, was nicht technisch zwingend erforderlich ist, brauchen Sie eine Einwilligung.

Ich habe Firmen erlebt, die fünfstellige Bußgelder zahlen mussten, weil sie Analyse-Werte ohne Consent-Banner gesetzt haben. Ein technischer "Fix" ist hier niemals nur technischer Natur. Sie müssen Ihre Logik in die Consent-Management-Plattform (CMP) einbinden. Das bedeutet oft, dass Sie Ihre Funktionen erst dann ausführen dürfen, wenn das entsprechende Event vom Banner gefeuert wird. Wer das ignoriert, handelt nicht nur unprofessionell, sondern gefährdet das gesamte Unternehmen.

Nicht verpassen: tablet samsung tab a 2016

Die Unterscheidung zwischen essenziell und nicht-essenziell

Ein Warenkorb-Wert mag essenziell sein. Ein Tracking-Pixel für eine Werbekampagne ist es nicht. Wenn Sie diese Unterscheidung in Ihrem Code nicht abbilden, bauen Sie eine tickende Zeitbombe. In der Praxis bedeutet das oft, dass man Funktionen schreibt, die erst prüfen, ob der Nutzer zugestimmt hat, bevor sie überhaupt versuchen, den Speicher des Browsers zu beschreiben. Das ist mühsam, aber es ist die Realität der Webentwicklung in Europa.

Die technische Sackgasse der Zeichenkodierung

Ein weiterer Punkt, an dem viele scheitern, ist die Kodierung von Sonderzeichen. Ein Cookie-Wert darf keine Semikolons, Kommas oder Leerzeichen enthalten. Wenn Sie den Namen eines Nutzers oder eine komplexe JSON-Struktur speichern wollen, wird Ihr Skript ohne encodeURIComponent kläglich scheitern.

Ich erinnere mich an ein Projekt, bei dem die Session-Daten immer dann korrupt waren, wenn ein Nutzer ein Komma in seinem Profilnamen hatte. Der Browser hat den String einfach an der falschen Stelle abgeschnitten. Die Lösung ist simpel, wird aber in der Eile oft vergessen: Kodieren Sie jeden Wert beim Schreiben und dekodieren Sie ihn mit decodeURIComponent beim Lesen. Das klingt nach Basiswissen, aber in der Hitze eines Projektabschlusses ist das oft das Erste, was unter den Tisch fällt. Wenn Sie das vernachlässigen, produzieren Sie instabilen Code, der bei 95 % der Nutzer funktioniert und bei den restlichen 5 % zu unerklärlichen Fehlern führt.

Realitätscheck

Machen wir uns nichts vor: Die Zeiten, in denen man mal eben schnell im Vorbeigehen Daten im Browser speichern konnte, sind vorbei. Die Browser-Hersteller haben die Daumenschrauben angezogen, um die Privatsphäre der Nutzer zu schützen, und das ist auch gut so. Wenn Sie heute versuchen, Daten zu hinterlegen, kämpfen Sie gegen Intelligent Tracking Prevention (ITP) in Safari und ähnliche Mechanismen in anderen Browsern.

Es gibt keine Abkürzung. Wenn Sie es nicht von Anfang an mit Path, Domain, SameSite, Secure und einer sauberen Kodierung aufbauen, wird Ihr Code in einem halben Jahr kaputt sein oder eine Sicherheitslücke darstellen. In der Praxis bedeutet das: Hören Sie auf, manuelle Strings zusammenzufügen. Bauen Sie sich eine solide Bibliothek oder nutzen Sie eine bewährte, winzige Library, die diese Parameter erzwingt. Webentwicklung ist kein Spielplatz mehr für "wird schon passen". Wer heute noch leichtfertig mit Client-Speicher umgeht, hat entweder die letzten fünf Jahre Sicherheitsentwicklung verschlafen oder nimmt die Daten seiner Nutzer nicht ernst. Beides können Sie sich als Profi nicht leisten. Es braucht Disziplin und ein tiefes Verständnis für die Protokolle, nicht nur für die Syntax einer Programmiersprache. Wer den harten Weg der korrekten Implementierung scheut, wird früher oder später durch kaputte Sessions oder rechtliche Konsequenzen zur Rechenschaft gezogen. Das ist die nackte Wahrheit. Es klappt nicht ohne Sorgfalt.

MM

Miriam Müller

Miriam Müller setzt auf Journalismus, der erklärt statt zuzuspitzen, und liefert damit echten Mehrwert für das Publikum.