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 bardziej precyzyjny licznik czasu o wysokiej rozdzielczości.

Eiji Kitamura

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

Uwaga: od wersji Chrome 92 SharedArrayBuffer na komputerach 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 Web API zwiększają ryzyko ataków typu side-channel, takich jak Spectre. Aby ograniczyć to ryzyko, przeglądarki oferują izolowane środowisko oparte na akceptacji, które jest izolowane 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	Wymagane w przypadku wątków WebAssembly. Ta funkcja jest dostępna w Chrome 88 na Androida. Wersja komputerowa jest domyślnie włączona dzięki 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 od Chrome 89.
performance.now(), performance.timeOrigin	Jest dostępna w wielu przeglądarkach, a rozdzielczość jest ograniczona do 100 mikrosekund lub więcej. W przypadku izolacji od zasobów z innych domen rozdzielczość może wynosić co najmniej 5 mikrosekund.

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 w tej samej witrynie i jest uważana za lukę w zasadzie tego samego pochodzenia).

Aby wyrazić zgodę na 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 wyraźnie oznaczone jako możliwe do wczytania przez dokumenty współdzielone, i uniemożliwiają oknom współdzielonym bezpośrednią interakcję z Twoim dokumentem. Oznacza to również, że zasoby wczytywane ze współdzieleniem wymagają zgody użytkownika.

Aby sprawdzić, czy strona internetowa jest izolowana od zasobów z innych domen, sprawdź self.crossOriginIsolated.

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

Słowniczek

W tym dokumencie używamy wielu podobnych nazw i skrótów. Aby ułatwić Ci zrozumienie tych pojęć, przygotowaliśmy krótki słowniczek:

• COEP: zasady umieszczania zasobów z innych domen
• COOP: Cross Origin Opener Policy
• CORP: zasady dotyczące zasobów z różnych źródeł
• CORS: współdzielenie zasobów pomiędzy serwerami z różnych domen
• CORB: Cross Origin Read Blocking

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

Jeśli 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 osobną grupę kontekstu przeglądania, chyba że pochodzą z tego samego źródła i mają to samo ustawienie COOP. W związku z tym izolacja jest wymuszana w przypadku otwartych okien, a wzajemna komunikacja między nimi jest wyłączona.

