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

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.

Eiji Kitamura

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() e performance.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 che document.domain è immutabile quando self.crossOriginIsolated restituisce true. 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.
Funzionalità che saranno disponibili in stato con isolamento multiorigine.

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.

Gruppo di contesto di navigazione

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.
  • Per gli iframe, segui gli stessi principi riportati sopra e imposta Cross-Origin-Resource-Policy: cross-origin (o same-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'intestazione Cross-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.

Problemi COEP nella colonna Stato del riquadro Network.

Puoi quindi fare clic sulla voce per visualizzare ulteriori dettagli.

I dettagli del problema COEP vengono mostrati nella scheda Intestazioni dopo aver fatto clic su una risorsa di rete nel riquadro Rete.

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.

Strumento di controllo iframe di Chrome DevTools

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

Strumento di ispezione della finestra popup di Chrome DevTools

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.

Risorse