Questa pagina è stata tradotta dall'API Cloud Translation.

Una guida per attivare l'isolamento multiorigine

L'isolamento multiorigine consente a una pagina web di utilizzare funzionalità avanzate come SharedArraybu. 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 un timer ad alta risoluzione con precisione migliore.

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

Determina dove viene utilizzato SharedArrayBuffer nel tuo sito web

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

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

Utilizzare Chrome DevTools
(Livello avanzato) Utilizzare i report sul ritiro

Se sai già dove stai utilizzando SharedArrayBuffer, passa 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 temi possa utilizzare SharedArrayBuffer.
Seleziona il riquadro Console.

Se la pagina usa SharedArrayBuffer, verrà 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

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 come parte del tuo sito web, segui la guida riportata di seguito per attivare l'isolamento multiorigine.

Avviso della console DevToools quando viene utilizzato SharedArraybu senza isolamento multiorigine.

(Livello avanzato) Utilizzare i report sul ritiro

Alcuni browser hanno una funzionalità di reporting che consente di deprecare le API in un endpoint specificato.

Configura un server di report sul ritiro e recupera l'URL dei report. A questo scopo, puoi utilizzare un servizio pubblico o crearne uno tu.
Utilizzando l'URL, imposta la seguente intestazione HTTP sulle pagine che potrebbero pubblicare SharedArrayBuffer.
```
Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
```
Una volta avviata la propagazione dell'intestazione, l'endpoint in cui hai effettuato la registrazione dovrebbe iniziare a raccogliere report sul ritiro.

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

Analizza l'impatto dell'isolamento multiorigine

Non sarebbe fantastico se potessi valutare l'impatto che l'attivazione dell'isolamento multiorigine avrebbe sul tuo sito senza causare danni? 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 sul documento di primo livello. Come indica il nome, questa intestazione invia solo report sull'impatto che COOP: same-origin potrebbe avere sul tuo sito e non disattiva la comunicazione con le finestre popup.
Imposta i report e configura un server web per ricevere e salvare i report.
Imposta Cross-Origin-Embedder-Policy-Report-Only: require-corp sul documento di primo livello. Ancora una volta, questa intestazione ti consente di vedere l'impatto dell'attivazione di COEP: require-corp senza influire effettivamente sul funzionamento del sito. Puoi configurare questa intestazione in modo che invii i report allo stesso server di reporting che hai configurato nel passaggio precedente.

Attenzione: l'attivazione dell'isolamento multiorigine impedirà il caricamento delle risorse multiorigine che non attivi esplicitamente e impedirà al documento di primo livello di comunicare con le finestre popup. 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. Abbiamo l'idea di andare nella direzione opposta: una nuova modalità COEP "senza credenziali" che consente di caricare le risorse senza l'intestazione CORP rimuovendo tutte le loro credenziali. Ci auguriamo che questo alleggerisci il tuo compito di assicurarti che le sottorisorse inviino l'intestazione Cross-Origin-Resource-Policy. Anche se la modalità credentialless è disponibile su Chrome dalla versione 96, non è ancora supportata da altri browser, per questo alcuni sviluppatori potrebbero trovare difficile distribuire COOP o COEP in questa fase. Inoltre, è risaputo che l'intestazione Cross-Origin-Opener-Policy: same-origin interromperà le integrazioni che richiedono interazioni con finestre multiorigine, come OAuth e pagamenti. Per ridurre il problema, stiamo cercando di allentare la condizione per attivare l'isolamento multiorigine a Cross-Origin-Opener-Policy: same-origin-allow-popups. In questo modo sarà possibile comunicare con la finestra aperta da sola. Se vuoi attivare l'isolamento multiorigine, ma il problema è bloccato da queste verifiche, ti consigliamo di registrarti per una prova dell'origine e attendere che siano disponibili le nuove modalità. Non abbiamo in programma di terminare la prova dell'origine finché queste nuove modalità non saranno disponibili.

Mitigare l'impatto dell'isolamento multiorigine

Dopo aver determinato quali risorse saranno interessate dall'isolamento multiorigine, ecco le linee guida generali su come attivarle effettivamente:

Per le risorse multiorigine come immagini, script, fogli di stile, iframe e altre, imposta l'intestazione Cross-Origin-Resource-Policy: cross-origin. Sulle risorse dello stesso sito, imposta l'intestazione Cross-Origin-Resource-Policy: same-site.
Per le risorse caricabili tramite CORS, assicurati che sia attivato impostando l'attributo crossorigin 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à efficaci come SharedArrayBuffer all'interno di un iframe caricato, aggiungi allow="cross-origin-isolated" a <iframe>.
Se le risorse multiorigine caricate in iframe o script worker coinvolgono un altro livello di script iframe o worker, applica in modo ricorsivo i passaggi descritti in questa sezione prima di andare avanti.
Dopo aver confermato che tutte le risorse multiorigine sono state attivate, imposta l'intestazione Cross-Origin-Embedder-Policy: require-corp su iframe e script worker (questa operazione è obbligatoria indipendentemente dalla stessa origine o multiorigine).
Assicurati che non esistano finestre popup multiorigine che richiedono la comunicazione tramite postMessage(). Quando l'isolamento multiorigine è attivato, non c'è modo di mantenerli operativi. Puoi spostare la comunicazione in un altro documento non isolato multiorigine oppure utilizzare un metodo di comunicazione diverso (ad esempio richieste HTTP).

Attivare l'isolamento multiorigine

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

Imposta l'intestazione Cross-Origin-Opener-Policy: same-origin sul documento di primo livello. Se avevi impostato Cross-Origin-Opener-Policy-Report-Only: same-origin, sostituiscilo. Questo blocca la comunicazione tra il documento di primo livello e le relative finestre popup.
Imposta l'intestazione Cross-Origin-Embedder-Policy: require-corp sul documento di primo livello. Se avevi impostato Cross-Origin-Embedder-Policy-Report-Only: require-corp, sostituiscilo. Questa operazione bloccherà il caricamento delle risorse multiorigine che non sono state attivate.
Controlla che self.crossOriginIsolated restituisca true nella console per verificare che la pagina abbia isolamento multiorigine.

Abilitare l'isolamento multiorigine su un server locale potrebbe essere un problema, poiché i server semplici non supportano l'invio delle 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.