Um guia para permitir o isolamento da origem cruzada
O isolamento da origem cruzada permite que uma página web use recursos poderosos, como SharedArrayBuffer. Este artigo explica como habilitar o isolamento da origem cruzada no seu site.
Este guia mostra como habilitar o isolamento de origem cruzada. O isolamento de origem cruzada é necessário se você deseja usar SharedArrayBuffer
, performance.measureUserAgentSpecificMemory()
ou cronômetro de alta resolução com melhor precisão.
Se você pretende ativar o isolamento de origem cruzada, avalie o impacto que isso terá em outros recursos de origem cruzada em seu site, como canais de anúncios. A partir do Chrome 92, as funcionalidades que usam Se você não tiver certeza de onde em seu site um Se você já sabe onde está usando O Chrome DevTools permite que os desenvolvedores inspecionem sites. Alguns navegadores têm uma funcionalidade que relata APIs deprecadas para um determinado endpoint. Veja um exemplo de implementação aqui: https://cross-origin-isolation.glitch.me .Determine onde o
SharedArrayBuffer
é usado em seu site SharedArrayBuffer
não funcionarão mais sem o isolamento de origem cruzada. Se você acessou esta página devido a uma SharedArrayBuffer
, é provável que seu site ou um dos recursos incorporados a ele esteja usando SharedArrayBuffer
. Para garantir que nada seja interrompido em seu site devido à suspensão do uso, comece identificando onde ele é usado.SharedArrayBuffer
é usado, há duas maneiras de descobrir:SharedArrayBuffer
, vá para Analisar o impacto do isolamento de origem cruzada .Usando Chrome DevTools #
SharedArrayBuffer
.SharedArrayBuffer
, a seguinte mensagem será exibida:[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
common-bundle.js:535
) indicam de onde o SharedArrayBuffer
está vindo. Se for uma biblioteca de terceiros, entre em contato com o desenvolvedor para corrigir o problema. Se for implementado como parte do seu site, siga o guia abaixo para habilitar o isolamento de origem cruzada.(Avançado) Usando Deprecation Reporting #
SharedArrayBuffer
.Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
Analise o impacto do isolamento de origem cruzada #
Não seria ótimo se você pudesse avaliar o impacto que a ativação do isolamento de origem cruzada teria em seu site sem realmente quebrar nada? Os cabeçalhos HTTP Cross-Origin-Opener-Policy-Report-Only
e Cross-Origin-Embedder-Policy-Report-Only
permitem que você faça exatamente isso.
- Defina
Cross-Origin-Opener-Policy-Report-Only: same-origin
em seu documento de nível superior. Como o nome indica, este cabeçalho apenas envia relatórios sobre o impacto queCOOP: same-origin
teria em seu site - ele não desabilitará a comunicação com janelas pop-up. - Configure relatórios e configure um servidor web para receber e salvar os relatórios.
- Defina
Cross-Origin-Embedder-Policy-Report-Only: require-corp
em seu documento de nível superior. Novamente, este cabeçalho permite que você veja o impacto de habilitarCOEP: require-corp
sem realmente afetar o funcionamento do seu site ainda. Você pode configurar este cabeçalho para enviar relatórios ao mesmo servidor de relatórios que configurou na etapa anterior.
Mitigação do impacto do isolamento de origem cruzada #
Depois de determinar quais recursos serão afetados pelo isolamento de origem cruzada, aqui estão as diretrizes gerais de como você ativa esses recursos de origem cruzada:
- Em recursos de origem cruzada, como imagens, scripts, folhas de estilo, iframes e outros, defina o cabeçalho
Cross-Origin-Resource-Policy: cross-origin
Em recursos do mesmo site, defina o cabeçalhoCross-Origin-Resource-Policy: same-site
. - Defina o atributo
crossorigin
na tag HTML no documento de nível superior se o recurso for servido com CORS (por exemplo,<img src="example.jpg" crossorigin>
). - Se os recursos de origem cruzada carregados em iframes envolverem outra camada de iframes, aplique recursivamente as etapas descritas nesta seção antes de prosseguir.
- Depois de confirmar que todos os recursos de origem cruzada estão incluídos, defina o cabeçalho
Cross-Origin-Embedder-Policy: require-corp
nos recursos de origem cruzada carregados em iframes. - Certifique-se de que não haja janelas pop-up de origem cruzada que exijam comunicação por meio de
postMessage()
. Não há como mantê-los funcionando quando o isolamento de origem cruzada está habilitado. Você pode mover a comunicação para outro documento que não tenha isolamento de origem cruzada ou usar um método de comunicação diferente (por exemplo, solicitações HTTP).
Ativação do isolamento de origem cruzada #
Depois de ter mitigado o impacto através do isolamento de origem cruzada, aqui estão as diretrizes gerais para permitir o isolamento de origem cruzada:
- Defina o cabeçalho
Cross-Origin-Opener-Policy: same-origin
em seu documento de nível superior. Se você configurouCross-Origin-Opener-Policy-Report-Only: same-origin
, substitua-o. Isto bloqueia a comunicação entre o documento de nível superior e suas janelas pop-up. - Defina o cabeçalho
Cross-Origin-Embedder-Policy: require-corp
em seu documento de nível superior. Se você configurouCross-Origin-Embedder-Policy-Report-Only: require-corp
, substitua-o. Isto bloqueará o carregamento de recursos de origem cruzada que não estejam ativados. - Verifique se
self.crossOriginIsolated
retornatrue
no console para verificar se sua página tem isolamento de origem cruzada.
Recursos #
- Deixando seu site com "isolamento de origem cruzada" usando COOP e COEP
- Atualizações de SharedArrayBuffer no Android Chrome 88 e Desktop Chrome 92