Was sind Cookies und wie man mit ihnen in JavaScript arbeitet

? ? ? Nicht ganz… ??? Besser! Das Cookie ? ist eines der Lieblings-Emoji des Webs und auch eine der wichtigsten Technologien des Webs.

Schauen wir uns doch einmal an, worum es geht, sollen wir?

Die Grundlagen von Browser-Cookies

Browser-Cookies wurden eingeführt, um persistente Informationen über den Benutzer zu speichern. Der erste Anwendungsfall bestand darin, zu überprüfen, ob ein Benutzer bereits die Website von Netscape besucht hatte.

Cookies sind Zeichenfolgen, die ein Namensfeld, ein Wertfeld und zusätzliche optionale Attribute haben. Die Werte sind Zeichenfolgen, und Sie können speichern, was Sie für Ihre Anwendung am besten halten. Googles Analyse-Cookie _ga ist wahrscheinlich eines der || das häufigste Cookie da draußen, es sieht normalerweise so aus:

• Name: _ga
• Wert: GA1.3.210706468.1583989741
• Domäne: .beispiel.com
• Pfad: /
• Ablauf / Max-Alter: 2022-03-12T05:12:53.000Z

Cookies können bis zu 4096 Byte Daten speichern (dies umfasst Namen, Wert, Domäne, Ablaufdatum und was immer Sie sonst noch unterbringen können). Sie können eine begrenzte Anzahl von Cookies pro Domäne hinzufügen, was je nach Browser variiert.

Wie werden Cookies erstellt

Es gibt zwei Hauptmethoden, um Cookies zu erstellen:

• Mit HTTP können Sie Set-Cookie im Header Ihrer HTTP-Antwort senden. Je nach den Technologien, die Sie für Ihren Webserver verwenden, können Sie verschiedene Tools und Bibliotheken verwenden, um Cookie-Header zu verwalten. Diese Tools sollten HTTP-Antworten erstellen, die ungefähr so aussehen:

HTTP/2.0 200 OK
Content-type: text/html
Set-Cookie: alligator_name=barry
Set-Cookie: tasty_cookie=strawberry
... More http Content

Sie können Informationen zu Ihren Cookies hinzufügen, wie ein Ablaufdatum und Sicherheitsfunktionen wie die Secure-Direktive und das HttpOnly-Flag.

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly

Das HttpOnly-Flag bedeutet, dass die Cookies nicht vom Browser gelesen oder geändert werden können. Und Secure bedeutet, dass das Cookie nur über HTTPS übertragen werden kann. Diese sind wirklich wichtig, um Ihre Anwendung zu schützen.

• Mit Javascript ist es etwas kniffliger, Cookies zu verwalten. Wir haben eine Schnittstelle, document.cookie, die unsere Cookies speichert und neu zugewiesen werden kann. Zum Beispiel auf einer Seite, auf der Google Analytics installiert ist, und in der Entwicklerkonsole können wir Folgendes tun:

console.log(document.cookie)
// protokolliert etwas wie "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"

// Dieses Gleichheitszeichen funktioniert nicht wie erwartet
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// protokolliert "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"
// Beachten Sie, dass der vorherige Codeblock das neue Cookie anhängt, das wir erstellt haben

// Eine grobe Implementierung einer Cookie-Schnittstelle könnte so aussehen:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// Für ein echtes Update würden wir zuerst überprüfen, ob das Cookie existiert
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';  

Arten von Cookies

Sitzungscookies

Sitzungscookies beziehen sich oft auf eine Art von Cookie, die existiert, bis der Browser geschlossen wird. Um ein Sitzungscookie einzurichten, müssen Sie einfach kein Ablaufdatum angeben.

Zum Beispiel können Sie den Benutzernamen des Benutzers im Cookie speichern. Wer Zugriff auf das Cookie hat, hat Zugriff auf den Benutzernamen. Da er sich im Cookie befindet, müssen wir ihn nicht zu unseren Anfragen hinzufügen.

Dauerhafte Cookies

Dauerhafte Cookies werden vom Browser nicht gelöscht, wenn der Benutzer ihn schließt. Diese Cookies haben ein Ablaufdatum, das Sie auf Ihrem Server festlegen können. Sie können ein Cookie so einstellen, dass es in einem Tag oder in zehn Jahren abläuft.

Drittanbieter-Cookie

Wir können Cookies, die sich auf demselben Domain befinden, von Cookies unterscheiden, die von Drittanbietern stammen. Das zuvor genannte Beispiel mit Google Analytics ist ein Beispiel für ein Drittanbieter-Cookie. Drittanbieter-Cookies können verwendet werden, um Benutzeraktivitäten zu verfolgen. Um ein Drittanbieter-Cookie zu setzen, müssen Sie ';domain=drittanbieterdomain.com' setzen.

Cookie-Max-Alter vs. Ablauf

Cookies sind normalerweise temporär, daher möchten Sie möglicherweise ein genaues Ablaufdatum festlegen. Sie haben zwei Strategien:

• Verwenden Sie Expires und setzen Sie ein festes Ablaufdatum. Das Datum verwendet das HTTP-Datumsformat: <Wochentag>, <Tag> <Monat> <Jahr> <Stunde>:<Minute>:<Sekunde> GMT. Wenn wir also möchten, dass unser Cookie am 17. September 2020 abläuft, können wir folgendes tun:

const jacksBirthday = new Date(2020, 8, 17);
document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

• Die Verwendung von ‚Max-Age‘ wird von jedem Browser nicht unterstützt. Aber es ist die solide Lösung. Es zwingt das Cookie dazu, eine bestimmte Zeit (in Sekunden) nachdem der Client es empfangen hat, abzulaufen:

// Läuft nach einem Tag ab
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

? Das ist ungefähr alles! Ich hoffe, Sie haben jetzt eine bessere Vorstellung davon, wie man Cookies auf der Clientseite mit JavaScript verwendet. Wenn Sie Fragen haben, stellen Sie sie uns auf Twitter. Das nächste Mal werden wir sehen, wie man Sitzungen mit Cookies und Express.js verwaltet.