JavaScript-Cookie-Tutorial: Wie man Cookies sicher setzt, abruft und verwaltet

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung

In der Webentwicklung mit JavaScript werden Cookies häufig als wichtiger Mechanismus zum Speichern benutzerbezogener Informationen verwendet.
Zum Beispiel werden sie häufig verwendet, um Anmeldesitzungen aufrechtzuerhalten oder Warenkorbdaten zu speichern, was die Benutzerfreundlichkeit erheblich verbessert.

Für Anfänger können jedoch Konzepte wie „Was ist ein Cookie?“ oder „Wie können Cookies mit JavaScript manipuliert werden?“ schwer zu verstehen sein.

In diesem Artikel geben wir eine ausführliche Erklärung zur JavaScript-Cookie-Verarbeitung, von den Grundkonzepten bis zu fortgeschrittener Nutzung.
Mit praktischen Codebeispielen ist dieser Leitfaden sowohl für Anfänger als auch für fortgeschrittene Entwickler gedacht.

2. Was ist ein Cookie?

Grundkonzept von Cookies

Ein Cookie ist ein kleines Datenstück, das im Webbrowser gespeichert wird.
Es wird hauptsächlich für die folgenden Zwecke verwendet:

• Speichern von Informationen, die Benutzer auf einer Website eingeben (z. B. Anmeldedaten).
• Aufzeichnen des Besucher­verhaltens zu Marketing‑ und Analysezwecken.
• Beibehalten von Konfigurationseinstellungen (z. B. Spracheinstellungen oder Theme‑Einstellungen), um die Benutzererfahrung zu verbessern.

Wie Cookies funktionieren

Cookies bestehen aus Schlüssel‑Wert‑Paaren und werden im folgenden Format gespeichert:

name=value; expires=Wed, 31 Dec 2025 23:59:59 GMT; path=/

In diesem Beispiel wird dem Schlüssel name der Wert value zugewiesen, zusammen mit einem Ablaufdatum und einem angegebenen Pfad.

Hauptkomponenten eines Cookies

1. Name und Wert (name=value) – Die Grundinformation des Cookies.
2. Ablauf (expires oder max-age) – Gibt an, wie lange das Cookie gültig bleibt.
3. Path – Definiert das Verzeichnis oder die Seiten, auf denen das Cookie zugänglich ist.
4. Secure‑Attribut – Stellt sicher, dass das Cookie nur über HTTPS-Verbindungen gesendet wird.
5. SameSite‑Attribut – Hilft, vor Cross‑Site‑Request‑Angriffen zu schützen.

Diese flexiblen Einstellungen machen Cookies nützlich, um die Benutzererfahrung zu verbessern und gleichzeitig die Sicherheit zu stärken.

3. Grundlegende Cookie‑Operationen in JavaScript

In JavaScript werden Cookies über die document.cookie‑Eigenschaft manipuliert.
Dieser Abschnitt stellt die grundlegenden Operationen vor.

Einen Cookie setzen

Unten steht ein Beispiel, wie man einen neuen Cookie erstellt.

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Wichtige Punkte:

• username=John : Gibt den Schlüssel und den Wert an.
• expires : Legt das Ablaufdatum fest. Wird es weggelassen, wird das Cookie beim Schließen des Browsers gelöscht.
• path=/ : Macht das Cookie für die gesamte Seite verfügbar.

Cookies auslesen

Alle Cookies können wie folgt abgerufen werden:

console.log(document.cookie);

Beispielausgabe:

username=John; theme=dark; lang=ja

Da mehrere Cookies durch Semikolons (;) getrennt sind, muss die Zeichenkette beim Verarbeiten einzelner Werte aufgeteilt werden.

Einen Cookie löschen

Um einen Cookie zu löschen, setzt man sein Ablaufdatum auf ein vergangenes Datum.

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Dieser Code entfernt den Cookie mit dem Namen username.

4. Cookie‑Attribut‑Einstellungen

Cookie‑Attribute spielen eine wichtige Rolle bei Sicherheit und Ablaufsteuerung.

