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

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

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

Eiji Kitamura

Z tego przewodnika dowiesz się, jak włączyć izolację między domenami. 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ę między domenami, sprawdź, jaki wpływ będzie to miało na inne zasoby z innych domen w Twojej witrynie, np. na miejsca docelowe reklam.

Ustalanie, w którym miejscu witryny jest używany obiekt SharedArrayBuffer

Od wersji 92 Chrome funkcje korzystające z elementu SharedArrayBuffer nie będą działać bez izolowania 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 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 wiesz już, gdzie używasz SharedArrayBuffer, przejdź do sekcji Analiza wpływu izolacji między domenami.

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, wyświetli 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 ramach witryny, postępuj zgodnie z instrukcjami poniżej, aby włączyć izolację między domenami.

Ostrzeżenie w Konsoli DevTools, gdy obiekt SharedArrayBuffer jest używany 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żywając adresu URL, ustaw 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? Nagłówki HTTP Cross-Origin-Opener-Policy-Report-Only i Cross-Origin-Embedder-Policy-Report-Only umożliwiają właśnie to.

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.
Skonfiguruj raportowanie i skonfiguruj serwer WWW, aby otrzymywać 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ł, aby pójść w przeciwnym kierunku: nowy tryb COEP „bez poświadczeń”, który umożliwia wczytywanie zasobów bez nagłówka CORP, usuwając wszystkie ich poświadczenia. Mamy nadzieję, że ułatwi Ci to sprawdzanie, czy zasoby podrzędne wysyłają 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. Dzięki temu będzie można komunikować 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.

Ograniczanie wpływu izolacji między domenami

Po określeniu zasobów, na które ma wpływać izolacja między domenami, zapoznaj się z tymi ogólnymi wytycznymi dotyczącymi włączania 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 wczytane w elementach iframe lub w skryptach workera zawierają inną warstwę elementów iframe lub skryptów workera, przed kontynuowaniem zastosuj rekurencyjnie czynności 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).
Upewnij się, że nie ma wyskakujących okienek z innych witryn, które wymagają komunikacji za pomocą 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 odizolowany między domenami, lub użyć innej metody komunikacji (np. żądań HTTP).

Włącz izolację między domenami

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ą. Spowoduje to zablokowanie komunikacji między dokumentem najwyższego poziomu a jego oknami.
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 w wybraniu.
Aby sprawdzić, czy strona jest odizolowana między domenami, sprawdź, czy w konsoli self.crossOriginIsolated zwraca wartość true.

Włączenie izolacji między domenami na serwerze lokalnym może być uciążliwe, 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.