Obsługa nagłówków HTTP w Storage Access API

Natalia Markoborodova
Natalia Markoborodova
X GitHub LinkedIn

Po pomyślnym eksperymencie z interfejsem API wprowadzamy w Chrome 133 nagłówki Storage Access Headers (SAH).

Czym są nagłówki dostępu do pamięci?

Nagłówki dostępu do pamięci to nowe nagłówki HTTP, które umożliwiają osadzonym treściom (np. widżetom mediów społecznościowych, kalendarzom, narzędziom interaktywnym i obrazom) sprawdzanie dostępu do niepodzielonych plików cookie. Wcześniej było to możliwe tylko w przypadku JavaScriptu. Nowy nagłówek żądania Sec-Fetch-Storage-Access i nagłówek odpowiedzi Activate-Storage-Access poprawiają wydajność i wygodę korzystania z witryn, które opierają się na treściach osadzonych, oraz obsługują wczytywanie zasobów innych niż ramki iframe. Szczegóły implementacji znajdziesz w dokumentacji.

Nagłówek żądania

  Sec-Fetch-Storage-Access: <access-status>

Gdy użytkownik odwiedza stronę, która zawiera treści z innych witryn, przeglądarka automatycznie umieszcza nagłówek Sec-Fetch-Storage-Access w żądaniach do innych witryn, które mogą wymagać danych logowania (np. plików cookie). Ten nagłówek wskazuje stan uprawnień do dostępu do plików cookie w przypadku osadzenia i może przyjmować te wartości:

  • none: element nie ma uprawnienia storage-access, a tym samym nie ma dostępu do niepodzielonych plików cookie.

  • inactive: osadzony element ma uprawnienie storage-access, ale nie zdecydował się na jego użycie w bieżącym kontekście. Umieszczony element nie ma dostępu do niepodzielonych plików cookie.

  • active: element umieszczony ma niepodzielony dostęp do plików cookie. Ta wartość będzie uwzględniana w przypadku wszystkich żądań pochodzących z innych domen, które mają dostęp do niepodzielonych plików cookie.

Nagłówki odpowiedzi

  Activate-Storage-Access: <retry-or-load>

Nagłówek Activate-Storage-Access informuje przeglądarkę, czy ma ponowić próbę wysłania żądania z plikami cookie, czy wczytać zasób bezpośrednio z aktywnym interfejsem Storage Access API (SAA). Nagłówek może mieć te wartości:

  • load: nakazuje przeglądarce przyznanie osadzającemu dostęp do niepodzielonych plików cookie w przypadku żądanego zasobu. Dodanie tego nagłówka jest równoznaczne z wywołaniem document.requestStorageAccess(), jeśli przyznano storage-access uprawnienie. Użytkownikowi nie będzie wyświetlana żadna dodatkowa prośba.

  • retry: Serwer odpowiada, że przeglądarka powinna aktywować uprawnienia dostępu do pamięci, a następnie ponowić żądanie.

  Activate-Storage-Access: retry; allowed-origin="https://site.example"
  Activate-Storage-Access: retry; allowed-origin=*
  Activate-Storage-Access: load

Najważniejsze zalety

Nagłówki dostępu do pamięci to zalecany, wydajniejszy sposób korzystania z interfejsu Storage Access API (SAA). Ta zmiana przynosi kilka ulepszeń:

  • Obsługa osadzania w elementach innych niż iframe: umożliwia korzystanie z SAA w przypadku większej liczby zasobów.
  • Mniejsze wykorzystanie sieci: mniej żądań i mniejsze rozmiary danych.
  • Mniejsze wykorzystanie procesora: mniejsze przetwarzanie JavaScriptu.
  • Lepsze wrażenia użytkownika: eliminuje uciążliwe wczytywanie pośrednie.

Aktualizowanie rozwiązania

W przypadku funkcji Nagłówki dostępu do pamięci występują 2 sytuacje, w których możesz chcieć zaktualizować kod:

  • Używasz SAA i chcesz osiągać lepsze wyniki dzięki logice nagłówka w przypadku kolejnych żądań storage-access.
  • Masz weryfikację lub logikę, która zależy od tego, czy nagłówek Origin jest uwzględniony w żądaniu wysyłanym do serwera.

Aby dowiedzieć się, jak używać nagłówków Storage Access Headers w swoim rozwiązaniu, zapoznaj się z naszą dokumentacją.

Angażowanie się i przesyłanie opinii

Jeśli masz uwagi lub napotkasz problemy, możesz zgłosić problem. Więcej informacji o nagłówkach dostępu do pamięci znajdziesz w wyjaśnieniu na GitHubie.