Ablauf festlegen

1. Verwendung des expires‑Attributs (datumsbasiert)

   document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
   

2. Verwendung des max-age‑Attributs (sekundenbasiert)

   document.cookie = "username=John; max-age=3600; path=/";
   

Diese Konfiguration löscht das Cookie automatisch nach einer Stunde.

Sicherheitsattribute

1. secure‑Attribut (nur HTTPS)

   document.cookie = "username=John; secure";
   

2. SameSite‑Attribut (Schutz vor Cross‑Site‑Requests)

   document.cookie = "username=John; SameSite=Strict";
   

Durch die korrekte Konfiguration dieser Attribute kann die Sicherheit und der Datenschutz erheblich verbessert werden.

5. Praktische Codebeispiele

Zählen von Benutzerbesuchen

function getCookie(name) {
  let cookies = document.cookie.split('; ');
  for (let i = 0; i < cookies.length; i++) {
    let parts = cookies[i].split('=');
    if (parts[0] === name) return parts[1];
  }
  return null;
}

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}

let visits = getCookie("visits") ? parseInt(getCookie("visits")) : 0;
visits++;
setCookie("visits", visits, 365);
alert("Your number of visits: " + visits);

Dieser Code speichert die Anzahl der Benutzerbesuche in einem Cookie und aktualisiert den Zähler bei jedem Besuch.

6. Verwendung von Drittanbieter‑Bibliotheken

Obwohl Cookies mit der document.cookie‑Eigenschaft in JavaScript verwaltet werden können, kann das Arbeiten mit Zeichenketten und das Setzen von Attributen umständlich werden.
Dies führt häufig zu längerem Code und geringerer Lesbarkeit.

Um die Cookie‑Verwaltung zu vereinfachen, ist die Nutzung von Drittanbieter‑Bibliotheken ein gängiger und effektiver Ansatz.
In diesem Abschnitt konzentrieren wir uns auf eine der beliebtesten Bibliotheken: js-cookie.

1. Was ist die js-cookie‑Bibliothek?

js-cookie ist eine leichtgewichtige JavaScript‑Bibliothek, die Cookie‑Operationen vereinfacht.
Ihre Hauptfunktionen umfassen:

• Einfaches API : Cookies einfach setzen, auslesen und löschen.
• Erweiterbarkeit und Flexibilität : Unterstützt Sicherheitsoptionen und benutzerdefinierte Konfigurationen.
• Leichtgewichtig : Nur etwa 2 KB nach Minifizierung.

2. Installation von js-cookie

Laden über CDN

Fügen Sie den folgenden Code innerhalb des <head>‑Tags Ihrer HTML‑Datei ein.

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

Installation über npm oder yarn

Wenn Sie Abhängigkeiten in Ihrem Projekt verwalten, verwenden Sie einen der folgenden Befehle:

npm install js-cookie

oder

yarn add js-cookie

3. Grundlegende Verwendung

Setzen eines Cookies

Cookies.set('username', 'John', { expires: 7 }); // Valid for 7 days

Auslesen eines Cookies

let username = Cookies.get('username');
console.log(username); // Output: John

Löschen eines Cookies

Cookies.remove('username');

4. Erweiterte Optionen‑Einstellungen

Setzen von Ablaufzeit und Pfad

Cookies.set('session', 'active', { expires: 1, path: '/' });

• expires : Läuft nach 1 Tag ab.
• path : Macht das Cookie site‑weit verfügbar.

Hinzufügen des Secure‑Attributs

Cookies.set('secureData', 'secret', { secure: true });

• secure: true : Sendet das Cookie nur über HTTPS.

Festlegen des SameSite‑Attributs

Cookies.set('strictCookie', 'value', { sameSite: 'Strict' });

• sameSite: ‚Strict‘ : Blockiert Anfragen von anderen Sites und erhöht die Sicherheit.

7. Sicherheits‑ und Datenschutz‑Überlegungen

