Rendere il sito web "isolato multiorigine" utilizzando COOP e COEP

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

Eiji Kitamura

Attenzione : SharedArrayBuffer sulla versione desktop di Chrome richiede l'isolamento multiorigine a partire da Chrome 92. Scopri di più sugli aggiornamenti di SharedArrayBuffer in Android Chrome 88 e Chrome 92 per desktop.

Aggiornamenti

• 21 giugno 2022: gli script worker richiedono attenzione anche durante l'isolamento multiorigine sia abilitato. 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 riflettono la recente modifica , viene rimossa.
• 6 maggio 2021: in base ai feedback e ai problemi segnalati, abbiamo deciso di modificare cronologia per l'utilizzo di SharedArrayBuffer in nessun sito isolato multiorigine in Chrome M92.
• 16 aprile 2021: sono state aggiunte note relative alla nuova funzionalità COEP senza credenziali e COOP la stessa origine-allow-popups a essere un'atmosfera rilassata condizione per multiorigine e l'isolamento dei dati.
• 5 marzo 2021: sono state rimosse le limitazioni per SharedArrayBuffer. performance.measureUserAgentSpecificMemory() e le funzionalità di debug, che ora sono completamente abilitate in Chrome 89. Aggiunta di funzionalità in arrivo, performance.now() e performance.timeOrigin, avranno un valore più alto la precisione.
• 19 febbraio 2021: è stata aggiunta una nota sulle norme relative alle funzionalità allow="cross-origin-isolated" e funzionalità di debug su DevTools.
• 15 ottobre 2020: self.crossOriginIsolated è disponibile da Chrome 87. Di conseguenza, document.domain è immutabile quando self.crossOriginIsolated restituisce true. performance.measureUserAgentSpecificMemory() sta terminando la prova dell'origine e è attiva per impostazione predefinita in Chrome 89. Il buffer array condiviso su Chrome per Android saranno disponibili da Chrome 88.

Alcune API web aumentano il rischio di attacchi side-channel come Spectre. A mitigazione del rischio, i browser offrono un ambiente isolato basato su attivazione, chiamato con isolamento multiorigine. Con uno stato isolato multiorigine, la pagina web verrà essere in grado di utilizzare funzionalità privilegiate, tra cui:

di Gemini Advanced. .

Funzionalità che saranno disponibili in un isolamento multiorigine stato.

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

