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

Izolacja od zasobów z innych domen umożliwia stronie internetowej korzystanie z zaawansowanych funkcji, takich jak zasób SharedSlateBuffer. 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. Izolacja od zasobów z innych domen jest wymagana, jeśli chcesz używać SharedArrayBuffer, performance.measureUserAgentSpecificMemory() lub licznika czasu w wysokiej rozdzielczości z większą precyzją.

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

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

Od wersji Chrome 92 funkcje korzystające z SharedArrayBuffer nie będą już działać bez izolacji od zasobów z innych domen. Jeśli trafiłeś na tę stronę z powodu komunikatu o wycofaniu SharedArrayBuffer, prawdopodobnie Twoja witryna lub jeden z umieszczonych na niej zasobów używa SharedArrayBuffer. Aby mieć pewność, że w witrynie nie pojawią się żadne błędy, zacznij od określenia, gdzie jest on używany.

Cel:

• Aby nadal używać SharedArrayBuffer, włącz izolację zasobów z innych domen.
• Jeśli używasz kodu innej firmy, który używa SharedArrayBuffer, powiadom zewnętrznego dostawcę o podjęciu odpowiednich działań.

Jeśli nie masz pewności, w którym miejscu Twojej witryny został użyty element 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 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órej prawdopodobnie używasz SharedArrayBuffer.
2. Wybierz panel Konsola.
3. Jeśli strona korzysta z tagu 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 problem dotyczy biblioteki zewnętrznej, skontaktuj się z deweloperem. Jeśli jest zaimplementowany w witrynie, postępuj zgodnie z instrukcjami poniżej, aby włączyć izolację zasobów z innych domen.

Ostrzeżenie konsoli DevToools, gdy używany jest obiekt SharedSlateBuffer bez izolacji zasobów z innych domen.

(Zaawansowane) Korzystanie z raportów o wycofaniu

Niektóre przeglądarki mają funkcję raportowania obejmującą wycofywanie interfejsów API w określonym punkcie końcowym.

1. Skonfiguruj serwer raportów o wycofaniu i uzyskaj adres URL do raportowania. Możesz to osiągnąć, korzystając z usługi publicznej lub tworząc ją samodzielnie.
2. Za pomocą tego adresu URL ustaw ten nagłówek HTTP na stronach, które mogą wyświetlać reklamy SharedArrayBuffer.

   Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
   

3. Gdy nagłówek zacznie się rozpowszechniać, punkt końcowy, w którym został zarejestrowany, powinien zacząć zbierać raporty o wycofaniu.

Zobacz przykładową implementację: https://cross-origin-isolation.glitch.me.

Analizowanie wpływu izolacji zasobów z innych domen

Czy nie lepiej byłoby ocenić wpływ, jaki na Twoją witrynę będzie miało izolowanie zasobów z innych domen, nie powodując w ten sposób niczego zepsującego? Do tego służą 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-origin w dokumencie najwyższego poziomu. Jak sama nazwa wskazuje, ten nagłówek wysyła tylko raporty o wpływie, jaki COOP: same-origin może mieć na Twoją witrynę – nie wyłącza w rzeczywistości komunikacji z wyskakującymi okienkami.
2. Skonfigurowanie raportowania i skonfigurowanie serwera WWW do odbierania i zapisywania raportów.
3. Ustaw Cross-Origin-Embedder-Policy-Report-Only: require-corp w dokumencie najwyższego poziomu. Przypominamy, że ten nagłówek pozwala sprawdzić wpływ włączenia COEP: require-corp bez wywierania rzeczywistego wpływu na działanie witryny. Możesz skonfigurować ten nagłówek tak, aby wysyłał raporty do tego samego serwera raportowania, który został skonfigurowany w poprzednim kroku.

Uwaga: możesz też włączyć kolumnę Domena w panelu Sieć w Narzędziach deweloperskich w Chrome, aby uzyskać ogólny wgląd w zasoby, których to dotyczy.

