Odizolowanie witryny od zasobów z innych domen za pomocą COOP i COEP

Za pomocą COOP i COEP możesz skonfigurować środowisko izolowane od zasobów z innych domen i korzystać z zaawansowanych funkcji, takich jak SharedArrayBuffer, performance.measureUserAgentSpecificMemory() czy minutnik w wysokiej rozdzielczości, z większą precyzją.

Eiji Kitamura

Aktualizacje

• 21 czerwca 2022 roku: skrypty instancji roboczych również wymagają uwagi w przypadku izolacji od zasobów z innych domen jest włączona. Dodaliśmy wyjaśnienia.
• 5 sierpnia 2021 r.: JS Self-Profiling API jest wymieniony jako jeden z interfejsów API, wymagają izolacji zasobów z innych domen, ale odzwierciedlają niedawną zmianę kierunek, usunięte.
• 6 maja 2021 r.: na podstawie opinii i zgłoszonych problemów postanowiliśmy zmienić oś czasu wykorzystania SharedArrayBuffer w żadnych witrynach izolowanych od zasobów z innych domen objęte ograniczeniami w Chrome M92.
• 16 kwietnia 2021 roku: dodano uwagi na temat nowego modelu bez certyfikatów COEP. tryb i COOP same-origin-allow-popup, aby było spokojnie warunek dla zasobów z innych domen izolacji użytkowników.
• 5 marca 2021 roku: usunięto ograniczenia dotyczące aplikacji SharedArrayBuffer, performance.measureUserAgentSpecificMemory() i funkcje debugowania, które są teraz w pełni włączone w Chrome 89. Dodaliśmy nowe funkcje, performance.now() i performance.timeOrigin, które będą miały wyższą wartość. precyzję.
• 19 lutego 2021 r.: dodaliśmy uwagę o zasadach dotyczących funkcji allow="cross-origin-isolated" i debugowania w Narzędziach deweloperskich.
• 15 października 2020 r.: funkcja self.crossOriginIsolated jest dostępna w Chrome 87. Zgodnie z tym, że zasada document.domain jest stała, gdy: self.crossOriginIsolated zwraca wartość true. performance.measureUserAgentSpecificMemory() kończy okres próbny origin i jest domyślnie włączone w Chrome 89. Buffer współdzielonej tablicy w Chrome na Androida być dostępna od Chrome w wersji 88.

Niektóre internetowe interfejsy API zwiększają ryzyko ataków zewnętrznych, takich jak Spectre. Do i ogranicza ryzyko. Przeglądarki udostępniają oparte na akceptacji, izolowane środowisko izolowany od zasobów z innych domen. W stanie izolacji od zasobów z innych domen strona internetowa mogą korzystać z funkcji uprzywilejowanych, takich jak:

Stan izolowany od zasobów z innych domen zapobiega też modyfikacjom document.domain (Możliwość zmiany document.domain umożliwia komunikację między dokumentami z tej samej witryny i została uznana za lukę zasady tej samej domeny).

Aby zaakceptować stan izolowany od zasobów z innych domen, musisz wysłać to Nagłówki HTTP w dokumencie głównym:

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

Te nagłówki instruują przeglądarkę, aby blokowała ładowanie zasobów lub elementów iframe które nie zostały ładowane przez dokumenty z innych domen, i uniemożliwiają z innych domen podczas bezpośredniej interakcji z dokumentem. To także oznacza, że zasoby wczytywane z innych domen wymagają akceptacji.

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

Z tego artykułu dowiesz się, jak używać tych nowych nagłówków. W dalszej wiadomości artykule Podam więcej informacji kontekstowych i kontekst.

Wdróż procesy współpracy i COEP, aby izolować witrynę od zasobów z innych domen

Integracja systemów COP i COEP

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

Po włączeniu opcji COOP: same-origin w dokumencie najwyższego poziomu okna z tym samym a okna otwarte w dokumencie będą miały osobny grupę kontekstową, chyba że są w tym samym źródle z tym samym ustawieniem coOP. Izolacja jest egzekwowana w przypadku otwartych okien i wzajemnej komunikacji między oba okna są wyłączone.

