Ein Cookie ist ein im Browser gespeicherter Datenblock, mit dem Status- und andere Informationen gespeichert werden, die eine Website zum Ausführen ihrer Funktionen benötigt.
Ein Cookie ist eine kleine Datei, die Websites auf dem Computer ihrer Nutzer speichern. Die gespeicherten Informationen werden zwischen dem Browser und der Website übertragen.
Jedes Cookie besteht aus einem Schlüssel/Wert-Paar mit einer Reihe von Attributen, die steuern, wann und wo das Cookie verwendet wird. Mit diesen Attributen können Sie z. B. ein Ablaufdatum festlegen oder angeben, dass das Cookie nur über HTTPS gesendet werden soll. Sie können ein Cookie in einem HTTP-Header oder über die JavaScript-Schnittstelle setzen.
Cookies sind eine der verfügbaren Methoden zum Hinzufügen eines dauerhaften Status zu Websites. Im Laufe der Jahre sind ihre Funktionen gewachsen und weiterentwickelt, aber es gab auf der Plattform einige problematische Legacy-Probleme. Aus diesem Grund ändern Browser (einschließlich Chrome, Firefox und Edge) ihr Verhalten, um datenschutzfreundlichere Standardeinstellungen zu erzwingen.
Cookies in Aktion
Angenommen, Sie haben einen Blog, in dem Sie Ihren Nutzern einen Hinweis zu Neuigkeiten anzeigen möchten. Nutzer können die Werbung schließen und sie wird dann eine Zeit lang nicht mehr angezeigt. Sie können diese Einstellung in einem Cookie speichern, sie in einem Monat (2.600.000 Sekunden) ablaufen lassen und sie nur über HTTPS senden. Dieser Header würde so aussehen:
Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
![Drei Cookies, die als Antwort von einem Server an einen Browser gesendet werden](https://web.dev/static/articles/understanding-cookies/image/three-cookies-being-sent-1.png?authuser=6&hl=de)
Set-Cookie
-Headers.
Wenn Leser eine Seite aufrufen, die diese Anforderungen erfüllt – sie verwenden also eine sichere Verbindung und das Cookie weniger als einen Monat alt ist –, sendet ihr Browser diesen Header in der Anfrage:
Cookie: promo_shown=1
![Drei Cookies, die in einer Anfrage von einem Browser an einen Server gesendet werden](https://web.dev/static/articles/understanding-cookies/image/three-cookies-being-sent-2.png?authuser=6&hl=de)
Cookie
-Header zurück.
Mit document.cookie
kannst du auch die auf dieser Website verfügbaren Cookies in JavaScript hinzufügen und auslesen. Durch eine Zuweisung zu document.cookie
wird ein Cookie mit diesem Schlüssel erstellt oder überschrieben. Sie können beispielsweise Folgendes in der JavaScript-Konsole Ihres Browsers ausprobieren:
→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
← "promo_shown=1; Max-Age=2600000; Secure"
Beim Lesen von document.cookie
werden alle Cookies ausgegeben, die im aktuellen Kontext zugänglich sind, wobei die einzelnen Cookies durch ein Semikolon getrennt werden:
→ document.cookie;
← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
![JavaScript, das auf Cookies im Browser zugreift](https://web.dev/static/articles/understanding-cookies/image/javascript-accessing-cook-4ae4ebde94edc.png?authuser=6&hl=de)
document.cookie
auf Cookies zugreifen.
Wenn Sie dies bei einer Auswahl beliebter Websites ausprobieren, werden Sie feststellen, dass die meisten von ihnen deutlich mehr als nur drei Cookies setzen. In den meisten Fällen werden diese Cookies bei jeder einzelnen Anfrage an diese Domain gesendet, was mehrere Auswirkungen hat. Die Uploadbandbreite ist für Ihre Nutzer häufig stärker eingeschränkt als der Download, sodass der Aufwand für alle ausgehenden Anfragen zu einer Verzögerung der Zeit bis zum ersten Byte führt. Gehen Sie bei der Anzahl und Größe der Cookies vorsichtig vor. Mit dem Attribut Max-Age
sorgen Sie dafür, dass Cookies nicht länger als nötig verbleiben.
Was sind Erstanbieter- und Drittanbieter-Cookies?
Wenn Sie dann zu der gleichen Auswahl von Websites zurückkehren, die Sie sich zuvor schon einmal angesehen haben, sind Sie wahrscheinlich bemerkt, dass Cookies für eine Vielzahl von Domains vorhanden waren, nicht nur für die, die Sie gerade besucht haben. Cookies, die mit der Domain der aktuellen Website übereinstimmen, also dem, was in der Adressleiste des Browsers angezeigt wird, werden als eigene Cookies bezeichnet. Cookies von anderen Domains als der aktuellen Website werden auch als Drittanbieter-Cookies bezeichnet. Dies ist kein absolutes Label, sondern hängt vom Kontext des Nutzers ab. Je nachdem, auf welcher Website sich der Nutzer gerade befindet, kann dasselbe Cookie entweder ein Erstanbieter- oder ein Drittanbieter-Cookie sein.
![Drei Cookies, die von verschiedenen Anfragen auf derselben Seite an einen Browser gesendet werden](https://web.dev/static/articles/understanding-cookies/image/three-cookies-being-sent-93367a53e4231.png?authuser=6&hl=de)
Wenn wir das Beispiel von oben fortsetzen, nehmen wir an, dass in einem deiner Blogposts ein Bild von einer besonders wundervollen Katze zu sehen ist. Der Beitrag wird bei /blog/img/amazing-cat.png
gehostet. Weil es ein so tolles Bild ist, kann es
andere Personen direkt auf ihrer Website verwenden. Wenn ein Besucher deinen Blog aufgerufen hat und das promo_shown
-Cookie hat, wird amazing-cat.png
, wenn er amazing-cat.png
auf der Website der anderen Person aufruft, in dieser Anfrage für das Bild gesendet. Da promo_shown
auf der Website dieser anderen Person nicht verwendet wird, ist dies für niemanden hilfreich.
Wenn dies eine unbeabsichtigte Wirkung ist, warum sollten Sie das tun? Dieser Mechanismus ermöglicht es Websites, den Zustand beizubehalten, wenn sie in einem Drittanbieter-Kontext verwendet werden. Wenn du beispielsweise ein YouTube-Video auf deiner Website einbettest, wird Besuchern im Player die Option „Später ansehen“ angezeigt. Wenn Besucher bereits in YouTube angemeldet sind, wird die Sitzung im eingebetteten Player durch ein Drittanbieter-Cookie verfügbar gemacht. Das bedeutet, dass die Schaltfläche "Später ansehen" das Video nur auf einmal speichert, anstatt den Nutzer zur Anmeldung oder zum Wechsel von deiner Seite und zurück zu YouTube aufzufordern.
![Dasselbe Cookie wird in drei verschiedenen Kontexten gesendet](https://web.dev/static/articles/understanding-cookies/image/the-same-cookie-being-sen-8e25fd5cdbf86.png?authuser=6&hl=de)
Eine der kulturellen Eigenschaften des Webs ist, dass es standardmäßig offen ist. Das ist Teil dessen, was es vielen Menschen ermöglicht hat, dort eigene Inhalte und Apps zu erstellen. Dies hat jedoch auch zu einigen Sicherheits- und Datenschutzbedenken mit sich gebracht. Cross-Site Request Forgery-Angriffe (CSRF) basieren darauf, dass Cookies an jede Anfrage an einen bestimmten Ursprung angehängt sind, unabhängig davon, wer die Anfrage initiiert. Wenn Sie beispielsweise evil.example
aufrufen, kann dies Anfragen an your-blog.example
auslösen und Ihr Browser hängt die verknüpften Cookies an. Wenn Ihr Blog diese Anfragen nicht mit Bedacht validiert, könnte evil.example
Aktionen wie das Löschen von Beiträgen oder das Hinzufügen eigener Inhalte auslösen.
Außerdem wird den Nutzern zunehmend bewusst, wie Cookies verwendet werden können, um ihre Aktivitäten auf mehreren Websites zu verfolgen. Bisher gab es jedoch keine Möglichkeit, Ihre Absicht mithilfe des Cookies explizit anzugeben. Das promo_shown
-Cookie sollte nur im Erstanbieterkontext gesendet werden. Ein Sitzungscookie für ein Widget, das auf anderen Websites eingebettet werden soll, dient hingegen absichtlich dazu, den Anmeldestatus im Kontext eines Drittanbieters bereitzustellen.
Sie können diese Absicht explizit mit einem Cookie angeben, indem Sie das entsprechende SameSite-Attribut festlegen.
Informationen zum Identifizieren Ihrer eigenen Cookies und zum Festlegen geeigneter Attribute finden Sie unter Eigene Cookie-Rezepte.