Rendere il tuo sito web "con isolamento multiorigine" utilizzando COOP e COEP

Utilizza COOP e COEP per configurare un ambiente con isolamento multiorigine e attivare funzionalità potenti come SharedArrayBuffer, performance.measureUserAgentSpecificMemory() e un timer ad alta risoluzione con una maggiore precisione.

Eiji Kitamura

Pubblicazione: 13 aprile 2020, ultimo aggiornamento: 21 giugno 2022

Attenzione: SharedArrayBuffer su Chrome per computer richiede l'isolamento multiorigine a partire da Chrome 92. Scopri di più sugli aggiornamenti di SharedArrayBuffer.

Questo documento mostra come utilizzare COOP e COEP. Puoi scoprire di più sul motivo per cui questo è importante in Rendi il tuo sito web "con isolamento multiorigine" utilizzando COOP e COEP.

Alcune API web aumentano il rischio di attacchi side channel come Spectre. Per mitigare questo rischio, i browser offrono un ambiente isolato basato sull'attivazione, chiamato con isolamento multiorigine. Con uno stato con isolamento multiorigine, la pagina web potrà utilizzare funzionalità con privilegi, tra cui:

Funzionalità che saranno disponibili nello stato con isolamento multiorigine.

API	Descrizione
SharedArrayBuffer	Obbligatorio per i thread WebAssembly. Questa funzionalità è disponibile a partire da Chrome 88 per Android. La versione desktop è attiva per impostazione predefinita con l'aiuto dell'isolamento dei siti, ma richiederà lo stato con isolamento multiorigine e sarà disattivata per impostazione predefinita in Chrome 92.
performance.measureUserAgentSpecificMemory()	Disponibile da Chrome 89.
performance.now(), performance.timeOrigin	Disponibile in molti browser, con risoluzione limitata a 100 microsecondi o superiore. Con l'isolamento multiorigine, la risoluzione può essere di 5 microsecondi o superiore.

Lo stato con isolamento multiorigine impedisce anche le modifiche di document.domain. (La possibilità di modificare document.domain consente la comunicazione tra documenti dello stesso sito ed è stata considerata una scappatoia nella policy della stessa origine).

Per attivare uno stato con isolamento multiorigine, devi inviare le seguenti intestazioni HTTP nel documento principale:

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

Queste intestazioni indicano al browser di bloccare il caricamento di risorse o iframe che non hanno attivato il caricamento da parte di documenti multiorigine e impediscono alle finestre multiorigine di interagire direttamente con il tuo documento. Ciò significa anche che le risorse caricate multiorigine richiedono l'attivazione.

Puoi determinare se una pagina web è in uno stato con isolamento multiorigine esaminando self.crossOriginIsolated.

Nota: questo documento è rivolto a chi vuole preparare i propri siti web per l'utilizzo di SharedArrayBuffer, thread WebAssembly, performance.measureUserAgentSpecificMemory() o timer ad alta risoluzione con una maggiore precisione e in modo più efficace su tutte le piattaforme browser.

Glossario

Questo documento utilizza molti termini con nomi e abbreviazioni simili. Per fare chiarezza, abbiamo preparato un mini glossario:

• COEP: Cross Origin Embedder Policy
• COOP: Cross Origin Opener Policy
• CORP: Cross Origin Resource Policy
• CORS: Cross Origin Resource Sharing
• CORB: Cross Origin Read Blocking

Rendi il tuo sito web con isolamento multiorigine

Suggerimento: scopri i passaggi pratici per attivare l'isolamento multiorigine.

1. Imposta Cross-Origin-Opener-Policy: same-origin sul documento di primo livello

Se attivi COOP: same-origin su un documento di primo livello, le finestre con la stessa origine e quelle aperte dal documento hanno un gruppo di contesto di navigazione separato, a meno che non abbiano la stessa origine con la stessa impostazione COOP. In questo modo, viene applicato l'isolamento per le finestre aperte e la comunicazione reciproca tra le due finestre viene disattivata.

