Das Geheimnis der Cookie-Speicherung wurde gelüftet: eine detaillierte Erklärung der Interaktion zwischen Browser und Server

Mit der Entwicklung des Internets verwenden wir zunehmend Browser zum Surfen im Internet, zum Einkaufen, zum Anmelden und für andere Vorgänge. In diesen Prozessen hören wir oft ein Wort – Cookie. Was genau sind Cookies? Welche Funktion hat es? Heute werden wir das Geheimnis der Cookie-Speicherung lüften, die Interaktion zwischen Browser und Server im Detail analysieren und konkrete Codebeispiele geben.

1. Was sind Cookies?

Einfach ausgedrückt ist ein Cookie ein kleines Datenelement, das vom Server an den Browser gesendet und lokal gespeichert wird. Jedes Mal, wenn der Browser eine Anfrage an denselben Server stellt, werden die zuvor gespeicherten Cookie-Daten übermittelt. In diesem Fall kann der Server die Cookie-Daten im Browser lesen und basierend auf den darin enthaltenen Informationen entsprechende Vorgänge ausführen.

2. Die Rolle von Cookies

1. Sitzungsstatusverwaltung

Durch Cookies kann der Server den Benutzer identifizieren und den Sitzungsstatus des Benutzers beibehalten, wenn der Benutzer die Website erneut besucht. Wenn wir uns beispielsweise anmelden, sendet der Server ein Cookie mit unseren Anmeldeinformationen an den Browser, sodass der Server uns bei einem erneuten Besuch der Website wie beim letzten Mal wiedererkennen und uns automatisch anmelden kann.

2. Personalisierte Einstellungen

Durch Cookies kann der Server einige der persönlichen Gewohnheiten und Vorlieben des Benutzers sowie andere Informationen abrufen und so den Benutzern personalisiertere Dienste und Vorschläge bieten. Wenn wir beispielsweise eine Einkaufswebsite durchsuchen, empfiehlt der Server verwandte Produkte basierend auf unseren vorherigen Kaufaufzeichnungen und unserem Browserverlauf.

3. Verfolgung und Analyse

Durch Cookies kann der Server die Surfgewohnheiten des Benutzers verfolgen, um relevante Analysen und Statistiken durchzuführen. Ein Werbeunternehmen kann beispielsweise Cookies verwenden, um Informationen wie die Zeit und Häufigkeit der Besuche von Benutzern auf verschiedenen Websites zu verfolgen, um die Interessen und Kaufwünsche der Benutzer zu verstehen und Werbetreibenden bessere Werbedienstleistungen anzubieten.

3. Interaktion zwischen Browser und Server

Die Speicherung und Erfassung von Cookies erfolgt zwischen Browser und Server. Der gesamte Interaktionsprozess kann in die folgenden vier Schritte unterteilt werden:

1. Der Browser sendet eine Anfrage an den Server gesendet und die Anfrage wird ausgeführt. Enthält keine Cookie-Informationen.
2. Nach Erhalt der Anfrage generiert der Server Cookie-Daten und sendet sie an den Browser.
3. Nachdem der Browser die Cookie-Daten empfangen hat, speichert er sie lokal.
4. Der Browser sendet erneut eine Anfrage an denselben Server und trägt in der Anfrage die zuvor gespeicherten Cookie-Daten mit.

Um diesen Prozess besser zu verstehen, schauen wir uns ein konkretes Beispiel an.

(1) Servercode-Beispiel

Das Folgende ist ein Servercode, der mit dem Node.js-Framework geschrieben wurde, um eine Antwort mit Cookie-Informationen an den Browser zu senden.

const http = require('http');

