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ą.
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()
iperformance.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 zasadadocument.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:
Interfejs API | Opis |
---|---|
SharedArrayBuffer
|
Wymagane dla wątków WebAssembly. Ta funkcja jest dostępna na Androidzie Chrome 88. Wersja komputerowa jest obecnie domyślnie włączona z pomoc z Izolacja witryn, ale wymaga stanu izolowanego od zasobów z innych domen i będzie domyślnie wyłączone w Chrome 92. |
performance.measureUserAgentSpecificMemory()
|
Dostępna od Chrome 89. |
performance.now() performance.timeOrigin
|
Funkcja obecnie dostępna w wielu przeglądarkach, której rozdzielczość jest ograniczona do 100 mikrosekund lub więcej. Dzięki izolacji zasobów z innych domen może wynosić 5 mikrosekund lub więcej. |
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.
- Użyj atrybutu
- W przypadku elementów iframe stosuj te same zasady co powyżej i ustaw parametr
Cross-Origin-Resource-Policy: cross-origin
(lubsame-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łówekCross-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
.
![Problemy z COEP w kolumnie Stan w panelu Sieć.](https://web.dev/static/articles/coop-coep/image/coep-issues-the-status-c-9f8040461053.jpg?authuser=19&hl=pl)
Możesz go potem kliknąć, aby wyświetlić więcej szczegółów.
![Szczegóły problemu z COEP są wyświetlane na karcie Nagłówki po kliknięciu zasobu sieciowego w panelu Sieć.](https://web.dev/static/articles/coop-coep/image/details-the-coep-issue-a-7483b46211d45.jpg?authuser=19&hl=pl)
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.
![Inspektor elementów iframe w Narzędziach deweloperskich w Chrome](https://web.dev/static/articles/coop-coep/image/chrome-devtools-iframe-in-7b22ff613fbeb.png?authuser=19&hl=pl)
Możesz też sprawdzić stan wyskakującego okienka, na przykład, czy jest on z innej domeny izolowane. .
![Wyskakujące okienko w Narzędziach deweloperskich w Chrome](https://web.dev/static/articles/coop-coep/image/chrome-devtools-popup-win-191023386b4a8.png?authuser=19&hl=pl)
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()