Beim Arbeiten mit Cookies in JavaScript sind Sicherheitsmaßnahmen und Datenschutz von größter Bedeutung.
Unsachgemäße Handhabung kann zu Datenlecks oder unbefugtem Zugriff führen.
Dieser Abschnitt erklärt bewährte Verfahren für eine sichere Cookie‑Verwaltung.

1. Sicherheitsmaßnahmen

Verwendung von HTTPS und des Secure‑Attributs

Setzen Sie das Secure‑Attribut, damit Cookies nur über HTTPS‑Verbindungen gesendet werden.
Dies hilft, Datenabfangung und Manipulation zu verhindern.

Beispiel:

document.cookie = "sessionID=abc123; Secure";

Wenn Sie die Drittanbieter‑Bibliothek js-cookie verwenden, können Sie sie wie folgt konfigurieren:

Cookies.set('sessionID', 'abc123', { secure: true });

Verwendung des HttpOnly‑Attributs (Server‑seitige Konfiguration)

JavaScript kann das HttpOnly‑Attribut nicht clientseitig setzen.
Wird dieses Attribut jedoch serverseitig konfiguriert, hilft es,
XSS (Cross‑Site Scripting)‑Angriffe zu verhindern.

Beispiel: Server‑seitige Konfiguration (PHP)

setcookie('sessionID', 'abc123', [
    'httponly' => true,
    'secure' => true,
    'samesite' => 'Strict'
]);

Verhinderung von CSRF-Angriffen mit dem SameSite-Attribut

Um CSRF (Cross-Site Request Forgery)-Angriffe zu verhindern, konfigurieren Sie das SameSite-Attribut.

Beispiel:

document.cookie = "token=secureToken; SameSite=Strict";

2. Datenschutz

Beschränkung der Art gespeicherter Informationen

Vermeiden Sie das Speichern persönlicher oder sensibler Informationen (wie Passwörter) in Cookies. Stattdessen sollten anonyme Kennungen wie Sitzungs‑IDs gespeichert und serverseitig validiert werden.

Beispiel: Verwendung einer Sitzungs‑ID

Cookies.set('sessionID', 'randomString123', { secure: true, httpOnly: true });

Einhaltung von DSGVO und Datenschutzbestimmungen

Aufgrund von Vorschriften wie der DSGVO (Datenschutz‑Grundverordnung) in der EU und Japans Gesetz zum Schutz personenbezogener Daten, gelten beim Einsatz von Cookies die folgenden Anforderungen:

1. Erforderliche Nutzerzustimmung Die Nutzer müssen über den Zweck der Cookie‑Verwendung informiert werden und ihre ausdrückliche Zustimmung geben.
2. Bereitstellung von Opt‑in‑ und Opt‑out‑Optionen Die Nutzer müssen die Möglichkeit haben, nicht‑essentielle Cookies abzulehnen.

Beispiel: Cookie‑Zustimmungsbanner (JavaScript)

if (!Cookies.get('cookieConsent')) {
  let consent = confirm('This site uses cookies. Do you allow cookies?');
  if (consent) {
    Cookies.set('cookieConsent', 'true', { expires: 365 });
  }
}

8. Wie man Cookies im Browser überprüft

Beim Setzen, Abrufen oder Löschen von Cookies mit JavaScript können Sie ihr Verhalten mit den Entwickler‑Tools des Browsers überprüfen. Dieser Abschnitt erklärt, wie man Cookies in den wichtigsten Browsern prüft.

1. Cookies in Google Chrome prüfen

Öffnen der Entwickler‑Tools

1. Rechtsklick auf die Seite und wählen Sie „Inspect“ oder „Inspect Element“.
2. Oder drücken Sie F12 oder Ctrl + Shift + I (auf dem Mac: Cmd + Opt + I).

Schritte zum Anzeigen von Cookies

1. Wählen Sie den Reiter „Application“ in den Entwickler‑Tools.
2. Klicken Sie im linken Menü auf „Storage“ → „Cookies“.
3. Wählen Sie die gewünschte Domain aus der Liste.

Anzeige der Cookie‑Details

