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à avanzate come SharedArrayBuffer, performance.measureUserAgentSpecificMemory() e il timer ad alta risoluzione con una precisione migliore.

Eiji Kitamura

Pubblicato il 13 aprile 2020, ultimo aggiornamento il 21 giugno 2022

Questo documento mostra come utilizzare COOP e COEP. Puoi scoprire di più sul perché è importante in Rendere 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 sul consenso chiamato isolamento multiorigine. Con uno stato di isolamento multiorigine, la pagina web potrà utilizzare funzionalità privilegiate, tra cui:

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 lo 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 acconsentito al caricamento da parte di documenti multiorigine e impediscono alle finestre multiorigine di interagire direttamente con il documento. Ciò significa anche che le risorse caricate multiorigine richiedono l'autorizzazione.

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

Glossario

Questo documento utilizza molti termini con nomi e abbreviazioni simili. Per chiarezza, abbiamo creato 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

Rendere il tuo sito web con isolamento multiorigine

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

Se attivi COOP: same-origin in un documento di primo livello, le finestre con la stessa origine e le finestre aperte dal documento hanno un gruppo di contesti di navigazione separato, a meno che non si trovino nella stessa origine con la stessa impostazione COOP. Pertanto, l'isolamento viene applicato alle finestre aperte e la comunicazione reciproca tra le due finestre è 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 figlio 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 le API DOM come window.opener.

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

2. Attiva CORP o CORS sulle risorse

Assicurati che tutte le risorse nella pagina vengano caricate con le intestazioni HTTP CORP o CORS. Questo passaggio è necessario per il passaggio quattro, 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 da origini diverse, imposta l'intestazione Cross-Origin-Resource-Policy: same-site.
• Se la risorsa viene caricata da origini diverse sotto il tuo controllo, imposta l' Cross-Origin-Resource-Policy: cross-origin intestazione, 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 sottorisorse multiorigine caricate senza CORS devono impostare l'intestazione Cross-Origin-Resource-Policy: cross-origin per acconsentire all'incorporamento. Ad esempio, questo vale per <script>, importScripts, <link>, <video>, <iframe> e così via.

Isolamento negli iframe

Puoi attivare l'isolamento multiorigine in un documento incorporato in un iframe applicando allow="cross-origin-isolated" policy delle autorizzazioni al <iframe> tag e soddisfacendo queste condizioni. Anche l'intera catena di documenti, inclusi i frame padre e figlio, 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 una prova utilizzando l'intestazione Cross-Origin-Embedder-Policy-Report-Only per verificare se la policy funziona effettivamente. Riceverai 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 Osservare 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 attivati.

Dopo aver verificato che tutto funzioni e che tutte le risorse possano essere caricate correttamente, sostituisci l'intestazione Cross-Origin-Embedder-Policy-Report-Only con l'intestazione Cross-Origin-Embedder-Policy con lo stesso valore in tutti i documenti, inclusi quelli incorporati con iframe e script worker.

Determinare 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 hai ottenuto l'accesso a funzionalità come performance.measureUserAgentSpecificMemory().

Eseguire il debug di problemi.

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

Eseguire il debug con Chrome DevTools

Per le risorse visualizzate sullo schermo, come le immagini, è abbastanza facile rilevare i problemi 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 COEP potrebbero passare inosservati. Per questi, utilizza il riquadro Rete di DevTools.

Se si verifica un problema con COEP, nella colonna Stato dovrebbe essere visualizzato (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep).

Puoi quindi fare clic sulla voce per visualizzare maggiori 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 è isolata da origini diverse.

Osservare i problemi utilizzando l'API Reporting

L'API Reporting è un altro meccanismo tramite il quale puoi rilevare vari problemi. Puoi configurare l'API Reporting in modo che il browser dei tuoi utenti invii 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.

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

Esempio di report COEP

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

[{
  "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"
}]

Esempio di report COOP

Un esempio di payload di 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.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"
}]

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

[{
  "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"
}]

Concetti principali

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

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

Risorse

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

Aggiornamenti dei documenti

• 21 giugno 2022: anche gli script worker richiedono attenzione quando è attivato l'isolamento multiorigine. Sono state aggiunte alcune spiegazioni.
• 5 agosto 2021: l'API JS Self-Profiling è stata menzionata come una delle API che richiedono l'isolamento multiorigine, ma, in seguito a una recente modifica della direzione, è stata rimossa.
• 6 maggio 2021: in base al feedback e ai problemi segnalati, abbiamo deciso di modificare la sequenza temporale per l'utilizzo di SharedArrayBuffer nei siti non con isolamento multiorigine in Chrome M92.
• 16 aprile 2021: sono state aggiunte note sulla modalità COEP senza credenziali e su COOP same-origin-allow-popups come condizione meno restrittiva per l'isolamento multiorigine.
• 5 marzo 2021: sono state rimosse le limitazioni per SharedArrayBuffer, performance.measureUserAgentSpecificMemory() e le funzionalità di debug, ora completamente attivate 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 sulla policy delle funzionalità allow="cross-origin-isolated" e sulla funzionalità di debug in DevTools.
• 15 ottobre 2020: self.crossOriginIsolated è disponibile a partire da Chrome 87. Di conseguenza, document.domain è immutabile quando self.crossOriginIsolated restituisce true. performance.measureUserAgentSpecificMemory() sta terminando la prova dell'origine ed è attivata per impostazione predefinita in Chrome 89. Shared Array Buffer su Android Chrome sarà disponibile a partire da Chrome 88.