Dostęp asynchroniczny do plików cookie HTTP

Victor Costan
X GitHub

Czym jest interfejs Cookie Store API?

Cookie Store API udostępnia pliki cookie HTTP mechanizmom Service Worker oraz oferuje asynchroniczną alternatywę dla document.cookie. Dzięki interfejsowi API możesz łatwiej:

  • Unikaj zagłębiania się w główny wątek dzięki asynchronicznemu dostępowi do plików cookie.
  • Unikaj odpytywania o pliki cookie, ponieważ można obserwować zmiany w plikach cookie.
  • Dostęp do plików cookie wywoływanych przez mechanizmy Service Worker.

Przeczytaj wyjaśnienie

Obecny stan,

Krok Stan
1. Utwórz wyjaśnienie Zakończono
2. Utwórz początkową wersję roboczą specyfikacji Zakończono
**3. Zbieraj opinie iterację zgodnie ze specyfikacją** **W toku**
4. Wersja próbna origin Wstrzymana
5. Uruchom Nie rozpoczęto

Jak używać asynchronicznego magazynu plików cookie?

Włącz testowanie origin

Aby przetestować ten interfejs lokalnie, włącz interfejs API w wierszu poleceń:

chrome --enable-blink-features=CookieStore

Przekazywanie tej flagi w wierszu poleceń powoduje włączenie interfejsu API globalnie w Chrome na w bieżącej sesji.

Możesz też włączyć #enable-experimental-web-platform-features flaga w języku: chrome://flags.

Prawdopodobnie nie potrzebujesz plików cookie

Przed przejściem do nowego interfejsu API chcę podkreślić, że pliki cookie nadal są używane najmniejszych podstawowych funkcji do przechowywania danych po stronie klienta, dlatego należy go nadal używać w ostateczności. To nie jest przypadek – pliki cookie były pierwszymi po stronie klienta w internecie i od tego czasu wiele się nauczyliśmy.

Oto główne powody, dla których należy unikać plików cookie:

  • Pliki cookie wprowadzają schemat pamięci masowej do interfejsu API backendu. Każde żądanie HTTP zawiera zrzut dysku z plikami cookie. Ułatwia to przez inżynierów zaplecza do wprowadzenia zależności od obecnego formatu plików cookie. Jednorazowo W takiej sytuacji interfejs użytkownika nie może zmienić schematu pamięci masowej bez wdrożenia pasującą zmianę w backendzie.

  • Pliki cookie mają złożony model zabezpieczeń. Funkcje nowoczesnych platform internetowych są zgodne z tymi samymi zasadami dotyczącymi źródła, co oznacza, że każda aplikacja otrzymuje własną piaskownicę i jest całkowicie niezależna od inne aplikacje użytkownika. Zakresy plików cookie tworzyć znacznie bardziej złożoną historię o bezpieczeństwie, a próbując po prostu który podwoiłby rozmiar tego artykułu.

  • Pliki cookie wiążą się z wysokimi kosztami wydajności. Przeglądarki muszą dołączyć zrzut plików cookie w każdym żądaniu HTTP, więc każda zmiana w tych plikach i rozpowszechniane w stosach sieciowych i na dane w pamięci masowej. Nowoczesne przeglądarki z pamięcią masową, ale nigdy nie uda nam się są tak samo skuteczne jak inne mechanizmy ich przechowywania, do stosu sieciowego.

Ze wszystkich powyższych powodów nowoczesne aplikacje internetowe powinny unikać plików cookie i zapisze identyfikator sesji w IndexedDB oraz wyraźnie dodać identyfikator do nagłówka lub treści konkretnych żądań HTTP, za pomocą interfejsu API fetch.

Nadal czytasz ten artykuł, ponieważ masz dobre dlaczego warto używać plików cookie...

Klasyczny document.cookie Interfejs API jest niezawodnym źródłem zakłóceń w działaniu aplikacji. Przykład: za każdym razem, gdy używasz metody pobierania document.cookie, przeglądarka musi zatrzymać wykonywanie JavaScript do momentu uzyskania żądanych informacji o plikach cookie. Może to potrwać lub odczyty z dysku, co powoduje zakłócenie działania interfejsu użytkownika.

Prostym rozwiązaniem tego problemu jest przełączenie się z document.cookie do asynchronicznego interfejsu Cookie Store API.

await cookieStore.get('session_id');

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

W podobny sposób można zastąpić metodę ustawiającą document.cookie. Pamiętaj że zmiana zostanie zastosowana dopiero po zwróceniu funkcji cookieStore.set rozwiązuje problem.

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

// undefined

Obserwuj, nie sonduj

Popularna aplikacja do uzyskiwania dostępu do plików cookie z JavaScriptu wykrywa, kiedy użytkownik wyloguje się i zaktualizuje interfejs. Obecnie odbywa się to w ramach ankiet document.cookie, który wprowadza zacinanie i ma negatywny wpływ na baterię. życia.

Interfejs Cookie Store API stanowi alternatywną metodę obserwowania plików cookie które nie wymagają ankiet.

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);
  }
});

Skrypty usługi powitalnej

Ze względu na konstrukcję synchroniczną interfejs API document.cookie nie został utworzony dostępne dla skrypty service worker. Interfejs Cookie Store API jest asynchroniczny i dlatego jest dozwolony w usłudze pracowników.

Obsługa plików cookie działa tak samo w kontekście dokumentu i w mechanizmy Service Worker.

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

Obserwacja zmian w plikach cookie wygląda jednak nieco inaczej w przypadku mechanizmów Service Worker. Pobudka może być dość kosztowne, więc musimy zmian w pliku cookie, którymi interesuje się instancja robocza.

Poniższy przykład pokazuje aplikację, która używa IndexedDB do buforowania danych użytkownika. monitoruje zmiany w pliku cookie sesji i odrzuca dane z pamięci podręcznej, gdy wylogowuje się użytkowników.

// 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;
    }
  }
});

Sprawdzone metody

Już wkrótce.

Prześlij opinię

Jeśli wypróbujesz ten interfejs API, daj nam znać, co o nim myślisz! Proszę kierować opinii na temat kształtu interfejsu API repozytorium specyfikacji, i zgłaszaj błędy implementacji do Blink>Storage>CookiesAPI. Komponent Miganie.

Interesują nas przede wszystkim pomiary skuteczności poza tymi podanymi w objaśnieniu.

Dodatkowe materiały