Cosa sono Cross-Origin-Opener-Policy (COOP) e Cross-Origin-Embedder-Policy (COEP)?

Cross-Origin-Opener-Policy (COOP) e Cross-Origin-Embedder-Policy (COEP) sono due header di risposta HTTP introdotti da Chromium nel 2020 e oggi supportati da tutti i principali browser (Chrome 83+, Firefox 79+, Safari 15.2+). COOP controlla se una pagina condivide il proprio gruppo di contesto di navigazione con finestre che apre o che l'hanno aperta; COEP controlla se la pagina può caricare sottorisorse cross-origin. Impostando COOP: same-origin insieme a COEP: require-corp o credentialless si entra in modalità "cross-origin isolated", richiesta per usare SharedArrayBuffer, performance.measureUserAgentSpecificMemory() e i timer ad alta precisione di performance.now(). Fanno parte dell'hardening post-Spectre del browser, insieme a Cross-Origin-Resource-Policy (CORP).

Perché sono stati introdotti COOP e COEP?

Nel gennaio 2018 le vulnerabilità di side-channel della CPU Spectre e Meltdown (CVE-2017-5753, CVE-2017-5715, CVE-2017-5754) hanno mostrato che JavaScript malevolo può leggere memoria di altre origini nello stesso processo di rendering. I browser hanno disattivato SharedArrayBuffer e ridotto la risoluzione di performance.now() da microsecondi a 100 µs. COOP e COEP permettono di richiedere esplicitamente un contesto isolato per processo e pulito sul cross-origin.

Cosa fa Cross-Origin-Opener-Policy (COOP)?

• unsafe-none — predefinito.
• same-origin-allow-popups — i popup aperti da te mantengono il riferimento.
• same-origin — isolamento totale.

Cross-Origin-Opener-Policy: same-origin

Cosa fa Cross-Origin-Embedder-Policy (COEP)?

• unsafe-none — predefinito.
• require-corp — ogni sottorisorsa cross-origin deve dare consenso via Cross-Origin-Resource-Policy: cross-origin o CORS.
• credentialless — da Chrome 96 (ottobre 2021). Richieste cross-origin senza cookie.

Cross-Origin-Embedder-Policy: require-corp

Cos'è la cross-origin isolation?

if ( self.crossOriginIsolated ) {
  // SharedArrayBuffer e timer ad alta risoluzione disponibili
}

Senza isolamento i browser moderni bloccano new SharedArrayBuffer() e arrotondano performance.now() a 100 µs.

Quando servono COOP e COEP su WordPress?

• Non servono su un sito di contenuto, blog o WooCommerce standard. Attivarli può rompere embed (YouTube, Maps, Stripe, Facebook).
• Servono se distribuisci WebAssembly multi-thread (Photopea, Figma, FFmpeg.wasm), editing video nel browser, giochi Emscripten o misure di performance precise.
• Solo COOP (same-origin-allow-popups) è utile su pagine di login e dashboard contro tabnabbing.

Come imposto COOP e COEP 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;

Cosa si rompe attivando COEP: require-corp?

• iframe YouTube e Vimeo.
• Google Fonts senza CORS.
• Avatar esterni come Gravatar.
• Pixel di tracking, Stripe.js, hCaptcha.

DevTools » Rete » colonna "Blocked" mostra i colpevoli. credentialless allenta il requisito.

Come verifico che il sito sia cross-origin isolated?

1. Apri il sito in Chrome.
2. DevTools (F12) » Application » Frames » top » voce "Cross-Origin Isolated: Yes".
3. Oppure esegui self.crossOriginIsolated in console.

Cosa controlla InspectWP

InspectWP analizza ogni header HTTP di risposta della pagina crawlata e segnala la presenza e il valore di Cross-Origin-Opener-Policy, Cross-Origin-Embedder-Policy e Cross-Origin-Resource-Policy nella sezione Sicurezza. L'assenza è segnalata come avviso e non come critica, perché la maggior parte dei siti di contenuto non necessita di isolamento completo.