Ustawienie witryny jako „odizolowanej od innych domen” za pomocą COOP i COEP

Użyj COOP i COEP, aby skonfigurować środowisko izolowane od zasobów z innych domen i włączyć zaawansowane funkcje, takie jak SharedArrayBuffer, performance.measureUserAgentSpecificMemory() i timer o wysokiej rozdzielczości z większą precyzją.

Eiji Kitamura

Opublikowano: 13 kwietnia 2020 r., ostatnia aktualizacja: 21 czerwca 2022 r.

Ostrzeżenie: SharedArrayBuffer od Chrome 92 w wersji Chrome na komputery funkcja wymaga izolacji od zasobów z innych domen. Więcej informacji znajdziesz w artykule dotyczącym aktualizowania obiektów SharedArrayBuffer.

Z tego dokumentu dowiesz się, jak używać COOP i COEP. Więcej informacji o tym, dlaczego jest to ważne, znajdziesz w artykule Izolowanie witryny od zasobów z innych domen za pomocą COOP i COEP.

Niektóre interfejsy API zwiększają ryzyko ataków typu side-channel, takich jak Spectre. Aby zmniejszyć to ryzyko, przeglądarki oferują środowisko izolowane oparte na zasadzie rezygnacji, zwane izolacją od zasobów z innych domen. W stanie izolacji od zasobów z innych domen strona internetowa będzie mogła korzystać z funkcji uprzywilejowanych, takich jak:

Funkcje, które będą dostępne w stanie izolacji od zasobów z innych domen.

Interfejs API	Opis
SharedArrayBuffer	Wymagany w przypadku wątków WebAssembly. Jest dostępny w Chrome na Androida w wersji 88. Wersja na komputery jest domyślnie włączona dzięki pomocy izolacji witryn, ale będzie wymagać stanu izolacji od zasobów z innych domen i będzie domyślnie wyłączona w Chrome 92.
performance.measureUserAgentSpecificMemory()	Dostępne w Chrome 89.
performance.now(), performance.timeOrigin	Dostępne w wielu przeglądarkach, z rozdzielczością ograniczoną do 100 mikrosekund lub większą. W przypadku izolacji od zasobów z innych domen, rozdzielczość może wynosić 5 mikrosekund lub więcej.

Stan izolacji od zasobów z innych domen uniemożliwia też modyfikowanie document.domain. (Możliwość zmiany document.domain umożliwia komunikację między dokumentami z tej samej witryny i była uważana za lukę w zasadach dotyczących tej samej domeny).

Aby włączyć stan izolacji od zasobów z innych domen, musisz wysłać te nagłówki HTTP w głównym dokumencie:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Te nagłówki instruują przeglądarkę, aby blokowała wczytywanie zasobów lub elementów iframe, które nie zostały wczytane przez dokumenty z innych domen, oraz uniemożliwiały oknom z innych domen bezpośrednią interakcję z Twoim dokumentem. Oznacza to również, że wczytywanie tych zasobów ze współdzielonych domen wymaga zgody.

Możesz sprawdzić, czy strona internetowa jest w stanie izolacji od zasobów z innych domen, sprawdzając examining self.crossOriginIsolated.

Uwaga: ten dokument jest przeznaczony dla osób, które chcą przygotować swoje witryny do korzystania z funkcji SharedArrayBuffer, wątków WebAssembly, performance.measureUserAgentSpecificMemory() lub timera o wysokiej rozdzielczości z większą precyzją w bardziej niezawodny sposób na różnych platformach przeglądarek.

Słowniczek

W tym dokumencie używamy wielu terminów o podobnych nazwach i skrótach. Aby uniknąć nieporozumień, przygotowaliśmy mini słowniczek:

• COEP: zasady umieszczania zasobów z innych domen
• COOP: zasada dotycząca otwierającego z innej domeny
• CORP: zasady dotyczące zasobów z innych domen
• CORS: współdzielenie zasobów pomiędzy serwerami z różnych domen
• CORB: blokowanie odczytu zasobów z innych domen

