Una guida per attivare l'isolamento multiorigine

L'isolamento multiorigine consente a una pagina web di utilizzare funzionalità efficaci come SharedArrayBuffer. Questo articolo spiega come attivare l'isolamento cross-origin sul tuo sito web.

Eiji Kitamura

Questa guida mostra come attivare l'isolamento cross-origin. L'isolamento multiorigine è necessario se vuoi utilizzare SharedArrayBuffer, performance.measureUserAgentSpecificMemory() o un timer ad alta risoluzione con una precisione migliore.

Se intendi attivare l'isolamento cross-origin, valuta l'impatto che avrà su altre risorse cross-origin sul tuo sito web, come i posizionamenti degli annunci.

Individuare dove viene utilizzato SharedArrayBuffer nel proprio sito web

A partire da Chrome 92, le funzionalità che utilizzano SharedArrayBuffer non funzioneranno più senza l'isolamento multiorigine. Se sei arrivato a questa pagina a causa di un messaggio di ritiro di SharedArrayBuffer, è probabile che il tuo sito web o una delle risorse incorporate in questa pagina utilizzi SharedArrayBuffer. Per assicurarti che non si verifichino interruzioni sul tuo sito web a causa del ritiro, inizia identificando dove viene utilizzato.

Obiettivo:

• Attiva l'isolamento multiorigine per continuare a utilizzare SharedArrayBuffer.
• Se utilizzi codice di terze parti che utilizza SharedArrayBuffer, invita il fornitore di terze parti a intervenire.

Se non sai in quale punto del tuo sito viene utilizzato un SharedArrayBuffer, esistono due modi per scoprirlo:

• Utilizzo di Chrome DevTools
• (Avanzato) Utilizzare i report sul ritiro

Se sai già dove utilizzi SharedArrayBuffer, vai a Analisi dell'impatto dell'isolamento cross-origin.

Utilizzo di Chrome DevTools

Chrome DevTools consente agli sviluppatori di ispezionare i siti web.

1. Apri Chrome DevTools nella pagina che sospetti possa utilizzare SharedArrayBuffer.
2. Seleziona il riquadro Console.
3. Se la pagina utilizza SharedArrayBuffer, viene visualizzato il seguente messaggio:

   [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535

4. Il nome del file e il numero di riga alla fine del messaggio (ad esempio common-bundle.js:535) indicano la provenienza di SharedArrayBuffer. Se si tratta di una libreria di terze parti, contatta lo sviluppatore per risolvere il problema. Se è implementato nel tuo sito web, segui la guida riportata di seguito per attivare l'isolamento cross-origin.

Avviso della console DevTools quando SharedArrayBuffer viene utilizzato senza isolamento multiorigine.

(Avanzato) Utilizzare i report sul ritiro

Alcuni browser dispongono di una funzionalità di generazione di report sul ritiro delle API in un endpoint specificato.

1. Configura un server di report sul ritiro e ricevi l'URL dei report. A questo scopo, puoi utilizzare un servizio pubblico o crearne uno autonomamente.
2. Utilizzando l'URL, imposta la seguente intestazione HTTP sulle pagine che potenzialmente pubblicano SharedArrayBuffer.

   Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}

3. Una volta che l'intestazione inizia a propagarsi, l'endpoint a cui hai effettuato la registrazione dovrebbe iniziare a raccogliere i report di ritiro.

Visualizza un esempio di implementazione qui: https://cross-origin-isolation.glitch.me.

Analizzare l'impatto dell'isolamento multiorigine

Non sarebbe fantastico se potessi valutare l'impatto dell'attivazione dell'isolamento cross-origin sul tuo sito senza che si verifichino problemi? Le intestazioni HTTP Cross-Origin-Opener-Policy-Report-Only e Cross-Origin-Embedder-Policy-Report-Only ti consentono di fare esattamente questo.

1. Imposta Cross-Origin-Opener-Policy-Report-Only: same-origin sul documento di primo livello. Come suggerisce il nome, questa intestazione invia solo report sull'impatto che COOP: same-origin avrebbe sul tuo sito. Non disattiva effettivamente la comunicazione con le finestre popup.
2. Configura i report e configura un server web per ricevere e salvare i report.
3. Imposta Cross-Origin-Embedder-Policy-Report-Only: require-corp sul documento di primo livello. Anche in questo caso, questa intestazione ti consente di vedere l'impatto dell'attivazione di COEP: require-corp senza influire effettivamente sul funzionamento del tuo sito. Puoi configurare questa intestazione per inviare i report allo stesso server di report impostato nel passaggio precedente.

Nota: puoi anche attivare la colonna Dominio nel riquadro Rete di Chrome DevTools per avere una visione generale delle risorse interessate.