Lo stato di isolamento multiorigine impedisce anche le modifiche document.domain. (La capacità di modificare document.domain consente la comunicazione tra documenti dello stesso sito ed è stata considerata una via d'accesso criterio della stessa origine).

Per attivare lo stato di isolamento multiorigine, devi inviare quanto segue 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 che interagiscono direttamente con il documento. Anche questo significa che le risorse caricate multiorigine richiedono attivazioni.

Puoi determinare se una pagina web è in uno stato di isolamento multiorigine utilizzando esaminare self.crossOriginIsolated

Questo articolo spiega come utilizzare queste nuove intestazioni. In un follow-up articolo: fornirò maggiori informazioni di base e contesto.

Nota: questo articolo è rivolto a chi vuole preparare i propri siti web all'utilizzo di SharedArrayBuffer, thread WebAssembly, performance.measureUserAgentSpecificMemory() o un timer ad alta risoluzione con maggiore precisione e in modo più efficace sulle piattaforme dei browser.

di Gemini Advanced.

Termine chiave: questo articolo utilizza molte terminologie dal suono simile. Per essere più chiari, prima definiamoli: * COEP: criterio sull'incorporamento multiorigine * COOP: criterio di apertura multiorigine * CORP: criterio delle risorse tra origini * CORS: condivisione delle risorse tra origini * CORB: blocco della lettura tra origini

Esegui il deployment di COOP e COEP per rendere il tuo sito web isolato multiorigine

Nota: per conoscere i passaggi pratici per attivare l'isolamento multiorigine, consulta Una guida per attivare l'isolamento multiorigine.

Integra COOP e COEP

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

Se attivi COOP: same-origin in un documento di primo livello, le finestre con lo stesso origine e le finestre aperte dal documento avranno una navigazione separata gruppo di contesto, a meno che non si trovino nella stessa origine con la stessa impostazione COOP. Pertanto, viene applicato l'isolamento per le finestre aperte e la comunicazione reciproca entrambe le finestre siano disattivate.

Attenzione : questo comporterà l'interruzione delle integrazioni che richiedono interazioni con finestra multiorigine, come OAuth e i pagamenti. Per mitigare il problema, stiamo esplorando il rilascio della condizione per abilitare l'isolamento multiorigine per Cross-Origin-Opener-Policy: same-origin-allow-popups. In questo modo sarà possibile la comunicazione con la finestra aperta da sola. Se vuoi attivare l'isolamento multiorigine, ma il problema è bloccato, ti consigliamo di registrarti per una prova dell'origine e attendere che la nuova condizione sia disponibile. Non abbiamo in programma di terminare la prova dell'origine finché il problema non sarà risolto in modo sicuro.

Un gruppo di contesti di navigazione è un insieme di finestre che possono fare riferimento l'una all'altra. Per ad esempio un documento di primo livello e i documenti secondari incorporati tramite <iframe>. Se un sito web (https://a.example) apre una finestra popup (https://b.example), finestra popup e finestra di apertura condividono lo stesso contesto di navigazione, possono accedere l'uno all'altro tramite le API DOM come window.opener.

Puoi controllare se l'apertura delle finestre e quella che li ha aperti sono in una navigazione separata gruppi di contesto da DevTools.

Prova: vedi l'impatto dei diversi parametri COOP.

2. Assicurati che per le risorse sia abilitato CORP o CORS

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

Ecco cosa devi fare a seconda della natura della risorsa:

• Se è previsto che la risorsa venga caricata solo dalla stessa origine, imposta l'intestazione Cross-Origin-Resource-Policy: same-origin.
• Se la risorsa dovrebbe essere caricata solo dallo stesso sito, ma attraversando origin, imposta l'intestazione Cross-Origin-Resource-Policy: same-site.
• Se la risorsa viene caricata da più origini sotto il tuo controllo, imposta la risorsa Cross-Origin-Resource-Policy: cross-origin, se possibile.
• Per le risorse multiorigine su cui non hai controllo:
  • Utilizza l'attributo crossorigin nel tag HTML di caricamento se la risorsa è gestito con CORS. Ad esempio <img src="***" crossorigin>.
  • Chiedi al proprietario della risorsa di supportare CORS o CORP.
• Per gli iframe, segui gli stessi principi riportati sopra e imposta il parametro 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, in modo da non avere bisogno di intestazioni CORP o CORS.
• Per un documento o un worker elaborato con COEP: require-corp, multiorigine Le risorse secondarie caricate senza CORS devono impostare l'intestazione Cross-Origin-Resource-Policy: cross-origin per attivare l'incorporamento. Questo vale, ad esempio, per <script>, importScripts, <link>, <video>, <iframe> e così via.

di Gemini Advanced.

Puoi attivare l'isolamento multiorigine in un documento incorporato all'interno di un iframe applicando il criterio di autorizzazioni allow="cross-origin-isolated" al tag <iframe> e rispettando le stesse condizioni descritte in questo documento. Tieni presente che anche l'intera catena di documenti, inclusi i frame principali e i frame figlio, deve essere multiorigine.

di Gemini Advanced.

Termine chiave: è importante che tu capisca la differenza tra "stesso sito" e "same-origin". Scopri di più sulla differenza nella sezione Comprendere lo stesso sito e la stessa origine.

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

Prima di attivare completamente COEP, puoi eseguire una prova utilizzando Intestazione Cross-Origin-Embedder-Policy-Report-Only per esaminare se il criterio funziona davvero. Riceverai report senza bloccare i contenuti incorporati.

Applicala in modo ricorsivo a tutti i documenti, incluso il documento di primo livello. iframe e script worker. Per informazioni sull'intestazione HTTP solo Report, consulta Rilevare i problemi utilizzando i report tramite Google Cloud.

4. Attiva COEP

Dopo aver confermato che tutto funziona e che tutte le risorse possono essere caricato correttamente, cambia Cross-Origin-Embedder-Policy-Report-Only all'intestazione Cross-Origin-Embedder-Policy con lo stesso valore per tutte documenti, inclusi quelli incorporati tramite iframe e script worker.

Prova: osserva l'impatto di diversi parametri COEP / CORP.

di Gemini Advanced.

Nota: Squoosh (una PWA per l'ottimizzazione delle immagini) ora utilizza COOP / COEP per ottenere l'accesso ai Threads Wasm (e al buffer di array condivisi) anche su Chrome per Android.

di Gemini Advanced.

Attenzione : stiamo esplorando modi per eseguire il deployment di Cross-Origin-Resource-Policy su larga scala, poiché l'isolamento multiorigine richiede l'attivazione esplicita di tutte le sottorisorse. E ci è venuta l'idea di andare nella direzione opposta: un nuovo COEP "senza credenziali" che consente di caricare le risorse senza l'intestazione CORP rimuovendo tutte le relative credenziali. Ci auguriamo che in questo modo alleggerisci l'onere di verificare che le sottorisorse inviino l'intestazione Cross-Origin-Resource-Policy. Tuttavia, poiché la modalità credentialless è disponibile su Chrome a partire dalla versione 96, ma non è ancora supportata da altri browser, alcuni sviluppatori potrebbero trovare difficile implementare COOP o COEP. Se preferisci non abilitare ancora l'isolamento multiorigine, ti consigliamo di registrarti per una prova dell'origine e di attendere che credentialless sia disponibile in altri browser.

Determina se l'isolamento è riuscito con self.crossOriginIsolated

La proprietà self.crossOriginIsolated restituisce true quando la pagina web si trova in una stato isolato multiorigine e tutte le risorse e le finestre sono isolate lo 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 funzioni avanzate come performance.measureUserAgentSpecificMemory().

Debug dei problemi con Chrome DevTools

Per le risorse di cui viene eseguito il rendering sullo schermo, come le immagini, la procedura è piuttosto facile per rilevare problemi relativi al COEP perché la richiesta verrà bloccata e la pagina verrà indicare un'immagine mancante. Tuttavia, per le risorse che non hanno necessariamente un impatto visivo, come script o stili, i problemi relativi al COEP potrebbero passare inosservato. In questi casi, usa il riquadro Rete DevTools. Se c'è un problema con il COEP, dovresti vedere (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) in Stato colonna.

Puoi quindi fare clic sulla voce per visualizzare ulteriori dettagli.

Puoi anche determinare lo stato di iframe e finestre popup tramite la Riquadro Applicazione. Vai a "Frame" a sinistra espandi "in alto" per vedere la suddivisione della struttura delle risorse.

Puoi controllare lo stato dell'iframe, ad esempio la disponibilità di SharedArrayBuffer, ecc.

Puoi anche controllare lo stato delle finestre popup, ad esempio se sono multiorigine e isolata. .

Osservare i problemi utilizzando l'API di reporting

L'API di reporting è un altro meccanismo che ti consente di rilevare vari problemi. Puoi configurare l'API di reporting per indicare ai tuoi utente browser per inviare un report ogni volta che COEP blocca il caricamento di una risorsa o COOP isola una finestra popup. Chrome supporta l'API di reporting da versione 69 per diversi utilizzi, tra cui COEP e COOP.

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

Per scoprire come configurare l'API di reporting e impostare un server per ricevere consulta la sezione Uso dei rapporti tramite Google Cloud.

Esempio di report COEP

Esempio di COEP report quando la 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"
}]

Attenzione: blocked-url è disponibile solo per la compatibilità con le versioni precedenti e verrà rimosso alla fine.

Esempio di report COOP

Un esempio di COOP payload del report quando una finestra popup viene aperta isolata appare così:

[{
  "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 tentano di accedere l'uno all'altro (solo "solo report" ), COOP invia anche una segnalazione. Ad esempio, un report quando Il tentativo di postMessage() ha 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 una pagina web in un'istanza speciale con isolamento multiorigine. Potrai esaminare self.crossOriginIsolated per determinare se una pagina web è multiorigine isolato.

Aggiorneremo questo post man mano che verranno rese disponibili nuove funzionalità stato isolato multiorigine e vengono apportati ulteriori miglioramenti a DevTools intorno a COOP e COEP.

Risorse

• Perché hai bisogno di un "isolamento multiorigine" per scoprire funzionalità potenti
• Una guida per attivare l'isolamento multiorigine
• Aggiornamenti di SharedArrayBuffer in Chrome 88 per Android e Chrome per desktop 102
• Monitora l'utilizzo totale della memoria della tua pagina web con measureUserAgentSpecificMemory()