ServiceWorkerGlobalScope.cookieStore — Eigenschaft · JavaScript-Referenz

Signatur

ServiceWorkerGlobalScope.cookieStore

Beschreibung

Die Eigenschaft cookieStore von ServiceWorkerGlobalScope gibt das CookieStore-Objekt zurück, das zu diesem Service Worker gehört. Im Service Worker gibt es kein document und damit auch kein document.cookie. Über die Cookie Store API kommt er trotzdem an Cookies heran, und zwar asynchron und Promise-basiert.

Typische Einsatzfälle sind: ein Sitzungs- oder Authentifizierungs-Cookie vor einem fetch prüfen, Cookies nach einem Logout löschen oder mit dem Ereignis cookiechange auf Cookie-Änderungen reagieren, etwa um Caches zu leeren, sobald sich ein Benutzer abmeldet.

Welche Cookies sichtbar sind, hängt vom Geltungsbereich (Scope) des Service Workers ab. Er sieht nur Cookies, die für URLs in seinem Scope gelten würden. Cookies mit dem Attribut HttpOnly sind für JavaScript grundsätzlich unsichtbar, auch hier. Damit das Ereignis cookiechange im Service Worker ausgelöst wird, muss man es vorher über registration.cookies.subscribe() abonnieren.

Rückgabewert

Typ

CookieStore

Beschreibung

Das CookieStore-Objekt des Service Workers mit den Methoden get(), getAll(), set() und delete(). Die Eigenschaft ist schreibgeschützt.

Beispiele

Sitzungs-Cookie im fetch-Handler prüfen

// sw.js
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (!url.pathname.startsWith('/api/')) return;

  event.respondWith((async () => {
    const session = await self.cookieStore.get('session_id');
    if (!session) {
      return new Response(JSON.stringify({ error: 'Nicht angemeldet' }), {
        status: 401,
        headers: { 'Content-Type': 'application/json' }
      });
    }
    return fetch(event.request);
  })());
});

Cookie-Änderungen abonnieren und Cache beim Logout leeren

// sw.js
self.addEventListener('activate', (event) => {
  event.waitUntil(
    self.registration.cookies.subscribe([
      { name: 'session_id', url: '/' }
    ])
  );
});

self.addEventListener('cookiechange', async (event) => {
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') {
      await caches.delete('user-data');
      console.log('Sitzung beendet – Benutzer-Cache gelöscht');
    }
  }
});

Sitzung beendet – Benutzer-Cache gelöscht

Cookie setzen, auslesen und löschen

// sw.js – z. B. als Reaktion auf eine Nachricht der Seite
self.addEventListener('message', (event) => {
  if (event.data?.type !== 'set-theme') return;

  event.waitUntil((async () => {
    await self.cookieStore.set({
      name: 'theme',
      value: event.data.value,
      expires: Date.now() + 30 * 24 * 60 * 60 * 1000, // 30 Tage
      sameSite: 'lax'
    });

    const alle = await self.cookieStore.getAll();
    console.log(alle.map((c) => `${c.name}=${c.value}`));

    await self.cookieStore.delete('veraltetes_cookie');
  })());
});

["session_id=abc123", "theme=dark"]

Unterstützung der Funktion prüfen

// sw.js
const readCookie = async (name) => {
  if (!('cookieStore' in self)) {
    console.warn('Cookie Store API nicht verfügbar');
    return null;
  }
  const cookie = await self.cookieStore.get(name);
  return cookie?.value ?? null;
};

readCookie('session_id').then((wert) => console.log('Sitzung:', wert));

Sitzung: abc123

// Wichtig · Fallstricke

Browser-Unterstützung: Chromium-Browser unterstützen die API seit Version 87. Firefox ab Version 140 und Safari ab 18.4 unterstützen sie teilweise, dort fehlt unter anderem die Unterstützung für cookiechange im Service Worker bzw. für registration.cookies. Vorher immer mit 'cookieStore' in self prüfen, ob die API vorhanden ist.
Die API gibt es nur in sicheren Kontexten (HTTPS oder localhost).
Cookies mit HttpOnly lassen sich weder lesen noch überschreiben. Für Authentifizierungs-Token ist das so gewollt und schützt vor XSS. Sensible Token sollten deshalb nicht per cookieStore.set() ohne HttpOnly abgelegt werden.
Der Service Worker sieht nur Cookies innerhalb seines Scopes. Ein Worker mit Scope /app/ sieht keine Cookies mit path=/admin.
Das Ereignis cookiechange kommt im Service Worker nur an, wenn es vorher mit registration.cookies.subscribe() abonniert wurde. addEventListener allein reicht nicht.
Alle Methoden sind asynchron. Asynchrone Arbeit in Event-Handlern deshalb mit event.waitUntil() oder event.respondWith() absichern, damit der Worker nicht vorzeitig beendet wird.

Siehe auch

Document.cookie ServiceWorkerGlobalScope.clients ServiceWorkerGlobalScope.serviceWorker ServiceWorkerGlobalScope.registration WorkerGlobalScope.navigator