Wat is Cross-Origin-Opener-Policy (COOP) en Cross-Origin-Embedder-Policy (COEP)?

Cross-Origin-Opener-Policy (COOP) en Cross-Origin-Embedder-Policy (COEP) zijn twee HTTP-responseheaders die Chromium in 2020 introduceerde en die nu door alle grote browsers worden ondersteund (Chrome 83+, Firefox 79+, Safari 15.2+). COOP bepaalt of een pagina haar browsing-context-groep deelt met vensters die ze opent of die haar openden; COEP bepaalt of de pagina cross-origin subresources mag laden. COOP: same-origin samen met COEP: require-corp of credentialless zet de pagina in "cross-origin isolated"-modus, vereist voor SharedArrayBuffer, performance.measureUserAgentSpecificMemory() en high-resolution performance.now()-timers. Onderdeel van post-Spectre browser hardening, samen met Cross-Origin-Resource-Policy (CORP).

Waarom zijn COOP en COEP geïntroduceerd?

In januari 2018 toonden de CPU side-channel-kwetsbaarheden Spectre en Meltdown (CVE-2017-5753, CVE-2017-5715, CVE-2017-5754) aan dat kwaadaardig JavaScript geheugen van andere origins binnen hetzelfde renderproces kan lezen. Browsers schakelden SharedArrayBuffer uit en verlaagden de resolutie van performance.now() van microseconden naar 100 µs. Met COOP en COEP kan een site expliciet een procesgeïsoleerde, cross-origin-schone context vragen.

Wat doet Cross-Origin-Opener-Policy (COOP)?

• unsafe-none — standaard.
• same-origin-allow-popups — door jou geopende popups behouden de referentie.
• same-origin — volledige isolatie.

Cross-Origin-Opener-Policy: same-origin

Wat doet Cross-Origin-Embedder-Policy (COEP)?

• unsafe-none — standaard.
• require-corp — elke cross-origin subresource moet opt-in geven via Cross-Origin-Resource-Policy: cross-origin of CORS.
• credentialless — sinds Chrome 96 (oktober 2021). Cross-origin requests gaan zonder cookies.

Cross-Origin-Embedder-Policy: require-corp

Wat is cross-origin isolation?

if ( self.crossOriginIsolated ) {
  // SharedArrayBuffer en high-res timers beschikbaar
}

Zonder isolatie blokkeren moderne browsers new SharedArrayBuffer() en ronden performance.now() af op 100 µs.

Wanneer heb ik COOP en COEP nodig op WordPress?

• Niet nodig op een normale content-site, blog of WooCommerce-shop. Activeren kan embeds breken (YouTube, Maps, Stripe, Facebook).
• Wel nodig bij WebAssembly met multi-threading (Photopea, Figma, FFmpeg.wasm), browser-videobewerking, Emscripten-games of nauwkeurige performance-metingen.
• Alleen COOP (same-origin-allow-popups) is nuttig op login-pagina's en dashboards tegen tabnabbing.

Hoe stel ik COOP en COEP in in WordPress?

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;

Wat breekt bij COEP: require-corp?

• YouTube- en Vimeo-iframes.
• Google Fonts zonder CORS.
• Externe avatars als Gravatar.
• Tracking-pixels, Stripe.js, hCaptcha.

DevTools » Network » kolom "Blocked" toont de boosdoeners. credentialless verzacht de eis.

Hoe test ik of mijn site cross-origin isolated is?

1. Open de site in Chrome.
2. DevTools (F12) » Application » Frames » top » check "Cross-Origin Isolated: Yes".
3. Of voer self.crossOriginIsolated uit in de console.

Wat InspectWP controleert

InspectWP analyseert elke HTTP-responseheader van de gecrawlde pagina en rapporteert aanwezigheid en waarde van Cross-Origin-Opener-Policy, Cross-Origin-Embedder-Policy en Cross-Origin-Resource-Policy in de Beveiligingssectie. Ontbrekende headers worden als waarschuwing gemarkeerd, niet als kritiek, omdat de meeste content-sites geen volledige isolation nodig hebben.