Cookies der ausgewählten Seite werden in Tabellenform angezeigt. Jede Spalte enthält die folgenden Informationen:

Bearbeiten und Löschen von Cookies

• Editieren: Doppelklicken Sie auf eine Zeile, um ihren Wert zu ändern.
• Löschen: Wählen Sie eine Zeile aus und drücken Sie die Delete‑Taste, oder rechtsklicken Sie und wählen Delete.

2. Cookies in Firefox prüfen

Öffnen der Entwickler‑Tools

1. Rechtsklick auf die Seite und wählen Sie „Inspect“.
2. Oder drücken Sie F12 oder Ctrl + Shift + I.

Anzeigen von Cookies

1. Wählen Sie den Reiter „Storage“.
2. Klicken Sie im linken Menü auf „Cookies“.
3. Wählen Sie die gewünschte Seite aus den angezeigten Domains.

Bearbeiten und Löschen

Wie in Chrome können Sie Werte direkt bearbeiten oder Cookies löschen.

3. Cookies in Safari prüfen (für Mac‑Benutzer)

Aktivieren der Entwickler‑Tools

1. Öffnen Sie „Settings“ im Safari‑Menü.
2. Wählen Sie den Reiter „Advanced“ und aktivieren Sie „Show Develop menu in menu bar“.

Öffnen der Entwickler‑Tools

1. Rechtsklick auf die Seite und wählen Sie „Inspect Element“.
2. Oder drücken Sie Cmd + Opt + I.

Anzeigen von Cookies

1. Wählen Sie den Reiter „Storage“.
2. Wählen Sie „Cookies“, um deren Inhalt zu prüfen.

4. Cookies über die Konsole prüfen

Cookies können auch über die JavaScript‑Konsole inspiziert werden.

Beispiel: Alle Cookies anzeigen

console.log(document.cookie);

Beispiel: Ein bestimmtes Cookie abrufen

let cookies = document.cookie.split('; ');
let username = cookies.find(row => row.startsWith('username=')).split('=')[1];
console.log(username);

Cookies können auch direkt über die Konsole hinzugefügt oder entfernt werden.

9. Zusammenfassung

In den vorherigen Abschnitten haben wir Cookie-Verarbeitung in JavaScript von den Grundkonzepten bis zu fortgeschrittenen Anwendungsfällen behandelt. Dieser Abschnitt fasst die wichtigsten Punkte zusammen und gibt praktische Best Practices wieder.

1. Grundlagen von Cookies und wie sie funktionieren

Cookies sind ein Mechanismus zum Speichern kleiner Datenmengen in einem Webbrowser.

• Anwendungsfälle : Aufrechterhaltung von Anmeldesitzungen, Verwaltung von Benutzereinstellungen und Verfolgung von Verhalten.
• Komponenten : Schlüssel‑Wert‑Paare, Ablaufdaten, Pfade, Domains und Sicherheitsattribute.

Das Verständnis dieser Grundlagen ermöglicht es Ihnen, Cookies flexibel an verschiedene Szenarien anzupassen.

2. Cookie-Operationen in JavaScript

In JavaScript können Sie Cookies mithilfe der document.cookie‑Eigenschaft einfach setzen, abrufen und löschen.

Beispiel: Einen Cookie setzen

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Beispiel: Cookies abrufen

console.log(document.cookie);

Beispiel: Einen Cookie löschen

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Diese Beispiele decken die Grundlagen ab, für komplexere Anforderungen wird jedoch die Verwendung einer Drittanbieter‑Bibliothek empfohlen.

3. Verwendung von Drittanbieter‑Bibliotheken

Bibliotheken machen die Cookie‑Verwaltung deutlich einfacher und lesbarer.

Beispiel mit js-cookie

Cookies.set('username', 'John', { expires: 7, secure: true });
let username = Cookies.get('username');
Cookies.remove('username');

Vorteile:

• Kurzer und intuitiver Code.
• Einfache Konfiguration von Sicherheitsattributen und Optionen.
• Reibungslose plattformübergreifende Kompatibilität.

