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.

Questa guida mostra come attivare l'isolamento cross-origin. L'isolamento tra origini è obbligatorio se vuoi utilizzare SharedArrayBuffer, performance.measureUserAgentSpecificMemory() o il timer ad alta risoluzione con una maggiore precisione.

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.

Se non sai con certezza dove viene utilizzato un SharedArrayBuffer nel tuo sito, hai 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 di DevTools quando SharedArrayBuffer viene utilizzato senza isolamento multiorigine
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. Puoi farlo utilizzando un servizio pubblico o creandone 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.

Un esempio di implementazione è disponibile 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 farlo.

  1. Imposta Cross-Origin-Opener-Policy-Report-Only: same-origin nel 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 un server web per ricevere e salvare i report.
  3. Imposta Cross-Origin-Embedder-Policy-Report-Only: require-corp nel documento di primo livello. Anche in questo caso, questa intestazione ti consente di vedere l'impatto dell'attivazione di COEP: require-corp senza influire ancora sul funzionamento del tuo sito. Puoi configurare questa intestazione per inviare i report allo stesso server di reporting configurato nel passaggio precedente.

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 cross-origin come immagini, script, fogli di stile, iframe e altre, 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 o di origini diverse).
  6. Assicurati che non ci siano finestre popup cross-origin che richiedono la comunicazione tramite postMessage(). Non è possibile continuare a utilizzarle quando è attivato l'isolamento cross-origin. 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).

Abilita l'isolamento cross-origin

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.

Risorse