Google utilizza la tecnologia AI per tradurre i contenuti nella tua lingua preferita. Le traduzioni generate dall'AI potrebbero contenere errori.

Una guida per attivare l'isolamento multiorigine

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

Eiji Kitamura

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

Se intendi attivare l'isolamento multiorigine, valuta l'impatto che avrà su altre risorse multiorigine del tuo sito web, ad esempio i posizionamenti degli annunci.

Determinare dove viene utilizzato `SharedArrayBuffer` nel tuo sito web

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

Se non sai dove viene utilizzato SharedArrayBuffer nel tuo sito, puoi scoprirlo in due modi:

Utilizzare Chrome DevTools
(Avanzato) Utilizzare i report sul ritiro

Se sai già dove utilizzi SharedArrayBuffer, vai ad Analizzare l'impatto dell'isolamento multiorigine.

Utilizzare Chrome DevTools

Chrome DevTools consente agli sviluppatori di ispezionare i siti web.

Apri Chrome DevTools nella pagina che sospetti possa utilizzare SharedArrayBuffer.
Seleziona il riquadro Console.

Se la pagina utilizza SharedArrayBuffer, verrà visualizzato il seguente messaggio:

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See  for more details. common-bundle.js:535

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

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

(Avanzato) Utilizzare i report sul ritiro

Alcuni browser hanno una funzionalità di reporting delle API in fase di ritiro a un endpoint specificato.

Configura un server di report sul ritiro e recupera l'URL di reporting. Puoi farlo utilizzando un servizio pubblico o creandone uno tuo.
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"}]}
```
Una volta che l'intestazione inizia a propagarsi, l'endpoint a cui ti sei registrato dovrebbe iniziare a raccogliere i report sul ritiro.

Consulta un'implementazione di esempio.

Analizzare l'impatto dell'isolamento multiorigine

Non sarebbe fantastico se potessi valutare l'impatto dell'attivazione dell'isolamento multiorigine sul tuo sito senza causare interruzioni? Le intestazioni HTTP Cross-Origin-Opener-Policy-Report-Only e Cross-Origin-Embedder-Policy-Report-Only ti consentono di farlo.

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

Attenzione: l'attivazione dell'isolamento multiorigine bloccherà il caricamento delle risorse multiorigine per cui non hai attivato esplicitamente l'opzione e impedirà al documento di primo livello di comunicare con le finestre popup. Abbiamo esplorato i modi per eseguire il deployment di Cross-Origin-Resource-Policy su larga scala, poiché l'isolamento multiorigine richiede che tutte le risorse secondarie attivino esplicitamente l'opzione.
Abbiamo quindi pensato di andare nella direzione opposta: una nuova modalità "senza credenziali" di COEP che consente di caricare le risorse senza l'intestazione CORP rimuovendo tutte le credenziali. Ci auguriamo che questo riduca il tuo carico di lavoro per 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, il che potrebbe rendere difficile per alcuni sviluppatori eseguire il deployment di COOP o COEP in questa fase.
Inoltre, è noto che l'intestazione Cross-Origin-Opener-Policy: same-origin interromperà le integrazioni che richiedono interazioni tra finestre multiorigine, come OAuth e pagamenti. Per attenuare questo problema, stiamo valutando di allentare la condizione per attivare l'isolamento multiorigine a 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 non riesci a causa di queste difficoltà, ti consigliamo di registrarti per un origin trial e di attendere la disponibilità delle nuove modalità. Non prevediamo di terminare l'origin trial finché non saranno disponibili queste nuove modalità.

Attenuare l'impatto dell'isolamento multiorigine

Dopo aver determinato quali risorse saranno interessate dall'isolamento multiorigine, ecco le linee guida generali su come attivare effettivamente l'opzione per queste risorse multiorigine:

Nelle risorse multiorigine come immagini, script, fogli di stile, iframe e altro ancora, imposta l'Cross-Origin-Resource-Policy:cross-origin intestazione. Nelle risorse dello stesso sito, imposta Cross-Origin-Resource-Policy:same-site intestazione.
Per le risorse caricabili tramite CORS, assicurati che sia attivato impostando l'crossorigin attributo nel tag HTML (ad esempio, <img src="example.jpg" crossorigin>). Per la richiesta di recupero JavaScript, assicurati che request.mode sia impostato su cors.
Se vuoi utilizzare funzionalità avanzate come SharedArrayBuffer all'interno di un iframe caricato, aggiungi allow="cross-origin-isolated" a <iframe>.
Se le risorse multiorigine caricate in script iframe o worker coinvolgono un altro livello di script iframe o worker, applica in modo ricorsivo i passaggi descritti in questa sezione prima di procedere.
Una volta confermato che tutte le risorse multiorigine hanno attivato l'opzione, imposta l'intestazione Cross-Origin-Embedder-Policy: require-corp su script iframe e worker (è obbligatorio indipendentemente dall'origine o dall'origine diversa).
Assicurati che non ci siano finestre popup multiorigine che richiedono la comunicazione tramite postMessage(). Non è possibile mantenerle attive quando è attivato l'isolamento multiorigine. Puoi spostare la comunicazione in un altro documento che non è con isolamento multiorigine oppure utilizzare un metodo di comunicazione diverso (ad esempio, richieste HTTP).

Attivare l'isolamento multiorigine

Dopo aver attenuato l'impatto dell'isolamento multiorigine, ecco le linee guida generali per attivare l'isolamento multiorigine:

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, sostituiscila. In questo modo viene bloccata la comunicazione tra il documento di primo livello e le relative finestre popup.
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, sostituiscila. In questo modo verrà bloccato il caricamento delle risorse multiorigine per cui non è stata attivata l'opzione.
Controlla che self.crossOriginIsolated restituisca true nella console per verificare che la pagina sia con isolamento multiorigine.

L'attivazione dell'isolamento multiorigine su un server locale potrebbe essere complicata, poiché 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 della riga di comando sulle rispettive piattaforme.