Grupa kontekstu przeglądania to zbiór okien, które mogą się do siebie 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) otwiera okno (https://b.example), okno otwierające i okno dialogowe mają ten sam kontekst przeglądania, dlatego mają dostęp do siebie nawzajem za pomocą interfejsów DOM API, takich jak window.opener.

Możesz sprawdzić, czy okno otwierające i otwierane znajdują się w osobnych grupach kontekstu przeglądania w Narzędziach deweloperskich.

2. Włączanie 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 kroku 4, czyli podczas włączania COEP.

Oto co musisz zrobić w zależności od rodzaju zasobu:

• 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 innej domeny, ustaw nagłówek Cross-Origin-Resource-Policy: same-site.
• Jeśli zasób jest wczytywany z kontrolowanych przez Ciebie źródeł zewnętrznych, ustaw nagłówek Cross-Origin-Resource-Policy: cross-origin, jeśli to możliwe.
• W przypadku zasobów z różnych domen, nad którymi nie masz kontroli:
  • Jeśli zasób jest udostępniany 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ć udostępniane z tego samego źródła, więc nie potrzebujesz nagłówków CORP ani CORS.
• W przypadku dokumentu lub instancji roboczej obsługiwanej przez COEP: require-corp zasoby podrzędne ze współdzielonych domen wczytywane bez CORS muszą mieć ustawiony nagłówek Cross-Origin-Resource-Policy: cross-origin, aby można było je umieścić. Dotyczy to na przykład: <script>, importScripts, <link>, <video>, <iframe> itp.

Kluczowe pojęcie: 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óżnicy 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 przypadku dokumentu umieszczonego w elemencie iframe, stosując zasady dotyczące 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, również musi być izolowany od zasobów z innych domen.

3. Używanie nagłówka HTTP COEP Report-Only do oceny zasobów umieszczonych na stronie

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 zasady rzeczywiście działają. Będziesz otrzymywać raporty bez blokowania umieszczonych treści.

Zastosuj to rekurencyjnie do wszystkich dokumentów, w tym dokumentu najwyższego poziomu, elementów iframe i skryptów składowych. Informacje 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 zasoby mają włączone CORP lub CORS.

Gdy potwierdzisz, że wszystko działa i wszystkie zasoby można pomyślnie wczytać, przełącz nagłówek Cross-Origin-Embedder-Policy-Report-Only na nagłówek Cross-Origin-Embedder-Policy z tą samą wartością we wszystkich dokumentach, w tym w tych, które są umieszczone w elementach iframe i skryptach składowych.

Uwaga: Squoosh, PWA do optymalizacji obrazów, używa COOP/COEP, aby uzyskać dostęp do wątków Wasm (i bufora SharedArrayBuffer) oraz do Chrome na Androidzie.

Uwaga: sprawdzamy, jak wdrożyć Cross-Origin-Resource-Policy na dużą skalę, ponieważ izolacja zasobów z innych domen wymaga, aby wszystkie zasoby podrzędne wyraźnie wyraziły na to zgodę. Jedną z opcji jest tryb COEP bez danych uwierzytelniających, który umożliwia wczytywanie zasobów bez nagłówka CORP przez usunięcie wszystkich danych uwierzytelniających. 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

Właściwość self.crossOriginIsolated zwraca wartość true, gdy strona internetowa jest izolowana od zasobów z innych domen, a wszystkie zasoby i okna są izolowane w ramach tej samej grupy kontekstu przeglądania. 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.

Mogą wystąpić problemy z COOP i COEP. Do debugowania możesz użyć narzędzi dla programistów w przeglądarce lub interfejsu API raportowania.

Debugowanie z użyciem Narzędzi deweloperskich w Chrome

W przypadku zasobów renderowanych na ekranie, takich jak obrazy, wykrywanie problemów z COEP jest dość łatwe, ponieważ żądanie jest blokowane, a strona powinna wskazywać brak obrazu. Jednak w przypadku zasobów, które niekoniecznie mają wpływ na wygląd, takich jak skrypty czy style, problemy z COEP mogą pozostać niezauważone. W takich przypadkach użyj panelu Sieć w Narzędziach deweloperskich.

Jeśli występuje problem z COEP, w kolumnie Stan zobaczysz (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ż określić w panelu Aplikacja. Przejdź do sekcji „Ramki” po lewej stronie i rozwiń „górę”, aby zobaczyć strukturę zasobów.

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

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

Obserwowanie problemów za pomocą interfejsu API do raportowania

Reporting API to kolejny mechanizm, za pomocą którego można wykrywać różne problemy. Możesz skonfigurować interfejs Reporting API tak, aby przeglądarka użytkownika wysyłała raport za każdym razem, gdy COEP blokuje wczytywanie zasobu lub COOP izoluje okno dialogowe. Chrome obsługuje interfejs Reporting API od wersji 69 w różnych zastosowaniach, w tym 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 interfejsem Reporting-Endpoints. Rozważ przejście na nową wersję. Szczegółowe informacje znajdziesz w artykule Migracja do interfejsu Reporting API w wersji 1.

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

Przykładowy raport COEP

Przykładowe dane raportu COEP, gdy zasób współdzielenia jest zablokowany, wyglądają tak:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.example.org/check.svg?",
    "blockedURL": "https://third-party-test.example.org/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.example.com/?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"
}]

Uwaga: blocked-url istnieje tylko ze względu na zgodność wsteczną i zostanie usunięte.

Przykładowy raport COOP

Przykład danych raportu COOP, gdy okno jest otwierane w izolacji:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.example.org/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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 „tylko raportowanie”), COOP również wysyła raport. Na przykład raport dotyczący próby wykonania działania postMessage() wyglądałby tak:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.example.com/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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.example.com/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 przełączyć stronę internetową w specjalny stan izolacji od zasobów z innych domen. Możesz sprawdzić self.crossOriginIsolated, aby określić, czy strona internetowa jest izolowana od zasobów z innych domen.

Będziemy aktualizować ten post w miarę udostępniania nowych funkcji w stanie izolacji od zasobów z innych domen oraz wprowadzania kolejnych 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 całkowitego wykorzystania pamięci przez stronę internetową za pomocą measureUserAgentSpecificMemory()

Aktualizacje dokumentów

• 21 czerwca 2022 r.: skrypty składowe również wymagają uwagi, gdy włączona jest izolacja od zasobów z innych domen. 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 został usunięty ze względu na ostatnią zmianę kierunku.
• 6 maja 2021 r.: na podstawie otrzymanych opinii i zgłoszonych problemów postanowiliśmy dostosować harmonogram ograniczenia użycia SharedArrayBuffer w witrynach nieizolowanych od zasobów z innych domen w Chrome M92.
• 16 kwietnia 2021 r.: dodaliśmy uwagi dotyczące trybu COEP bez danych logowania i COOP same-origin-allow-popups jako mniej rygorystycznego 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 dostępne 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 notatkę o zasadach dotyczących funkcjiallow="cross-origin-isolated" i funkcji debugowania w Narzędziach deweloperskich.
• 15 października 2020 r.: zasada self.crossOriginIsolated jest dostępna od Chrome 87. W związku z tym document.domain jest niezmienny, gdy self.crossOriginIsolated zwraca true. performance.measureUserAgentSpecificMemory() kończy testowanie origin i jest domyślnie włączony w Chrome 89. Shared Array Buffer w Chrome na Androida będzie dostępny od wersji Chrome 88.