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.
Determine onde o SharedArrayBuffer
é usado em seu site A partir do Chrome 92, as funcionalidades que usam 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
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.Se você não tiver certeza de onde em seu site um SharedArrayBuffer
é usado, há duas maneiras de descobrir:
- Usando Chrome DevTools
- (Avançado) Usando Deprecation Reporting
Se você já sabe onde está usando SharedArrayBuffer
, vá para Analisar o impacto do isolamento de origem cruzada .
Usando Chrome DevTools #
O Chrome DevTools permite que os desenvolvedores inspecionem sites.
- Abra o Chrome DevTools na página que você suspeita estar usando
SharedArrayBuffer
. - Selecione o painel Console.
- Se a página estiver usando
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
- O nome do arquivo e o número da linha no final da mensagem (por exemplo,
common-bundle.js:535
) indicam de onde oSharedArrayBuffer
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 #
Alguns navegadores têm uma funcionalidade que relata APIs deprecadas para um determinado endpoint.
- Configure um servidor de relatório de deprecação e obtenha a URL do relatório. Você pode conseguir isto usando um serviço público ou instalando um você mesmo.
- Usando a URL, defina o seguinte cabeçalho HTTP para páginas que estão potencialmente servindo
SharedArrayBuffer
.Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
- Assim que o cabeçalho começar a se propagar, o endpoint no qual você se registrou deve começar a coletar relatórios de deprecação.
Veja um exemplo de implementação aqui: https://cross-origin-isolation.glitch.me .
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