Asynchroner Zugriff auf HTTP-Cookies

Victor Costan
X GitHub

Was ist die Cookie Store API?

Die Cookie Store API stellt Service Workern und bietet eine asynchrone Alternative zu document.cookie. Die API macht es möglich, einfacher:

  • Vermeiden Sie Verzögerungen im Hauptthread, indem Sie asynchron auf Cookies zugreifen.
  • Vermeiden Sie das Abfragen von Cookies, da Änderungen an Cookies beobachtet werden können.
  • Auf Cookies von Service Workern zugreifen.

Erklärung lesen

Aktueller Status

Schritt Status
1. Erklärende Mitteilung erstellen Abschließen
2. Ersten Entwurf der Spezifikation erstellen Abschließen
**3. Feedback einholen und Spezifikation iterieren** **In Bearbeitung**
4. Ursprungstest Pausiert
5. Starten Nicht gestartet

Wie verwende ich den asynchronen Cookie-Speicher?

Ursprungstest aktivieren

Wenn Sie die API lokal testen möchten, können Sie sie über die Befehlszeile aktivieren:

chrome --enable-blink-features=CookieStore

Durch Übergabe dieses Flags in der Befehlszeile wird die API global in Chrome für folgende Nutzer aktiviert: in der aktuellen Sitzung.

Alternativ können Sie die #enable-experimental-web-platform-features aktivieren Flag in chrome://flags.

Sie benötigen (wahrscheinlich) keine Cookies,

Bevor wir uns mit der neuen API beschäftigen, möchte ich anmerken, dass Cookies immer noch das Web das schlechteste clientseitige Speicherprimitive der Plattform und sollte trotzdem als als letztes Mittel. Dies ist kein Zufall - Cookies waren die erste clientseitige Speichermechanismus und haben seitdem viel gelernt.

Die Hauptgründe für die Vermeidung von Cookies sind:

  • Cookies stellen das Speicherschema in Ihre Back-End-API ein. Jede HTTP-Anfrage enthält einen Snapshot der Cookie-JAR-Datei. Dadurch wird es einfach, Back-End-Engineers, um Abhängigkeiten vom aktuellen Cookie-Format einzuführen. Einmal kann Ihr Frontend sein Speicherschema nicht ändern, ohne eine entsprechende Änderung am Backend vornehmen.

  • Cookies haben ein komplexes Sicherheitsmodell. Moderne Webplattformfunktionen folgen derselben Ursprungsrichtlinie, d. h., Jede Anwendung erhält ihre eigene Sandbox und ist völlig unabhängig von andere Anwendungen, die der Nutzer ausführt. Cookie-Bereiche das Thema Sicherheit wesentlich komplexer machen. würde das die Größe des Artikels verdoppeln.

  • Cookies verursachen hohe Leistungskosten. Browser müssen einen Snapshot der bei jeder HTTP-Anfrage verwendet werden, daher muss jede Änderung an Cookies zwischen den Speicher- und Netzwerk-Stacks verteilt. Moderne Browser haben stark optimierten Cookie-Speicher-Implementierungen zu implementieren. Cookies sind so effizient wie die anderen Speichermechanismen, die keine Gespräche mit dem Netzwerk-Stack verknüpft.

Aus allen oben genannten Gründen sollten moderne Webanwendungen auf Cookies und stattdessen eine Sitzungs-ID in IndexedDB und die ID explizit zum Header oder Textkörper bestimmter HTTP-Anfragen hinzufügen, mithilfe der fetch API.

Dennoch lesen Sie diesen Artikel immer noch, weil Sie eine gute Gründe für die Verwendung von Cookies...

Der ehrwürdige document.cookie Das API ist eine ziemlich garantierte Quelle für Verzögerungen für Ihre Anwendung. Beispiel: Wenn Sie den Getter document.cookie verwenden, muss der Browser die Ausführung bis die angeforderten Cookie-Informationen vorliegen. Dies kann bis zu ein Prozess-Hop oder ein Laufwerklesevorgang, wodurch die Benutzeroberfläche zu Verzögerungen führt.

Eine einfache Lösung für dieses Problem ist ein Wechsel von der document.cookie Getter zur asynchronen Cookie Store API hinzu.

await cookieStore.get('session_id');

// {
//   domain: "example.com",
//   expires: 1593745721000,
//   name: "session_id",
//   path: "/",
//   sameSite: "unrestricted",
//   secure: true,
//   value: "yxlgco2xtqb.ly25tv3tkb8"
// }

Der document.cookie-Setter kann auf ähnliche Weise ersetzt werden. Wichtige Hinweise dass die Änderung erst garantiert angewendet wird, nachdem das Promise vom cookieStore.set aufgelöst wird.

await cookieStore.set({name: 'opt_out', value: '1'});

// undefined

Beobachten, nicht abfragen

Eine beliebte Anwendung für den Zugriff auf Cookies über JavaScript erkennt, wenn Der Nutzer meldet sich ab und aktualisiert die UI. Dies erfolgt derzeit durch Abfragen document.cookie, was zu Verzögerungen führt und sich negativ auf den Akku auswirkt Leben.

Die Cookie Store API bietet eine alternative Methode zur Beobachtung von Cookies. für die keine Abfrage erforderlich ist.

cookieStore.addEventListener('change', event => {
  for (const cookie of event.changed) {
    if (cookie.name === 'session_id') sessionCookieChanged(cookie.value);
  }
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') sessionCookieChanged(null);
  }
});

Servicemitarbeiter willkommen heißen

Aufgrund des synchronen Designs wurde die document.cookie API nicht erstellt, verfügbar für Service Worker. Die Cookie Store API ist asynchron und daher zulässig. Arbeiter.

Die Interaktion mit den Cookies funktioniert in Dokumentkontexten und in Service Workers.

// Works in documents and service workers.
async function logOut() {
  await cookieStore.delete('session_id');
}

Die Beobachtung von Cookie-Änderungen ist bei Service Workern jedoch etwas anders. Aufwachen kann ziemlich teuer sein. Daher müssen wir Änderungen am Cookie, die für den Worker relevant sind.

Im folgenden Beispiel wird eine Anwendung, die IndexedDB verwendet, um Nutzerdaten im Cache zu speichern, überwacht Änderungen am Sitzungscookie und verwirft die im Cache gespeicherten Daten, wenn der Nutzer meldet sich ab.

// Specify the cookie changes we're interested in during the install event.
self.addEventListener('install', event => {
  event.waitUntil(cookieStore.subscribeToChanges([{name: 'session_id'}]));
});

// Delete cached data when the user logs out.
self.addEventListener('cookiechange', event => {
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') {
      indexedDB.deleteDatabase('user_cache');
      break;
    }
  }
});

Best Practices

Bald verfügbar.

Feedback

Wenn Sie diese API ausprobieren, teilen Sie uns Ihre Meinung mit! Bitte verweisen Feedback zur API-Form an die Spezifikations-Repository und melden Fehler bei der Implementierung Blink>Storage>CookiesAPI Blink-Komponente

Wir interessieren uns besonders für Leistungsmessungen und zusätzlich zu den in der Erläuterung genannten Fällen.

Zusätzliche Ressourcen