Usa COOP e COEP per configurare un ambiente isolato multiorigine e attivare con maggiore precisione funzionalità potenti come SharedArrayBuffer
, performance.measureUserAgentSpecificMemory()
e timer ad alta risoluzione.
regolari
- 21 giugno 2022: anche gli script worker devono essere interessati quando viene attivato l'isolamento multiorigine. Sono state aggiunte alcune spiegazioni.
- 5 agosto 2021: l'API JS Self-Profilazione è stata menzionata come una delle API che richiedono l'isolamento multiorigine, ma riflette la recente modifica della direzione, è stata rimossa.
- 6 maggio 2021: in base ai feedback e ai problemi segnalati, abbiamo deciso di modificare le tempistiche per l'utilizzo di
SharedArrayBuffer
in nessun sito isolato multiorigine per applicare delle limitazioni in Chrome M92. - 16 aprile 2021: sono state aggiunte note su una nuova modalità COEP senza credenziali e su COOP same-origin-allow-popups per ottenere una condizione rilassata per l'isolamento multiorigine.
- 5 marzo 2021: sono state rimosse le limitazioni relative a
SharedArrayBuffer
,performance.measureUserAgentSpecificMemory()
e alle funzionalità di debug, che ora sono completamente abilitate in Chrome 89. Sono state aggiunte le funzionalità future,performance.now()
eperformance.timeOrigin
, che avranno una precisione maggiore. - 19 febbraio 2021: è stata aggiunta una nota sulle norme relative alle funzionalità
allow="cross-origin-isolated"
e sulla funzionalità di debug su DevTools. - 15 ottobre 2020:
self.crossOriginIsolated
è disponibile su Chrome 87. Ciò significa chedocument.domain
è immutabile quandoself.crossOriginIsolated
restituiscetrue
.performance.measureUserAgentSpecificMemory()
sta terminando la prova dell'origine ed è abilitato per impostazione predefinita in Chrome 89. Il buffer di array condiviso su Android Chrome sarà disponibile a partire da Chrome 88.
Alcune API web aumentano il rischio di attacchi side-channel come Spectre. Per ridurre questo rischio, i browser offrono un ambiente isolato basato su attivazione, chiamato con isolamento multiorigine. Con uno stato con isolamento multiorigine, la pagina web potrà utilizzare funzionalità con privilegi, tra cui:
API | Descrizione |
---|---|
SharedArrayBuffer
|
Obbligatorio per i thread WebAssembly. Questa funzionalità è disponibile su Android Chrome 88. La versione desktop è attualmente attiva per impostazione predefinita con l'aiuto dell' isolamento dei siti, ma richiederà lo stato con isolamento multiorigine e verrà disattivato per impostazione predefinita in Chrome 92. |
performance.measureUserAgentSpecificMemory()
|
Disponibile a partire da Chrome 89. |
performance.now() performance.timeOrigin
|
Attualmente disponibile per molti browser con una 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 nel criterio 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 per cui non è stato attivato il caricamento da parte di documenti multiorigine e impediscono alle finestre multiorigine di interagire direttamente con il documento. Ciò significa anche che le risorse caricate tra origini richiedono attivazioni.
Puoi determinare se una pagina web si trova in uno stato con isolamento multiorigine esaminando self.crossOriginIsolated
.
Questo articolo spiega come utilizzare queste nuove intestazioni. In un articolo di follow-up fornirò ulteriori informazioni e contesto.
Esegui il deployment di COOP e COEP per isolare multiorigine il tuo sito web
Integra COOP e COEP
1. Imposta l'intestazione 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 avranno un gruppo di contesto di navigazione separato, a meno che non si trovino nella stessa origine con la stessa impostazione COOP.
Di conseguenza, l'isolamento viene applicato in modo forzato alle finestre aperte e la comunicazione reciproca tra le due finestre è disabilitata.
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 tramite <iframe>
.
Se un sito web (https://a.example
) apre una finestra popup (https://b.example
), la finestra di apertura e la finestra popup condividono lo stesso contesto di navigazione, pertanto hanno accesso l'uno all'altro tramite API DOM come window.opener
.
Puoi controllare se l'apertura della finestra e i relativi elementi aperti si trovano in gruppi di contesto di navigazione separati da DevTools.
2. Assicurati che nelle risorse sia abilitato CORP o CORS
Assicurati che tutte le risorse nella pagina vengano caricate con intestazioni HTTP CORP o CORS. Questo passaggio è obbligatorio per il quarto passaggio: attivazione della funzione COEP.
Ecco cosa devi fare a seconda della natura della risorsa:
- Se la risorsa dovrebbe essere caricata solo dalla stessa origine, imposta l'intestazione
Cross-Origin-Resource-Policy: same-origin
. - Se è previsto che la risorsa venga caricata solo dallo stesso sito ma multiorigine, imposta l'intestazione
Cross-Origin-Resource-Policy: same-site
. - Se la risorsa viene caricata da più origini sotto il tuo controllo, imposta l'intestazione
Cross-Origin-Resource-Policy: cross-origin
, se possibile. - Per le risorse multiorigine su cui non hai alcun controllo:
- Utilizza l'attributo
crossorigin
nel tag HTML in caricamento se la risorsa viene pubblicata con CORS. Ad esempio<img src="***" crossorigin>
. - Chiedi al proprietario della risorsa di supportare CORS o CORP.
- Utilizza l'attributo
- Per gli iframe, segui gli stessi principi riportati sopra e imposta
Cross-Origin-Resource-Policy: cross-origin
(osame-site
,same-origin
a seconda del contesto). - Gli script caricati con un elemento
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'intestazioneCross-Origin-Resource-Policy: cross-origin
per poter attivare l'incorporamento. Ad esempio, questo vale per<script>
,importScripts
,<link>
,<video>
,<iframe>
e così via.
3. Utilizzare l'intestazione HTTP solo report COEP per valutare le risorse incorporate
Prima di abilitare completamente COEP, puoi eseguire una prova utilizzando l'intestazione Cross-Origin-Embedder-Policy-Report-Only
per verificare se il criterio funziona effettivamente. Riceverai report senza bloccare i contenuti incorporati.
Applica in modo ricorsivo a tutti i documenti, inclusi i documenti di primo livello, gli iframe e gli script worker. Per informazioni sull'intestazione HTTP Report-only, consulta Osservazione dei problemi utilizzando l'API di reporting.
4. Attiva COEP
Dopo aver verificato che tutto funzioni e che tutte le risorse siano state caricate correttamente, cambia l'intestazione Cross-Origin-Embedder-Policy-Report-Only
con l'intestazione Cross-Origin-Embedder-Policy
con lo stesso valore per tutti i
documenti, inclusi quelli incorporati tramite iframe e script worker.
Determina se l'isolamento è riuscito con self.crossOriginIsolated
La proprietà self.crossOriginIsolated
restituisce true
quando la pagina web è in uno stato isolato 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 contesto di navigazione e ottenuto l'accesso a funzionalità potenti come performance.measureUserAgentSpecificMemory()
.
Esegui il debug dei problemi utilizzando Chrome DevTools
Per le risorse visualizzate sullo schermo, come le immagini, è abbastanza facile rilevare problemi di COEP poiché la richiesta verrà bloccata e nella pagina verrà indicata un'immagine mancante. Tuttavia, per risorse che non hanno necessariamente un impatto visivo, ad esempio script o stili, i problemi relativi al COEP potrebbero passare inosservati. In questo caso, utilizza il riquadro Network DevTools. In caso di problemi 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 popup tramite il riquadro Applicazione. Vai alla sezione "Frame" a sinistra ed espandi "in alto" per vedere 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 popup, ad esempio se sono isolate multiorigine.
Osservare i problemi utilizzando l'API di reporting
L'API di reporting è un altro meccanismo attraverso il quale puoi rilevare vari problemi. Puoi configurare l'API di reporting in modo da indicare al browser degli utenti di inviare un report ogni volta che COEP blocca il caricamento di una risorsa o COOP isola una finestra popup. A partire dalla versione 69, Chrome supporta l'API di reporting per vari utilizzi, tra cui COEP e COOP.
Per scoprire come configurare l'API di reporting e impostare un server per la ricezione dei report, consulta Utilizzare l'API di reporting.
Esempio di report COEP
Un esempio di payload per il report COEP quando una risorsa multiorigine è bloccata ha il seguente aspetto:
[{
"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 del report COOP quando viene aperta una finestra popup isolata ha il seguente aspetto:
[{
"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 diversi gruppi di contesti di navigazione provano ad accedervi (solo in modalità "solo report"), COOP invia anche un report. Ad esempio, un report che tenta di generare 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"
}]
Conclusione
Utilizza una combinazione di intestazioni HTTP COOP e COEP per attivare uno speciale stato isolato multiorigine per una pagina web. Potrai esaminare self.crossOriginIsolated
per determinare se una pagina web si trova in uno stato isolato multiorigine.
Manterremo questo post aggiornato man mano che vengono rese disponibili nuove funzionalità per questo stato isolato multiorigine e apporteremo ulteriori miglioramenti a DevTools per COOP e COEP.