Un gruppo di contesti di navigazione è un insieme di finestre che possono fare riferimento l'una all'altra. Ad esempio, un documento di primo livello e i relativi documenti secondari incorporati con <iframe>. Se un sito web (https://a.example) apre una finestra di dialogo (https://b.example), la finestra di apertura e la finestra di dialogo condividono lo stesso contesto di navigazione, pertanto hanno accesso l'una all'altra con API DOM come window.opener.

Puoi verificare se la finestra di apertura e quella di destinazione si trovano in gruppi di contesti di navigazione separati da DevTools.

2. Abilita CORP o CORS sulle risorse

Assicurati che tutte le risorse della pagina vengano caricate con intestazioni HTTP CORP o CORS. Questo passaggio è necessario per il passaggio quattro, ovvero l'attivazione di COEP.

Ecco cosa devi fare, a seconda della natura della risorsa:

• Se la risorsa deve essere caricata solo dalla stessa origine, imposta l'intestazione Cross-Origin-Resource-Policy: same-origin.
• Se la risorsa deve essere caricata solo dallo stesso sito, ma con origine incrociata, imposta l'intestazione Cross-Origin-Resource-Policy: same-site.
• Se la risorsa viene caricata da origini incrociate sotto il tuo controllo, imposta l'intestazione Cross-Origin-Resource-Policy: cross-origin, se possibile.
• Per le risorse multiorigine su cui non hai il controllo:
  • Utilizza l'attributo crossorigin nel tag HTML di caricamento se la risorsa viene pubblicata con CORS. Ad esempio <img src="***" crossorigin>.
  • Chiedi al proprietario della risorsa di supportare CORS o CORP.
• Per gli iframe, segui gli stessi principi e imposta Cross-Origin-Resource-Policy: cross-origin (o same-site, same-origin a seconda del contesto).
• Gli script caricati con un WebWorker devono essere pubblicati dalla stessa origine, quindi non sono necessarie intestazioni CORP o CORS.
• Per un documento o un worker pubblicato con COEP: require-corp, le risorse secondarie multiorigine caricate senza CORS devono impostare l'intestazione Cross-Origin-Resource-Policy: cross-origin per attivare l'incorporamento. Ad esempio, questo vale per <script>, importScripts, <link>, <video>, <iframe> e così via.

Termine chiave: Same-site sono siti web che hanno lo stesso schema e lo stesso eTLD+1. I siti web con la stessa origine hanno la stessa combinazione di schema, nome host e porta. Scopri di più sulla differenza tra same-site e same-origin.

Isolamento negli iframe

Puoi attivare l'isolamento multiorigine su un documento incorporato in un iframe applicando la policy sulle autorizzazioni allow="cross-origin-isolated" al tag <iframe> e soddisfacendo queste condizioni. Anche l'intera catena di documenti, inclusi i frame principali e secondari, deve essere con isolamento multiorigine.

3. Utilizza l'intestazione HTTP COEP Report-Only per valutare le risorse incorporate

Prima di attivare completamente COEP, puoi eseguire un dry run utilizzando l'intestazione Cross-Origin-Embedder-Policy-Report-Only per verificare se la policy funziona effettivamente. Riceverai i report senza bloccare i contenuti incorporati.

Applica questa operazione in modo ricorsivo a tutti i documenti, inclusi il documento di primo livello, gli iframe e gli script worker. Per informazioni sull'intestazione HTTP Report-Only, consulta Osserva i problemi utilizzando l'API Reporting.

4. Attiva COEP

Questo passaggio può essere eseguito solo dopo aver verificato che le risorse abbiano CORP o CORS abilitati.

Dopo aver verificato che tutto funziona e che tutte le risorse possono essere caricate correttamente, passa dall'intestazione Cross-Origin-Embedder-Policy-Report-Only all'intestazione Cross-Origin-Embedder-Policy con lo stesso valore per tutti i documenti, inclusi quelli incorporati con iframe e script worker.

Nota: Squoosh, una PWA per l'ottimizzazione delle immagini, utilizza COOP/COEP per accedere ai thread Wasm (e al buffer di array condiviso) e su Chrome per Android.

Attenzione: stiamo valutando come implementare Cross-Origin-Resource-Policy su larga scala, poiché l'isolamento multiorigine richiede l'attivazione esplicita di tutte le risorse secondarie. Un'opzione è la modalità senza credenziali COEP, che consente di caricare le risorse senza l'intestazione CORP, rimuovendo tutte le relative credenziali. La modalità senza credenziali è disponibile da Chrome 96 e in Edge, ma non è ancora supportata da altri browser.

Determina se l'isolamento è riuscito

La proprietà self.crossOriginIsolated restituisce true quando la pagina web è in uno stato con isolamento multiorigine e tutte le risorse e le finestre sono isolate all'interno dello stesso gruppo di contesti di navigazione. Puoi utilizzare questa API per determinare se hai isolato correttamente il gruppo di contesti di navigazione e ottenuto l'accesso a funzionalità come performance.measureUserAgentSpecificMemory().

Eseguire il debug di problemi.

Potresti riscontrare problemi con COOP e COEP. Per il debug, puoi utilizzare gli strumenti per sviluppatori del browser o l'API Reporting.

Esegui il debug con Chrome DevTools

Per le risorse visualizzate sullo schermo, come le immagini, è abbastanza facile rilevare i problemi relativi a COEP, perché la richiesta viene bloccata e la pagina dovrebbe indicare un'immagine mancante. Tuttavia, per le risorse che non hanno necessariamente un impatto visivo, come script o stili, i problemi relativi a COEP potrebbero passare inosservati. Per questi, utilizza il riquadro Rete di DevTools.

Se si verifica un problema con COEP, dovresti vedere (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) nella colonna Stato.

Puoi quindi fare clic sulla voce per visualizzare ulteriori dettagli.

Puoi anche determinare lo stato di iframe e finestre di dialogo tramite il riquadro Applicazione. Vai alla sezione "Frame" a sinistra ed espandi "top" per visualizzare la suddivisione della struttura delle risorse.

Puoi controllare lo stato dell'iframe, ad esempio la disponibilità di SharedArrayBuffer e così via.

Puoi anche controllare lo stato delle finestre di dialogo, ad esempio se sono con isolamento multiorigine.

Osserva i problemi utilizzando l'API Reporting

L'API Reporting è un altro meccanismo tramite il quale puoi rilevare vari problemi. Puoi configurare l'API Reporting per indicare al browser degli utenti di inviare un report ogni volta che COEP blocca il caricamento di una risorsa o COOP isola una finestra di dialogo. Chrome supporta l'API Reporting dalla versione 69 per una serie di utilizzi, tra cui COEP e COOP.

Nota: utilizzi già l'API Reporting con l'intestazione Report-To? Chrome sta passando a una nuova versione dell'API Reporting, che sostituisce Report-To con Reporting-Endpoints. Valuta la possibilità di eseguire la migrazione alla nuova versione. Per maggiori dettagli, consulta Esegui la migrazione all'API Reporting v1.

Scopri come configurare l'API Reporting e un server per ricevere i report.

Esempio di report COEP

Un esempio di payload del report COEP quando una risorsa multiorigine è bloccata è il seguente:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.example.org/check.svg?",
    "blockedURL": "https://third-party-test.example.org/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.example.com/?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"
}]

