Ta strona została przetłumaczona przez Cloud Translation API.

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.

Eiji Kitamura

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.

Określ, gdzie w Twojej witrynie jest używany SharedArrayBuffer

Począwszy od Chrome 92 funkcje korzystające z interfejsu SharedArrayBuffer nie będą już działać bez izolacji zasobów z innych domen. Jeśli ta strona została wyświetlona z powodu wiadomości o wycofaniu funkcji SharedArrayBuffer, prawdopodobnie Twoja witryna lub jeden z zasobów wbudowanych w niej używa funkcji SharedArrayBuffer. Aby upewnić się, że wycofanie się nie spowoduje żadnych problemów w Twojej witrynie, najpierw określ, gdzie jest używana.

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.

Otwórz Narzędzia deweloperskie w Chrome na stronie, która może używać SharedArrayBuffer.
Kliknij panel Konsola.

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

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.

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ą.
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"}]}
```
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.

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.
Należy skonfigurować raportowanie oraz serwer WWW, aby odbierać i zapisywać raporty.
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.

Uwaga: włączenie izolacji między domenami spowoduje zablokowanie ładowania zasobów z innych domen, których nie włączysz wyraźnie, oraz uniemożliwi dokumentowi najwyższego poziomu komunikowanie się z oknami wyskakującymi. Szukamy sposobów na wdrażanie Cross-Origin-Resource-Policy na dużą skalę, ponieważ izolacja zasobów z innych domen wymaga, aby wszystkie zasoby podrzędne były wyraźnie włączone. Wpadliśmy na pomysł innego kierunku: nowego trybu bez danych logowania na potrzeby COEP, który umożliwi ładowanie zasobów bez nagłówka CORP przez usunięcie wszystkich danych uwierzytelniających. Mamy nadzieję, że ułatwi to dbanie o to, aby zasoby podrzędne wysyłały nagłówek Cross-Origin-Resource-Policy. Chociaż tryb credentialless jest dostępny w Chrome od wersji 96, nie jest jeszcze obsługiwany przez inne przeglądarki. Może to utrudniać niektórym deweloperom wdrażanie COOP lub COEP na tym etapie. Wiadomo też, że nagłówek Cross-Origin-Opener-Policy: same-origin powoduje przerwanie integracji, które wymagają interakcji z oknami z innych domen, takich jak OAuth czy płatności. Aby rozwiązać ten problem, rozważamy złagodzenie warunku, aby umożliwić izolację zasobów z różnych domen do Cross-Origin-Opener-Policy: same-origin-allow-popups. W ten sposób będzie możliwe komunikowanie się z oknem otwartym samodzielnie. Jeśli chcesz włączyć izolację między domenami, ale napotykasz te problemy, zalecamy zarejestrowanie się w programie testów wersji próbnej i odczekanie, aż nowe tryby staną się dostępne. Nie planujemy kończyć okresu próbnego wersji oryginalnej, dopóki te nowe tryby nie będą dostępne.

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:

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.
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.
Jeśli chcesz korzystać z zaawansowanych funkcji, takich jak SharedArrayBuffer, w załadowanym iframe, dodaj allow="cross-origin-isolated" do <iframe>.
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.
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).
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:

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.
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.
Aby sprawdzić, czy strona jest odizolowana między domenami, sprawdź, czy w konsoli self.crossOriginIsolated zwraca wartość true.

Włączenie izolacji zasobów z innych domen na serwerze lokalnym może być kłopotliwe, ponieważ proste serwery nie obsługują wysyłania nagłówków. Aby włączyć SharedArrayBuffer bez włączania izolowania zasobów z innych domen, możesz uruchomić Chrome z flagą wiersza poleceń --enable-features=SharedArrayBuffer. Dowiedz się, jak uruchomić Chrome za pomocą parametru wiersza poleceń na odpowiednich platformach.