Uwaga: włączenie izolacji zasobów z innych domen zablokuje wczytywanie zasobów z innych domen, w przypadku których nie wyrazisz zgody, i uniemożliwi dokumentowi najwyższego poziomu komunikację z wyskakującymi okienkami. Badamy sposoby wdrażania Cross-Origin-Resource-Policy na dużą skalę, ponieważ izolacja zasobów z innych domen wymaga wyraźnej akceptacji we wszystkich zasobach podrzędnych. Wpadliśmy na pomysł, by pójść w przeciwnym kierunku: nowy tryb bez danych logowania COEP, który umożliwia ładowanie zasobów bez nagłówka CORP przez usunięcie wszystkich ich danych logowania. Mamy nadzieję, że ułatwi Ci to sprawdzanie, czy zasoby podrzędne wysyłają nagłówek Cross-Origin-Resource-Policy. Tryb credentialless jest dostępny w Chrome od wersji 96, ale nie jest jeszcze obsługiwany przez żadne inne przeglądarki, przez co niektórzy programiści mogą mieć trudności z wdrożeniem COOP lub COEP na tym etapie. Wiadomo, że nagłówek Cross-Origin-Opener-Policy: same-origin zakłóca integracje, które wymagają interakcji między domenami, np. OAuth i płatności. Aby rozwiązać ten problem, badamy złagodzenie warunku w celu włączenia izolacji zasobów z innych domen w Cross-Origin-Opener-Policy: same-origin-allow-popups. W ten sposób będzie możliwa komunikacja z otwartym oknem. Jeśli chcesz włączyć izolację zasobów z innych domen, ale wyzwania są zablokowane, zalecamy zarejestrowanie się w programie testowania origin i zaczekanie, aż nowe tryby staną się dostępne. Nie planujemy zakończyć okresu próbnego origin, dopóki nie udostępnimy tych nowych trybów.

Ograniczanie wpływu izolacji zasobów z innych domen

Gdy ustalisz, których zasobów dotyczy izolacja z innych domen, zapoznaj się z ogólnymi wytycznymi dotyczącymi udostępniania tych zasobów:

1. W przypadku zasobów z innych domen, takich jak obrazy, skrypty, arkusze stylów, elementy iframe itp., ustaw nagłówek Cross-Origin-Resource-Policy: cross-origin. W zasobach z tej samej witryny ustaw nagłówek Cross-Origin-Resource-Policy: same-site.
2. Aby zasoby możliwe do wczytania za pomocą CORS, upewnij się, że są one włączone, ustawiając atrybut crossorigin w tagu HTML (np. <img src="example.jpg" crossorigin>). W przypadku żądania pobierania JavaScriptu wartość request.mode musi być ustawiona na cors.
3. Jeśli chcesz korzystać z zaawansowanych funkcji, takich jak SharedArrayBuffer, w załadowanym elemencie iframe, dołącz parametr allow="cross-origin-isolated" do tagu <iframe>.
4. Jeśli zasoby z innych domen wczytywane w elementach iframe lub skryptach instancji roboczych wymagają dodatkowej warstwy elementów iframe lub skryptów instancji roboczych, zanim przejdziesz dalej, rekurencyjnie zastosuj czynności opisane w tej sekcji.
5. Gdy potwierdzisz, że wszystkie zasoby z innych domen są włączone, ustaw nagłówek Cross-Origin-Embedder-Policy: require-corp w elementach iframe i skryptach instancji roboczych (jest to wymagane niezależnie od pochodzenia z tej samej domeny czy z innych domen).
6. Upewnij się, że nie ma żadnych wyskakujących okienek z innych domen, które wymagają komunikacji przez postMessage(). Po włączeniu izolacji zasobów z innych domen nie można ich utrzymać. Komunikację można przenieść do innego dokumentu, który nie jest izolowany od zasobów z innych domen, lub użyć innej metody komunikacji (na przykład żądań HTTP).

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

Gdy rozwiążesz problem za pomocą izolacji zasobów z innych domen, postępuj zgodnie z tymi ogólnymi wskazówkami dotyczącymi włączania izolacji zasobów z innych domen:

1. Ustaw nagłówek Cross-Origin-Opener-Policy: same-origin w dokumencie najwyższego poziomu. Jeśli masz ustawiony Cross-Origin-Opener-Policy-Report-Only: same-origin, zastąp go. Spowoduje to zablokowanie komunikacji 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 ustawiony Cross-Origin-Embedder-Policy-Report-Only: require-corp, zastąp go. Spowoduje to zablokowanie wczytywania zasobów z innych domen, które nie zostały uwzględnione.
3. Sprawdź, czy self.crossOriginIsolated zwraca w konsoli parametr true, aby sprawdzić, czy strona jest izolowana od zasobów z innych domen.

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

Zasoby

• Odizolowanie witryny od zasobów z innych domen przy użyciu strategii COOP i COEP
• Aktualizacje obiektu SharedSlateBuffer w Chrome 88 na Androidzie i w przeglądarce Chrome na komputery 92