http.createServer((req, res) => {
  //设置cookie
  res.writeHead(200, {
    'Set-Cookie': 'name=cookie_test; max-age=60'
  });

  //发送响应
  res.end('Hello World!
');
}).listen(8080);

console.log('Server running at http://localhost:8080/');

Code-Analyse:

• Verwenden Sie das Set-Cookie-Feld im Server-Antwortheader, um Cookie-Daten an den Browser zu senden.
• Stellen Sie die Gültigkeitsdauer des Cookies über den Parameter max-age ein, hier ist er auf 60 Sekunden eingestellt.

(2) Beispiel für einen Browsercode

Das Folgende ist ein in JavaScript geschriebener Browsercode, der eine Anfrage an den oben genannten Server sendet und Cookie-Informationen ausgibt, wenn die Antwort empfangen wird.

// 发送请求
fetch('http://localhost:8080')
  .then(response => {
    // 读取cookie
    console.log(response.headers.get('Set-Cookie'));
    return response.text();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error(error));

Code-Analyse:

• Verwenden Sie die Abruffunktion, um eine Anfrage an den Server zu senden.
• Lesen Sie die Cookie-Informationen im Antwortheader über die Methode „response.headers.get('Set-Cookie')“.
• Verwenden Sie die Methode „response.text()“, um die Textinformationen im Antworttext abzurufen.

4. Gemeinsame Attribute von Cookies

Zusätzlich zu dem im obigen Beispiel verwendeten Attribut für das maximale Alter haben Cookies viele weitere Attribute. Allgemeine Attribute sind wie folgt:

1. Path

Dieses Attribut gibt den Pfad des Cookies an. Wenn der Browser eine Anfrage initiiert, wird das Cookie nur dann übermittelt, wenn der Anfragepfad genau mit dem Cookie-Pfad übereinstimmt.

res.writeHead(200, {
  'Set-Cookie': 'name=value; Path=/test'
});

2. Domain

Dieses Attribut gibt den Domänennamen des Cookies an. Wenn der Browser eine Anfrage initiiert, wird das Cookie nur dann eingefügt, wenn der angeforderte Domänenname genau mit dem Domänennamen des Cookies übereinstimmt.

res.writeHead(200, {
  'Set-Cookie': 'name=value; Domain=.example.com'
});

3. Expires

Dieses Attribut gibt die Gültigkeitsdauer des Cookies an. Nachdem dieses Attribut gesetzt ist, läuft das Cookie zum angegebenen Zeitpunkt automatisch ab und wird vom Browser gelöscht.

res.writeHead(200, {
  'Set-Cookie': 'name=value; Expires=Wed, 18 Nov 2020 08:51:29 GMT'
});

4. Sicher

Dieses Attribut gibt an, ob das Cookie nur über das https-Protokoll gesendet werden kann. Nach dem Setzen dieses Attributs wird das Cookie nur dann abgerufen, wenn eine https-Anfrage gestellt wird.

res.writeHead(200, {
  'Set-Cookie': 'name=value; Secure'
});

5. HttpOnly

Dieses Attribut gibt an, ob das Cookie nur über das http-Protokoll gesendet werden kann. Nach dem Setzen dieses Attributs kann der Browser die Cookie-Informationen nicht über JavaScript abrufen, wodurch die Cookie-Sicherheit verbessert wird.

res.writeHead(200, {
  'Set-Cookie': 'name=value; HttpOnly'
});

5. Zusammenfassung

Durch die Einleitung dieses Artikels haben wir etwas über die Definition, Funktion, Speichermethode und gemeinsame Eigenschaften von Cookies erfahren. Gleichzeitig lernten wir auch das Cookie-Interaktionsmodell zwischen Browser und Server kennen und vertieften unser Verständnis von Cookies anhand spezifischer Codebeispiele. Als Front-End-Ingenieur sollten wir über ein tiefgreifendes Verständnis und eine Beherrschung des Cookie-bezogenen Wissens verfügen, um es flexibler und effizienter in der tatsächlichen Entwicklung anwenden zu können.

Das obige ist der detaillierte Inhalt vonDas Geheimnis der Cookie-Speicherung wurde gelüftet: eine detaillierte Erklärung der Interaktion zwischen Browser und Server. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!