Attenzione: blocked-url esiste solo per la compatibilità con le versioni precedenti e verrà rimosso.

Esempio di report COOP

Un esempio di payload del report COOP quando una finestra di dialogo viene aperta in modo isolato è il seguente:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.example.org/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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"
}]

Quando diversi gruppi di contesti di navigazione tentano di accedere l'uno all'altro (solo in modalità "solo generazione di report"), COOP invia anche un report. Ad esempio, un report quando viene tentato postMessage() avrebbe il seguente aspetto:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.example.com/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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.example.com/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"
}]

Concetti principali

Utilizza una combinazione di intestazioni HTTP COOP e COEP per attivare uno stato speciale con isolamento multiorigine per una pagina web. Puoi esaminare self.crossOriginIsolated per determinare se una pagina web è in uno stato con isolamento multiorigine.

Aggiorneremo questo post man mano che saranno disponibili nuove funzionalità per questo stato con isolamento multiorigine e verranno apportati ulteriori miglioramenti a DevTools in relazione a COOP e COEP.

Risorse

• Perché è necessario "con isolamento multiorigine" per le funzionalità avanzate
• Una guida per attivare l'isolamento multiorigine
• Monitora l'utilizzo totale della memoria della tua pagina web con measureUserAgentSpecificMemory()

Aggiornamenti dei documenti

• 21 giugno 2022: anche gli script dei worker richiedono attenzione quando è abilitato l'isolamento multiorigine. Aggiunte alcune spiegazioni.
• 5 agosto 2021: l'API JS Self-Profiling è stata menzionata come una delle API che richiedono l'isolamento multiorigine, ma è stata rimossa in seguito al recente cambio di direzione.
• 6 maggio 2021: in base ai feedback e ai problemi segnalati, abbiamo deciso di modificare la cronologia per l'utilizzo di SharedArrayBuffer nei siti con isolamento non multiorigine, che verrà limitato in Chrome M92.
• 16 aprile 2021: sono state aggiunte note sulla modalità credentialless di COEP e sul valore same-origin-allow-popups di COOP come condizione meno restrittiva per l'isolamento multiorigine.
• 5 marzo 2021: rimosse le limitazioni per SharedArrayBuffer, performance.measureUserAgentSpecificMemory() e le funzionalità di debug, che ora sono completamente abilitate in Chrome 89. Sono state aggiunte le funzionalità imminenti, performance.now() e performance.timeOrigin, che avranno una precisione maggiore.
• 19 febbraio 2021: è stata aggiunta una nota relativa alla policy sulle funzionalità allow="cross-origin-isolated" e alla funzionalità di debug in DevTools.
• 15 ottobre 2020: self.crossOriginIsolated è disponibile da Chrome 87. Di conseguenza, document.domain è immutabile quando self.crossOriginIsolated restituisce true. L'origin trial di performance.measureUserAgentSpecificMemory() sta per terminare e l'API è abilitata per impostazione predefinita in Chrome 89. SharedArrayBuffer su Chrome per Android sarà disponibile a partire da Chrome 88.