Czym są Cross-Origin-Opener-Policy (COOP) i Cross-Origin-Embedder-Policy (COEP)?

Cross-Origin-Opener-Policy (COOP) i Cross-Origin-Embedder-Policy (COEP) to dwa nagłówki odpowiedzi HTTP wprowadzone przez Chromium w 2020 roku i obecnie wspierane przez wszystkie główne przeglądarki (Chrome 83+, Firefox 79+, Safari 15.2+). COOP kontroluje, czy strona dzieli swoją grupę kontekstu przeglądania z oknami, które otwiera lub które ją otworzyły; COEP kontroluje, czy strona może ładować subresources cross-origin. Ustawienie COOP: same-origin razem z COEP: require-corp lub credentialless uruchamia tryb "cross-origin isolated", wymagany do użycia SharedArrayBuffer, performance.measureUserAgentSpecificMemory() i wysokiej precyzji performance.now(). Część post-Spectre hardeningu przeglądarki, obok Cross-Origin-Resource-Policy (CORP).

Dlaczego wprowadzono COOP i COEP?

W styczniu 2018 podatności side-channel CPU Spectre i Meltdown (CVE-2017-5753, CVE-2017-5715, CVE-2017-5754) pokazały, że złośliwy JavaScript może czytać pamięć innych originów w tym samym procesie renderera. Przeglądarki wyłączyły SharedArrayBuffer i obniżyły rozdzielczość performance.now() z mikrosekund do 100 µs. COOP i COEP pozwalają jawnie zażądać izolowanego procesowo i czystego cross-origin kontekstu.

Co robi Cross-Origin-Opener-Policy (COOP)?

• unsafe-none — domyślne.
• same-origin-allow-popups — otwierane przez Ciebie popupy zachowują referencję.
• same-origin — pełna izolacja.

Cross-Origin-Opener-Policy: same-origin

Co robi Cross-Origin-Embedder-Policy (COEP)?

• unsafe-none — domyślne.
• require-corp — każda subresource cross-origin musi zgodzić się przez Cross-Origin-Resource-Policy: cross-origin lub CORS.
• credentialless — od Chrome 96 (październik 2021). Requesty cross-origin idą bez cookies.

Cross-Origin-Embedder-Policy: require-corp

Czym jest cross-origin isolation?

if ( self.crossOriginIsolated ) {
  // SharedArrayBuffer i timery wysokiej rozdzielczości dostępne
}

Bez izolacji nowoczesne przeglądarki blokują new SharedArrayBuffer() i zaokrąglają performance.now() do 100 µs.

Kiedy potrzebuję COOP i COEP na stronie WordPress?

• Nie potrzebujesz na zwykłej stronie contentowej, blogu czy WooCommerce. Włączenie może popsuć osadzenia (YouTube, Maps, Stripe, Facebook).
• Potrzebujesz przy WebAssembly z multi-threadingiem (Photopea, Figma, FFmpeg.wasm), edycji wideo w przeglądarce, grach Emscripten lub precyzyjnych pomiarach wydajności.
• Sam COOP (same-origin-allow-popups) ma sens na stronach logowania i dashboardach przeciw tabnabbingowi.

Jak ustawić COOP i COEP w WordPressie?

Apache:

<IfModule mod_headers.c>
  Header set Cross-Origin-Opener-Policy "same-origin"
  Header set Cross-Origin-Embedder-Policy "require-corp"
  Header set Cross-Origin-Resource-Policy "same-site"
</IfModule>

Nginx:

add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Resource-Policy "same-site" always;

Co się psuje przy COEP: require-corp?

• iframe YouTube i Vimeo.
• Google Fonts bez CORS.
• Zewnętrzne awatary jak Gravatar.
• Piksele śledzące, Stripe.js, hCaptcha.

DevTools » Sieć » kolumna "Blocked" pokazuje winowajców. credentialless łagodzi wymaganie.

Jak sprawdzić, czy strona jest cross-origin isolated?

1. Otwórz stronę w Chrome.
2. DevTools (F12) » Application » Frames » top » sprawdź "Cross-Origin Isolated: Yes".
3. Lub wykonaj self.crossOriginIsolated w konsoli.

Co sprawdza InspectWP

InspectWP analizuje każdy nagłówek HTTP odpowiedzi crawlowanej strony i raportuje obecność oraz wartość Cross-Origin-Opener-Policy, Cross-Origin-Embedder-Policy i Cross-Origin-Resource-Policy w sekcji Bezpieczeństwo. Brak nagłówków oznaczany jest jako ostrzeżenie, nie krytyczne — bo większość stron contentowych nie potrzebuje pełnej izolacji.