Grupa kontekstu przeglądania to zbiór okien, które mogą się odwoływać do siebie nawzajem. Dla: na przykład dokument najwyższego poziomu i jego dokumenty podrzędne umieszczone w usłudze <iframe>. Jeśli strona (https://a.example) otwiera wyskakujące okienko (https://b.example): Okno otwierające i wyskakujące okienko mają ten sam kontekst przeglądania, mają dostęp do siebie przez interfejsy DOM API, np. window.opener.

Możesz sprawdzić, czy program do otwierania okna i jego osoba otwarta są w oddzielnym trybie przeglądania grup kontekstowych z Narzędzi deweloperskich.

2. Sprawdź, czy zasoby mają włączone CORP lub CORS

Sprawdź, czy wszystkie zasoby na stronie są wczytywane przez protokół HTTP CORP lub CORS nagłówki. Ten krok jest wymagany w przypadku kroku 4, który włącza COEP.

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

• Jeśli zasób ma być ładowany tylko z tego samego punktu początkowego, ustaw wartość w nagłówku Cross-Origin-Resource-Policy: same-origin.
• Jeśli zasób powinien być ładowany tylko z tej samej witryny, ale z różnych origin, ustaw nagłówek Cross-Origin-Resource-Policy: same-site.
• Jeśli zasób jest wczytywany z różnych domen, które są pod Twoją kontrolą, ustaw w parametrze 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:
  • Użyj atrybutu crossorigin w wczytywanym tagu HTML, jeśli zasób obsługiwane za pomocą CORS. (na przykład <img src="***" crossorigin>).
  • Poproś właściciela zasobu, aby obsługiwał CORS lub CORP.
• W przypadku elementów iframe stosuj te same zasady co powyżej i ustaw parametr Cross-Origin-Resource-Policy: cross-origin (lub same-site, same-origin w zależności od kontekstu).
• Skrypty wczytane za pomocą metody WebWorker muszą być obsługiwane z tej samej domeny, więc nie potrzebujesz nagłówków CORP ani CORS.
• W przypadku dokumentu lub instancji roboczej udostępnianej za pomocą COEP: require-corp, z innej domeny zasoby podrzędne wczytywane bez CORS muszą ustawiać nagłówek Cross-Origin-Resource-Policy: cross-origin, aby mógł zostać umieszczony na stronie. Dotyczy to na przykład: <script>, importScripts, <link>, <video>, <iframe> itp.

3. Używaj nagłówka HTTP tylko do raportowania COEP, aby ocenić umieszczone zasoby

Przed pełnym włączeniem COEP możesz uruchomić próbnie za pomocą Cross-Origin-Embedder-Policy-Report-Only, aby sprawdzić, czy zasada to naprawdę działa. Będziesz otrzymywać raporty bez blokowania umieszczonych treści.

Stosuj je rekurencyjnie do wszystkich dokumentów, w tym do dokumentu najwyższego poziomu, Elementy iframe i skrypty instancji roboczych. Informacje o nagłówku HTTP „Tylko raportowanie” znajdziesz w artykule Obserwowanie problemów za pomocą raportów API.

4. Włącz COEP

Po potwierdzeniu, że wszystko działa i że wszystkie zasoby można został wczytany, przełącz Cross-Origin-Embedder-Policy-Report-Only do nagłówka Cross-Origin-Embedder-Policy z tą samą wartością dla wszystkich dokumentów, również tych osadzonych w elementach iframe i skryptach instancji roboczych.

Sprawdź, czy izolacja powiodła się za pomocą funkcji self.crossOriginIsolated

Właściwość self.crossOriginIsolated zwraca true, gdy strona internetowa jest izolowany od zasobów z innych domen, a wszystkie zasoby i okna są w obrębie izolowane dla tej samej grupy kontekstu przeglądania. Za pomocą tego interfejsu API możesz określić, czy udało się izolować grupę kontekstu przeglądania i uzyskać dostęp do przydatne funkcje, takie jak performance.measureUserAgentSpecificMemory().

Debugowanie problemów za pomocą Narzędzi deweloperskich w Chrome

W przypadku zasobów renderowanych na ekranie, takich jak obrazy, jest to dość łatwe. w celu wykrywania problemów z COEP, ponieważ żądanie zostanie zablokowane, a strona oznacza brak obrazu. W przypadku zasobów, które nie muszą mieć odpowiedni wpływ wizualny, np. skrypty lub style, pozostają niezauważone. W tym celu użyj panelu Sieć w Narzędziach deweloperskich. Jeśli występuje problem z COEP, zobaczysz (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) w polu Stan .

Możesz go potem kliknąć, aby wyświetlić więcej szczegółów.

Stan elementów iframe i wyskakujących okienek możesz też określić za pomocą Panel aplikacji. Otwórz „Ramki”. po lewej stronie, rozwiń „górę” aby zobaczyć zestawienie struktury zasobów.

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

Możesz też sprawdzić stan wyskakującego okienka, na przykład, czy jest on z innej domeny izolowane. .

Obserwuj problemy za pomocą interfejsu API do raportowania

Interfejs API do raportowania to kolejny mechanizm, za pomocą którego możesz wykrywają różne problemy. Interfejs API do raportowania możesz skonfigurować tak, aby instruował użytkowników przeglądarka do wysyłania raportu, gdy COEP zablokuje wczytanie zasobu lub COOP izoluje wyskakujące okienko. Interfejs API do raportowania jest obsługiwany przez Chrome wersji 69 do różnych celów, w tym COEP i COOP.

Dowiedz się, jak skonfigurować interfejs API do raportowania oraz serwer do odbierania przejdź do sekcji Korzystanie z raportów API.

Przykładowy raport dotyczący kosztu własnego sprzedaży

Przykład COEP raport Gdy zasób z innych domen jest blokowany, 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"
}]

Przykładowy raport dotyczący działalności gospodarczej

Przykład COOP ładunek po otwarciu izolowanego wyskakującego okienka 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ą się wzajemnie łączyć (tylko „tylko raporty” ), COOP także wysyła raport. Na przykład w raporcie, gdy Próba postMessage() 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"
}]

Podsumowanie

Użyj kombinacji nagłówków HTTP COOP i COEP, aby włączyć na stronie internetowej specjalną izolowany od zasobów z innych domen. Dzięki niemu można self.crossOriginIsolated, aby określić, czy strona pochodzi z innej domeny; izolacji.

Będziemy na bieżąco aktualizować tego posta w miarę udostępniania nowych funkcji izolowany od zasobów z innych domen, a w Narzędziach deweloperskich są wprowadzane kolejne ulepszenia. w kontekście COOP i COEP.

Zasoby

• Dlaczego potrzebne jest określenie „izolowane od zasobów z innych domen” aby uzyskać dostęp do zaawansowanych funkcji
• Przewodnik dotyczący włączania izolacji zasobów z innych domen
• Aktualizacje SharedTrackBuffer w Chrome 88 na Androidzie i w Chrome na komputery 92
• Monitoruj całkowite wykorzystanie pamięci przez stronę internetową za pomocą measureUserAgentSpecificMemory()