4. Sicherheits‑ und Datenschutzmaßnahmen

Cookies sollten stets mit korrekten Sicherheitseinstellungen und Datenschutzmaßnahmen verwendet werden.

Wichtige Sicherheitspraktiken

1. Verwenden Sie HTTPS und das Secure‑Attribut : Verhindert das Abfangen von Daten.
2. Setzen Sie das SameSite‑Attribut : Schützt vor CSRF‑Angriffen.
3. Verwenden Sie das HttpOnly‑Attribut : Reduziert XSS‑Angriffe (Server‑seitige Konfiguration).

Wichtige Datenschutzpraktiken

1. Speichern Sie keine persönlichen Informationen : Speichern Sie nur IDs oder Tokens und verwalten Sie die eigentlichen Daten auf dem Server.
2. Einhaltung von Vorschriften : Implementieren Sie ein Zustimmungsmanagement gemäß DSGVO und verwandten Gesetzen.
3. Verschlüsseln Sie sensible Daten : Verschlüsseln Sie stets kritische Informationen vor der Speicherung.

5. Überprüfung und Fehlersuche bei Cookies

Die Verwendung von Entwickler‑Tools hilft Ihnen, das Verhalten von Cookies effizient zu überprüfen und zu debuggen.

Browserspezifische Tools

• Google Chrome : Sehr funktionsreich und benutzerfreundlich.
• Firefox : Erweiterte Funktionen zur Speicherverwaltung.
• Edge und Safari : Werden mit ähnlichen Schritten wie Chrome verwaltet.

Verwendung der JavaScript‑Konsole

console.log(document.cookie);

Damit können Sie schnell testen und debuggen.

6. Praktische Best Practices

Im Folgenden finden Sie konkrete Empfehlungen für eine sichere und effiziente Cookie‑Verwaltung:

1. Speichern Sie nur die minimal erforderlichen Daten : Vermeiden Sie unnötige Cookies und verwalten Sie kritische Daten auf dem Server.
2. Setzen Sie angemessene Ablaufzeiten : Verwenden Sie kurze Ablaufzeiten und löschen Sie nicht genutzte Cookies.
3. Stärken Sie die Sicherheitseinstellungen : Konfigurieren Sie stets die Secure‑, HttpOnly‑ und SameSite‑Attribute.
4. Einholen der Benutzereinwilligung : Setzen Sie ein Zustimmungsbanner ein, das den Vorgaben der DSGVO und anderer Datenschutzbestimmungen entspricht.
5. Verwenden Sie Debugging‑Tools effektiv : Untersuchen Sie Cookies regelmäßig mit den Entwickler‑Tools des Browsers.
6. Nutzen Sie Drittanbieter‑Bibliotheken : Verwenden Sie Bibliotheken wie js-cookie, um die Verwaltung zu vereinfachen und die Lesbarkeit zu verbessern.

Fazit

Dieser Artikel bietet einen umfassenden Überblick über die Cookie‑Verwaltung in JavaScript und deckt alles von der Grundnutzung bis zu Sicherheits‑ und Datenschutzaspekten ab.

Wesentliche Erkenntnisse

• Die Grundlagen, wie Cookies funktionieren und wann man sie einsetzt.
• Wie man Cookies mit JavaScript setzt, abruft und löscht.
• Die Bedeutung von Sicherheitsmaßnahmen und rechtlicher Konformität.
• Effiziente Arbeitsabläufe mit Entwickler‑Tools und Bibliotheken von Drittanbietern.

Nächste Schritte
Verwenden Sie diesen Leitfaden als Referenz, um das Cookie‑Management in realen Projekten umzusetzen.
Um sicher und konform mit den sich entwickelnden Datenschutzgesetzen zu bleiben,
ist kontinuierliches Lernen und regelmäßige Überprüfung bewährter Praktiken unerlässlich.

Integrieren Sie weiterhin neue Technologien und Wissen, um sicherere,
benutzerfreundlichere Webanwendungen zu erstellen.