Attenzione: l'attivazione dell'isolamento multiorigine bloccherà il caricamento delle risorse multiorigine che non attivi esplicitamente e impedirà al documento di primo livello di comunicare con le finestre popup. Stiamo esplorando i modi per eseguire il deployment di Cross-Origin-Resource-Policy su larga scala, poiché l'isolamento multiorigine richiede l'attivazione esplicita di tutte le risorse secondarie. Abbiamo quindi pensato di andare nella direzione opposta: una nuova modalità "senza credenziali" COEP che consente di caricare le risorse senza l'intestazione CORP rimuovendo tutte le credenziali. Ci auguriamo che questa soluzione ti semplifichi il compito di assicurarti che le risorse secondarie inviino l'intestazione Cross-Origin-Resource-Policy. Sebbene la modalità credentialless sia disponibile su Chrome dalla versione 96, non è ancora supportata da altri browser. Per questo motivo, in questa fase alcuni sviluppatori potrebbero riscontrare difficoltà a implementare COOP o COEP. Inoltre, è noto che l'intestazione Cross-Origin-Opener-Policy: same-origin interrompe le integrazioni che richiedono interazioni con finestre cross-origin, come OAuth e pagamenti. Per ovviare a questo problema, stiamo valutando la possibilità di allentare la condizione per attivare l'isolamento multiorigine per Cross-Origin-Opener-Policy: same-origin-allow-popups. In questo modo sarà possibile la comunicazione con la finestra aperta automaticamente. Se vuoi attivare l'isolamento tra origini, ma non riesci a farlo a causa di questi problemi, ti consigliamo di registrarti per una prova dell'origine e di attendere che le nuove modalità siano disponibili. Non prevediamo di terminare la prova dell'origine finché queste nuove modalità non saranno disponibili.

Ridurre l'impatto dell'isolamento multiorigine

Dopo aver stabilito quali risorse saranno interessate dall'isolamento cross-origin, di seguito sono riportate linee guida generali su come attivare effettivamente queste risorse cross-origin:

1. Nelle risorse multiorigine come immagini, script, fogli di stile, iframe e altro, imposta l'intestazione Cross-Origin-Resource-Policy: cross-origin. Nelle risorse dello stesso sito, imposta l'intestazione Cross-Origin-Resource-Policy: same-site.
2. Per le risorse caricabili utilizzando CORS, assicurati che sia attivata impostando l'attributo crossorigin nel relativo tag HTML (ad es. <img src="example.jpg" crossorigin>). Per la richiesta di recupero JavaScript, assicurati che request.mode sia impostato su cors.
3. Se vuoi utilizzare funzionalità avanzate come SharedArrayBuffer all'interno di un iframe caricato, aggiungi allow="cross-origin-isolated" a <iframe>.
4. Se le risorse cross-origin caricate in iframe o script worker coinvolgono un altro livello di iframe o script worker, applica in modo ricorsivo i passaggi descritti in questa sezione prima di procedere.
5. Dopo aver verificato che tutte le risorse cross-origin sono attivate, imposta l'intestazione Cross-Origin-Embedder-Policy: require-corp su iframe e script worker (questo è obbligatorio indipendentemente dal fatto che le risorse siano dello stesso dominio o di origine diversa).
6. Assicurati che non ci siano finestre popup cross-origin che richiedono la comunicazione tramite postMessage(). non c'è modo di continuare a funzionare se l'isolamento multiorigine è attivo. Puoi spostare la comunicazione in un altro documento che non è isolato tra origini diverse o utilizzare un metodo di comunicazione diverso (ad esempio, richieste HTTP).

Attiva l'isolamento multiorigine

Dopo aver mitigato l'impatto tramite l'isolamento multiorigine, di seguito sono riportate linee guida generali per attivare l'isolamento multiorigine:

1. Imposta l'intestazione Cross-Origin-Opener-Policy: same-origin nel documento di primo livello. Se hai impostato Cross-Origin-Opener-Policy-Report-Only: same-origin, sostituiscilo. In questo modo, viene bloccata la comunicazione tra il documento di primo livello e le relative finestre popup.
2. Imposta l'intestazione Cross-Origin-Embedder-Policy: require-corp nel documento di primo livello. Se hai impostato Cross-Origin-Embedder-Policy-Report-Only: require-corp, sostituiscilo. In questo modo, verrà bloccato il caricamento delle risorse cross-origin che non sono state attivate.
3. Verifica che self.crossOriginIsolated restituisca true nella console per verificare che la tua pagina sia isolata tra origini.

Abilitare l'isolamento multiorigine su un server locale potrebbe essere complicato, in quanto i server semplici non supportano l'invio di intestazioni. Puoi avviare Chrome con un flag della riga di comando --enable-features=SharedArrayBuffer per attivare SharedArrayBuffer senza attivare l'isolamento multiorigine. Scopri come eseguire Chrome con un flag a riga di comando sulle rispettive piattaforme.

Risorse

• Rendere il tuo sito web "isolato da origini diverse" utilizzando COOP e COEP
• Aggiornamenti di SharedArrayBuffer in Chrome per Android 88 e Chrome per computer 92