Izolowanie witryny od zasobów z innych domen

**Wskazówka:** dowiedz się, jak włączyć izolację od zasobów z innych domen.

1. Ustaw Cross-Origin-Opener-Policy: same-origin w dokumencie najwyższego poziomu

Gdy włączysz COOP: same-origin w dokumencie najwyższego poziomu, okna z tego samego źródła i okna otwarte z dokumentu będą miały oddzielną grupę kontekstu przeglądania, chyba że znajdują się w tym samym źródle z tym samym ustawieniem COOP. W ten sposób izolacja jest wymuszana w przypadku otwartych okien, a wzajemna komunikacja między nimi jest wyłączona.

Grupa kontekstu przeglądania to zestaw okien, które mogą się wzajemnie odwoływać. Na przykład dokument najwyższego poziomu i jego dokumenty podrzędne umieszczone za pomocą elementu <iframe>. Jeśli witryna (https://a.example) otworzy okno dialogowe (https://b.example), okno otwierające i okno dialogowe będą współdzielić ten sam kontekst przeglądania, dlatego będą miały do siebie dostęp za pomocą interfejsów DOM API, takich jak window.opener.

Możesz sprawdzić, czy okno otwierające i jego okno otwarte znajdują się w oddzielnych grupach kontekstu przeglądania za pomocą Narzędzi deweloperskich.

2. Włącz CORP lub CORS w zasobach

Upewnij się, że wszystkie zasoby na stronie są wczytywane z nagłówkami HTTP CORP lub CORS. Ten krok jest wymagany w przypadku kroku 4, czyli włączenia COEP.

W zależności od charakteru zasobu musisz wykonać te czynności:

• Jeśli zasób ma być wczytywany tylko z tego samego źródła, ustaw nagłówek Cross-Origin-Resource-Policy: same-origin.
• Jeśli zasób ma być wczytywany tylko z tej samej witryny, ale z innego źródła, ustaw nagłówek Cross-Origin-Resource-Policy: same-site.
• Jeśli zasób jest wczytywany z innych źródeł, które kontrolujesz, ustaw nagłówek Cross-Origin-Resource-Policy: cross-origin, jeśli to możliwe.
• W przypadku zasobów z innych domen, nad którymi nie masz kontroli:
  • Jeśli zasób jest obsługiwany za pomocą CORS, użyj atrybutu crossorigin w tagu HTML wczytywania. (Na przykład <img src="***" crossorigin>).
  • Poproś właściciela zasobu o obsługę CORS lub CORP.
• W przypadku elementów iframe postępuj zgodnie z tymi samymi zasadami i ustaw Cross-Origin-Resource-Policy: cross-origin (lub same-site, same-origin w zależności od kontekstu).
• Skrypty wczytywane za pomocą WebWorker muszą być obsługiwane z tego samego źródła, więc nie potrzebujesz nagłówków CORP ani CORS.
• W przypadku dokumentu lub skryptu roboczego obsługiwanego za pomocą COEP: require-corp podzasoby współdzielenia wczytywane bez CORS muszą ustawić nagłówek Cross-Origin-Resource-Policy: cross-origin, aby można je było umieścić. Dotyczy to na przykład elementów <script>, importScripts, <link>, <video>, <iframe> itp.

Kluczowy termin: ta sama witryna to witryny, które mają ten sam schemat i ten sam eTLD+1. To samo źródło to witryny, które mają tę samą kombinację schematu, nazwy hosta i portu. Dowiedz się więcej o różnicach między tą samą witryną a tym samym źródłem.

Izolacja w elementach iframe

Możesz włączyć izolację od zasobów z innych domen w dokumencie umieszczonym w elemencie iframe, stosując zasadę uprawnień allow="cross-origin-isolated" do tagu <iframe> i spełniając te warunki. Cały łańcuch dokumentów, w tym ramki nadrzędne i podrzędne, musi być również izolowany od zasobów z innych domen.

3. Użyj nagłówka HTTP COEP Report-Only, aby ocenić umieszczone zasoby

Zanim w pełni włączysz COEP, możesz przeprowadzić uruchomienie próbne, używając nagłówka Cross-Origin-Embedder-Policy-Report-Only, aby sprawdzić, czy zasada rzeczywiście działa. Będziesz otrzymywać raporty bez blokowania umieszczonych treści.

Zastosuj to rekurencyjnie do wszystkich dokumentów, w tym do dokumentu najwyższego poziomu, elementów iframe i skryptów roboczych. Więcej informacji o nagłówku HTTP Report-Only znajdziesz w artykule Obserwowanie problemów za pomocą interfejsu Reporting API.

4. Włącz COEP

Ten krok można wykonać dopiero po upewnieniu się, że w zasobach włączono CORP lub CORS.

Gdy potwierdzisz, że wszystko działa i wszystkie zasoby można wczytać, zmień Cross-Origin-Embedder-Policy-Report-Only nagłówek na Cross-Origin-Embedder-Policy nagłówek z tą samą wartością we wszystkich dokumentach, w tym w tych, które są umieszczone za pomocą elementów iframe i skryptów roboczych.

Uwaga: Squoosh, progresywna aplikacja internetowa do optymalizacji obrazów, używa COOP / COEP aby uzyskać dostęp do wątków Wasm (i Shared Array Buffer) w Chrome na Androida.

Ostrzeżenie: sprawdzamy, jak wdrożyć Cross-Origin-Resource-Policy na dużą skalę, ponieważ izolacja od zasobów z innych domen wymaga, aby wszystkie podzasoby wyraźnie się na nią zgodziły. Jedną z opcji jest tryb COEP bez danych logowania, który umożliwia wczytywanie zasobów bez nagłówka CORP przez usunięcie wszystkich danych logowania. Tryb bez danych logowania jest dostępny w Chrome 96 i Edge, ale nie jest jeszcze obsługiwany przez inne przeglądarki.

Sprawdzanie, czy izolacja się powiodła

Gdy strona internetowa jest w stanie izolacji od zasobów z innych domen, a wszystkie zasoby i okna są izolowane w tej samej grupie kontekstu przeglądania, właściwość self.crossOriginIsolated zwraca wartość true. Za pomocą tego interfejsu API możesz sprawdzić, czy udało Ci się odizolować grupę kontekstu przeglądania i uzyskać dostęp do funkcji takich jak performance.measureUserAgentSpecificMemory().

Debugowanie problemów

Możesz napotkać problemy z COOP i COEP. Do debugowania możesz użyć narzędzi dla programistów w przeglądarce lub interfejsu Reporting API.

Debugowanie za pomocą Narzędzi deweloperskich w Chrome

W przypadku zasobów renderowanych na ekranie, takich jak obrazy, dość łatwo jest wykryć problemy z COEP, ponieważ żądanie jest blokowane, a strona powinna wskazywać brakujący obraz. Jednak w przypadku zasobów, które niekoniecznie mają wpływ wizualny, takich jak skrypty lub style, problemy z COEP mogą pozostać niezauważone. W takich przypadkach użyj panelu Sieć w Narzędziach deweloperskich.

Jeśli wystąpi problem z COEP, w kolumnie Stan powinna się pojawić wartość (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep).

Następnie możesz kliknąć wpis, aby wyświetlić więcej szczegółów.

Stan elementów iframe i okien dialogowych możesz też sprawdzić w panelu Aplikacja. Po lewej stronie otwórz sekcję „Ramki” i rozwiń „top”, aby zobaczyć strukturę zasobów.

Możesz sprawdzić stan elementu iframe, np. dostępność SharedArrayBuffer itp.

Możesz też sprawdzić stan okna dialogowego, np. czy jest ono izolowane od zasobów z innych domen.

Obserwowanie problemów za pomocą interfejsu Reporting API

Interfejs Reporting API to kolejny mechanizm, za pomocą którego możesz wykrywać różne problemy. Możesz skonfigurować interfejs Reporting API tak, aby przeglądarka użytkowników wysyłała raport, gdy COEP zablokuje wczytywanie zasobu lub COOP odizoluje okno dialogowe. Chrome obsługuje interfejs Reporting API od wersji 69 w różnych zastosowaniach, w tym w COEP i COOP.

Uwaga: czy używasz już interfejsu Reporting API z nagłówkiem Report-To? Chrome przechodzi na nową wersję interfejsu Reporting API, która zastępuje Report-To przez Reporting-Endpoints. Rozważ przejście na nową wersję. Więcej informacji znajdziesz w artykule Migracja do interfejsu Reporting API w wersji 1.

Dowiedz się, jak skonfigurować interfejs Reporting API i skonfigurować serwer do odbierania raportów.

Przykładowy raport COEP

Przykładowy ładunek raportu COEP, gdy zasób współdzielenia jest zablokowany, wygląda tak:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

Ostrzeżenie: blocked-url istnieje tylko na potrzeby zgodności wstecznej i zostanie usunięty.

Przykładowy raport COOP

Przykładowy ładunek raportu COOP , gdy okno dialogowe jest otwierane w izolacji, wygląda tak:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Gdy różne grupy kontekstu przeglądania próbują uzyskać do siebie dostęp (tylko w trybie „report-only”), COOP też wysyła raport. Na przykład raport, gdy zostanie podjęta próba użycia postMessage(), będzie wyglądał tak:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Wnioski

Użyj kombinacji nagłówków HTTP COOP i COEP, aby włączyć na stronie internetowej specjalny stan izolacji od zasobów z innych domen. Możesz sprawdzić, czy strona internetowa jest w stanie izolacji od zasobów z innych domen, sprawdzając self.crossOriginIsolated.

Będziemy aktualizować ten post w miarę udostępniania nowych funkcji w tym stanie izolacji od zasobów z innych domen oraz wprowadzania dalszych ulepszeń w Narzędziach deweloperskich w zakresie COOP i COEP.

Zasoby

• Dlaczego do korzystania z zaawansowanych funkcji potrzebujesz izolacji od zasobów z innych domen
• Przewodnik po włączaniu izolacji od zasobów z innych domen
• Monitorowanie łącznego wykorzystania pamięci przez stronę internetową za pomocą measureUserAgentSpecificMemory()

Aktualizacje dokumentu

• 21 czerwca 2022 r.: po włączeniu izolacji od zasobów z innych domen należy też zadbać o skrypty robocze. Dodaliśmy kilka wyjaśnień.
• 5 sierpnia 2021 r.: interfejs JS Self-Profiling API został wymieniony jako jeden z interfejsów API, które wymagają izolacji od zasobów z innych domen, ale w związku z niedawną zmianą kierunku, został usunięty.
• 6 maja 2021 r.: na podstawie opinii i zgłoszonych problemów zdecydowaliśmy się dostosować harmonogram ograniczenia użycia SharedArrayBuffer w witrynach nieizolowanych od zasobów z innych domen do Chrome M92.
• 16 kwietnia 2021 r.: dodaliśmy uwagi dotyczące trybu COEP bez danych logowania i COOP same-origin-allow-popups jako warunku izolacji od zasobów z innych domen.
• 5 marca 2021 r.: usunęliśmy ograniczenia dotyczące funkcji SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), i debugowania, które są teraz w pełni włączone w Chrome 89. Dodaliśmy nadchodzące funkcje performance.now() i performance.timeOrigin, które będą miały większą precyzję.
• 19 lutego 2021 r.: dodaliśmy uwagę dotyczącą zasady dotyczącej funkcji allow="cross-origin-isolated" i funkcji debugowania w Narzędziach deweloperskich.
• 15 października 2020 r.: self.crossOriginIsolated jest dostępny w Chrome 87. W związku z tym document.domain jest niezmienny, gdy self.crossOriginIsolated zwraca wartość true. Funkcja performance.measureUserAgentSpecificMemory() kończy testowanie origin i jest domyślnie włączona w Chrome 89. Shared Array Buffer w Chrome na Androida będzie dostępny od Chrome 88.