Zum Hauptinhalt springen

Was ist ein Cookie? 🍪

Wenn Sie eine Website besuchen, sehen Sie oft die Meldung "Akzeptieren Sie die Verwendung von Cookies?". Ich erkläre Ihnen, was ein Cookie genau ist und warum es benötigt wird, so einfach, dass auch Anfänger es verstehen können!

Cookies mit dem Alltag vergleichen?​

Vergleichen wir Cookies mit einem Kassenbon.

Die Geschichte des Café-Kassenbons ☕​

Erster Besuch:
Kunde: "Einen Americano bitte"
Café: "Hier ist Ihr Kaffee und Ihr Kassenbon"
      [Kassenbon: Kundennummer #123, Lieblingsgetränk: Americano]

Nächster Besuch:
Kunde: [Zeigt den Kassenbon]
Café: "Ah, Kunde #123! Ein Americano für Sie?"

Cookies funktionieren genauso!

Erster Besuch:
Browser: "Dies ist mein erster Besuch auf dieser Website"
Website: "Hier ist ein Cookie für Sie"
         [Cookie: Benutzer-ID, Einstellungen usw.]

Nächster Besuch:
Browser: [Zeigt das Cookie]
Website: "Ah, Sie sind zurück! Ich behalte Ihre Anmeldung bei"

Cookie (Cookie)

  • Kleine Textdatei, die die Website im Browser speichert
  • Die Art und Weise, wie sich die Website an Sie "erinnert"
  • Größe: normalerweise weniger als 4KB

Wo werden Cookies gespeichert?​

Mein Computer/Smartphone
└── Browser (Chrome, Safari usw.)
    └── Cookie-Speicher
        ├── google.com Cookie
        ├── spiegel.de Cookie
        └── github.com Cookie

Was Cookies tun​

1. Anmeldung beibehalten 🔐​

Ohne Cookie:

1. Anmelden
2. Zu einer anderen Seite gehen
3. Abgemeldet... 😭
4. Erneut anmelden
5. Wieder zu einer anderen Seite gehen
6. Wieder abgemeldet... 😭

Mit Cookie:

1. Anmelden
2. Cookie speichert Anmeldeinformationen
3. Anmeldung bleibt beim Navigieren erhalten! ✅
4. Anmeldung bleibt auch nach dem Schließen des Browsers erhalten! ✅

2. Warenkorb merken 🛒​

Im Online-Shop:
1. Produkt A in den Warenkorb legen
2. Andere Produkte ansehen
3. Produkt A ist noch im Warenkorb! ✅

3. Personalisierte Einstellungen ⚙️​

Website-Einstellungen:
- Sprache: Deutsch
- Theme: Dunkelmodus
- Schriftgröße: Groß

→ Beim nächsten Besuch automatisch angewendet! ✅

4. Tracking und Werbung 📊​

Produkte, die Sie angesehen haben:
- Schuhe A
- Tasche B

→ Zeige verwandte Werbung auf anderen Websites

Cookies werden im Format Name=Wert gespeichert:

Name: user_id
Wert: 12345
Domain: example.com
Pfad: /
Ablauf: 2025-12-31
Sicherheit: Secure, HttpOnly
session_id=abc123xyz; Domain=example.com; Path=/; Expires=Fri, 31 Dec 2025 23:59:59 GMT; Secure; HttpOnly

1. Session-Cookie (Session Cookie) 🕐​

Cookie, das beim Schließen des Browsers gelöscht wird

Lebenszyklus: Nur während der Browser läuft
Verwendung: Temporäre Anmeldung, Warenkorb
Merkmal: Kein Ablaufdatum

Beispiel:

Browser öffnen → Einkaufen → Browser schließen → Warenkorb geleert

2. Persistentes Cookie (Persistent Cookie) 📅​

Cookie, das bis zu einem bestimmten Datum erhalten bleibt

Lebenszyklus: Bis zum Ablaufdatum oder manuellen Löschen
Verwendung: "Angemeldet bleiben", personalisierte Einstellungen
Merkmal: Ablaufdatum angegeben

Beispiel:

"Angemeldet bleiben" markieren
→ 30 Tage automatische Anmeldung ✅

3. Erstanbieter-Cookie (First-party Cookie) 🏠​

Cookie, das direkt von der besuchten Website erstellt wurde

example.com besuchen
→ Cookie von example.com gesetzt
→ Nur auf example.com verwendet

Verwendung:

  • Anmeldung beibehalten
  • Warenkorb
  • Website-Einstellungen

Cookie, das von einer anderen Website erstellt wurde (hauptsächlich für Werbung)

example.com besuchen
→ Werbefirmen-Skript auf der Seite wird ausgeführt
→ ads.com setzt Cookie
→ Verfolgt Sie auf mehreren Websites

Verwendung:

  • Werbe-Tracking
  • Nutzerverhaltenanalyse
  • Personalisierte Werbung
Warnung

Drittanbieter-Cookies werden aus Datenschutzgründen zunehmend blockiert! Chrome, Safari usw. blockieren Drittanbieter-Cookies.

Browser → Anfrage an Website
Website → Antwort + Cookie senden

HTTP Response:
Set-Cookie: user_id=12345; Expires=...
Browser speichert Cookie im Speicher
Browser → Erneute Anfrage an Website + Cookie mitsenden

HTTP Request:
Cookie: user_id=12345
Website liest Cookie und identifiziert Benutzer
→ "Ah, das ist Benutzer 12345!"

Domain (Domain)​

Das Cookie von example.com
wird nur auf example.com verwendet

Path (Pfad)​

Path=/shop
→ Cookie nur auf Pfad /shop gesendet

Expires/Max-Age (Ablauf)​

Expires=2025-12-31
→ Bis zu diesem Datum beibehalten

Max-Age=3600
→ Nach 3600 Sekunden (1 Stunde) löschen

Secure (Sicherheit)​

Secure-Flag
→ Cookie nur über HTTPS senden
Nicht über HTTP senden

HttpOnly​

HttpOnly-Flag
→ Nicht über JavaScript zugänglich
Schutz vor XSS-Angriffen

SameSite​

SameSite=Strict
→ Cookie nur auf derselben Website senden
Schutz vor CSRF-Angriffen

Vorteile von Cookies​

✅ Verbesserung der Benutzererfahrung​

  • Anmeldung beibehalten
  • Personalisierte Inhalte
  • Bequemes Einkaufen

✅ Zustand beibehalten​

  • HTTP ist zustandslos (Stateless)
  • Cookies ermöglichen Zustandserhaltung

✅ Einfache Implementierung​

  • Einfach sowohl auf Server- als auch auf Client-Seite zu verwenden
  • Fast keine zusätzliche Konfiguration erforderlich

Nachteile von Cookies​

❌ Sicherheitsrisiken​

  • Diebstahlmöglichkeit (XSS-, CSRF-Angriffe)
  • Ungeeignet für Speicherung sensibler Informationen

❌ Datenschutzprobleme​

  • Benutzerverfolgung möglich
  • Werbe-Tracking mit Drittanbieter-Cookies

❌ Größenbeschränkung​

  • 4KB-Limit pro Cookie
  • Cookie-Anzahlbegrenzung pro Domain (normalerweise 20~50)

❌ Bei jeder Anfrage gesendet​

  • Alle HTTP-Anfragen enthalten Cookies
  • Erhöhter Datenverkehr
MerkmalCookieLocal StorageSession Storage
Größe4KB5-10MB5-10MB
LebenszyklusAblauf festlegenPermanentBeim Tab-Schließen löschen
An Server senden✅ Jedes Mal❌ Nicht gesendet❌ Nicht gesendet
ZugriffServer/JSNur JSNur JS
VerwendungAuthentifizierung, TrackingGroße DatenmengenTemporäre Daten

Wann was verwenden?​

Cookie: Login-Token, Informationen, die der Server wissen muss
Local Storage: Benutzereinstellungen, Offline-Daten
Session Storage: Temporäre Formulardaten, einmalige Informationen

1. Secure-Flag verwenden 🔒​

Set-Cookie: token=abc; Secure
→ Nur über HTTPS senden

2. HttpOnly-Flag verwenden 🛡️​

Set-Cookie: session=xyz; HttpOnly
→ JavaScript-Zugriff blockieren
→ Schutz vor XSS-Angriffen

3. SameSite-Flag verwenden 🚫​

Set-Cookie: id=123; SameSite=Strict
→ Schutz vor CSRF-Angriffen

4. Speicherung sensibler Informationen verbieten ⚠️​

❌ Passwörter
❌ Kreditkartennummern
❌ Personalausweisnummern

✅ Sitzungs-ID (verschlüsseltes Token)
✅ Benutzereinstellungen

Cookies im Browser anzeigen​

Chrome:

Einstellungen → Datenschutz und Sicherheit → Cookies und andere Websitedaten
→ Alle Cookies und Websitedaten anzeigen

Entwicklertools:

F12 → Application-Tab → Storage → Cookies

Cookies löschen​

1. Nur Cookies einer bestimmten Website löschen
2. Alle Cookies löschen
3. Automatisches Löschen von Cookies einrichten (beim Browser-Schließen)

Cookies mit JavaScript handhaben​

Cookie setzen:

document.cookie = "username=Hans Müller; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Cookie lesen:

console.log(document.cookie);
// "username=Hans Müller; theme=dark; ..."

Cookie löschen:

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

Praktische Anwendungsbeispiele​

Beispiel 1: Anmeldung beibehalten 🔐​

// Bei erfolgreicher Anmeldung
Set-Cookie: auth_token=eyJhbGc...;
            Expires=Mon, 31 Jan 2025 23:59:59 GMT;
            Secure;
            HttpOnly;
            SameSite=Strict

// Automatisch bei jeder folgenden Anfrage:
Cookie: auth_token=eyJhbGc...

Beispiel 2: Theme-Einstellung 🎨​

// Benutzer wählt Dunkelmodus
document.cookie = "theme=dark; max-age=31536000; path=/";

// Beim Laden der Seite
if (document.cookie.includes("theme=dark")) {
  enableDarkMode();
}

Beispiel 3: Spracheinstellung 🌏​

// Sprachauswahl
Set-Cookie: lang=de; Max-Age=31536000; Path=/

// Server liest Cookie und liefert deutsche Inhalte

DSGVO (Datenschutz-Grundverordnung):

Websites müssen vor der Verwendung von Cookies
die Zustimmung des Benutzers einholen

Erforderliche Cookies vs optionale Cookies:

Erforderlich: Anmeldung, Warenkorb (keine Zustimmung erforderlich)
Optional: Werbe-Tracking, Analyse (Zustimmung erforderlich)

Häufig gestellte Fragen (FAQ)​

F1: Was passiert, wenn ich Cookies blockiere?​

A: Viele Websites funktionieren nicht richtig.

  • Anmeldung nicht möglich
  • Warenkorb kann nicht verwendet werden
  • Einstellungen werden nicht gespeichert

F2: Sind Cookies sicher?​

A: Ja, wenn sie richtig verwendet werden.

  • Secure-, HttpOnly-Flags verwenden
  • Keine sensiblen Informationen speichern
  • HTTPS verwenden

F3: Können Cookies Viren verursachen?​

A: Nein! Cookies sind einfache Textdateien.

  • Können keinen Code ausführen
  • Können keine Viren enthalten

F4: Sollte ich Cookies häufig löschen?​

A: Das ist eine persönliche Entscheidung.

  • Vorteil: Verbesserter Datenschutz
  • Nachteil: Abmeldung, Zurücksetzen der Einstellungen

F5: Cookies im Inkognito-Modus?​

A: Werden temporär verwendet.

  • Alles wird beim Schließen des Inkognito-Fensters gelöscht
  • Verbesserte Tracking-Prävention

Die Zukunft von Cookies​

1. Abschaffung von Drittanbieter-Cookies​

Chrome, Safari usw. blockieren Drittanbieter-Cookies
→ Werbeunternehmen suchen nach Alternativen

2. Alternative Technologien​

- Privacy Sandbox (Google)
- FLoC (Federated Learning of Cohorts)
- Neue Standards mit verbessertem Datenschutz

Nächste Schritte 🚀​

Wenn Sie Cookies verstanden haben:

  1. ✅ Was ist Cache? - Eine andere Möglichkeit, Daten schnell zu laden
  2. ✅ Was ist ein VPN? - Online-Datenschutz
  3. ✅ HTTP-Anfrage/Antwort verstehen - Wie Cookies gesendet werden

Zusammenfassung​

Cookies sind die Art und Weise, wie Websites sich an Sie erinnern! 🍪

Punkte zum Merken:

  • Cookie = Kleine Textdatei
  • Im Browser gespeichert
  • Anmeldung beibehalten, Warenkorb, Einstellungen speichern
  • Auf Sicherheit achten (Secure, HttpOnly verwenden)
  • Drittanbieter-Cookies sind für Tracking (können blockiert werden)

Dank Cookies können wir das Web bequem nutzen, aber wir müssen auch auf den Datenschutz achten! 🔐