Przewodnik po włączeniu izolacji zasobów z innych domen

Izolacja zasobów z innych domen umożliwia stronie internetowej korzystanie z zaawansowanych funkcji, takich jak SharedTrackBuffer. Z tego artykułu dowiesz się, jak włączyć w witrynie izolację od zasobów z innych domen.

Z tego przewodnika dowiesz się, jak włączyć izolację zasobów z innych domen. Jeśli chcesz używać funkcji SharedArrayBuffer, performance.measureUserAgentSpecificMemory() lub timera o wysokiej rozdzielczości z lepszą dokładnością, wymagana jest izolacja między domenami.

Jeśli chcesz włączyć izolację zasobów z innych domen, oceń, jaki to będzie miało wpływ na inne zasoby z różnych domen w Twojej witrynie, np. miejsca docelowe reklam.

Jeśli nie masz pewności, gdzie w witrynie jest używany tag SharedArrayBuffer, możesz to sprawdzić na 2 sposoby:

  • Korzystanie z Narzędzi deweloperskich w Chrome
  • (Zaawansowane) Korzystanie z raportów o wycofaniu

Jeśli już wiesz, gdzie używasz zasobu SharedArrayBuffer, przejdź do sekcji Analizowanie wpływu izolacji zasobów z innych domen.

Korzystanie z Narzędzi deweloperskich w Chrome

Narzędzia deweloperskie w Chrome umożliwiają deweloperom sprawdzanie stron internetowych.

  1. Otwórz Narzędzia deweloperskie w Chrome na stronie, która może używać SharedArrayBuffer.
  2. Kliknij panel Konsola.
  3. Jeśli strona używa SharedArrayBuffer, pojawi się ten komunikat:
    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
  4. Nazwa pliku i numer wiersza na końcu wiadomości (np. common-bundle.js:535) wskazują, skąd pochodzi SharedArrayBuffer. Jeśli jest to biblioteka innej firmy, skontaktuj się z jej deweloperem, aby rozwiązać problem. Jeśli jest ono zaimplementowane w Twojej witrynie, postępuj zgodnie z instrukcjami z poniższego przewodnika, aby włączyć izolację zasobów z innych domen.
Ostrzeżenie w Konsoli DevTools, gdy obiekt SharedArrayBuffer jest używany bez izolacji od zasobów z innych domen
Ostrzeżenie w konsoli DevToools w przypadku używania obiektu SharedTrackBuffer bez izolacji od zasobów z innych domen.

(Zaawansowane) Korzystanie z raportów o wycofaniu

Niektóre przeglądarki mają funkcję raportowania o wycofaniu interfejsów API do określonego punktu końcowego.

  1. Skonfiguruj serwer raportów o wycofaniu i uzyskaj adres URL raportowania Możesz to zrobić, korzystając z usługi publicznej lub tworząc własną.
  2. Użyj adresu URL, aby ustawić ten nagłówek HTTP na stronach, które mogą wyświetlać SharedArrayBuffer.
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. Gdy nagłówek zacznie się rozprzestrzeniać, zarejestrowany punkt końcowy powinien zacząć zbierać raporty o wycofywaniu.

Przykładową implementację znajdziesz tutaj: https://cross-origin-isolation.glitch.me.

Analiza wpływu izolacji między domenami

Czy nie byłoby świetnie, gdyby można było ocenić wpływ włączenia izolacji między domenami na witrynę bez konieczności wprowadzania zmian? Pomogą Ci w tym nagłówki HTTP Cross-Origin-Opener-Policy-Report-Only i Cross-Origin-Embedder-Policy-Report-Only.

  1. Ustaw Cross-Origin-Opener-Policy-Report-Only: same-originw dokumencie najwyższego poziomu. Jak wskazuje nazwa, ten nagłówek wysyła tylko raporty o tym, jaki wpływ COOP: same-origin miałby na Twoją witrynę. Nie wyłącza on komunikacji z oknami wyskakującymi.
  2. Należy skonfigurować raportowanie oraz serwer WWW, aby odbierać i zapisywać raporty.
  3. Ustaw Cross-Origin-Embedder-Policy-Report-Only: require-corpw dokumencie najwyższego poziomu. Ten nagłówek pozwala sprawdzić wpływ włączenia COEP: require-corp bez wpływania na działanie witryny. Możesz skonfigurować ten nagłówek, aby wysyłać raporty na ten sam serwer raportowania, który został skonfigurowany w poprzednim kroku.

Minimalizowanie wpływu izolacji zasobów z innych domen

Gdy ustalisz, które zasoby będą podlegać izolacji zasobów z innych domen, oto ogólne wskazówki dotyczące rzeczywistego zezwalania na korzystanie z tych zasobów:

  1. W przypadku zasobów między domenami, takich jak obrazy, skrypty, arkusze stylów, ramki iframe i inne, ustaw nagłówek Cross-Origin-Resource-Policy: cross-origin. W zasobach na tej samej stronie ustaw nagłówek Cross-Origin-Resource-Policy: same-site.
  2. W przypadku zasobów, które można wczytywać za pomocą CORS, upewnij się, że jest on włączony, ustawiając atrybut crossorigin w tagu HTML (np. <img src="example.jpg" crossorigin>). W przypadku żądania pobierania JavaScript upewnij się, że atrybut request.mode ma wartość cors.
  3. Jeśli chcesz korzystać z zaawansowanych funkcji, takich jak SharedArrayBuffer, w załadowanym iframe, dodaj allow="cross-origin-isolated" do <iframe>.
  4. Jeśli zasoby z innych domen wczytywane do elementów iframe lub skryptów instancji roboczych obejmują inną warstwę elementów iframe lub skrypty instancji roboczych, zanim przejdziesz dalej, rekurencyjnie zastosuj kroki opisane w tej sekcji.
  5. Gdy potwierdzisz, że wszystkie zasoby z wielu domen są włączone, ustaw nagłówek Cross-Origin-Embedder-Policy: require-corp w przypadku ramek iframe i skryptów workera (jest to wymagane niezależnie od tego, czy zasoby pochodzą z tej samej domeny, czy z wielu domen).
  6. Sprawdź, czy nie ma wyskakujących okienek z innych domen, które wymagają komunikacji za pomocą usługi postMessage(). Nie ma możliwości, aby te pliki działały, gdy włączona jest izolacja między domenami. Możesz przenieść komunikację do innego dokumentu, który nie jest wyizolowany od zasobów z innych domen, lub użyć innej metody komunikacji (np. żądań HTTP).

Włącz izolację zasobów z innych domen

Po zminimalizowaniu wpływu przez izolację zasobów z różnych domen możesz skorzystać z tych ogólnych wskazówek dotyczących włączania tej funkcji:

  1. Ustaw nagłówek Cross-Origin-Opener-Policy: same-origin w dokumencie najwyższego poziomu. Jeśli masz ustawioną wartość Cross-Origin-Opener-Policy-Report-Only: same-origin, zastąp ją. Blokuje to komunikację między dokumentem najwyższego poziomu a jego wyskakującymi okienkami.
  2. Ustaw nagłówek Cross-Origin-Embedder-Policy: require-corp w dokumencie najwyższego poziomu. Jeśli masz ustawioną wartość Cross-Origin-Embedder-Policy-Report-Only: require-corp, zastąp ją. Spowoduje to zablokowanie ładowania zasobów z innych źródeł, które nie zostały uwzględnione.
  3. Aby sprawdzić, czy strona jest odizolowana między domenami, sprawdź, czy w konsoli self.crossOriginIsolated zwraca wartość true.

Zasoby