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.

Feb 9, 2021 — Atualizado Aug 5, 2021

Available in: Deutsch, English, Español, Français, Русский, 中文, 日本語 e 한국어

Eiji Kitamura

Twitter GitHub Homepage

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.

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 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.

Aviso do console DevToools quando SharedArrayBuffer é usado sem 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 que COOP: 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 habilitar COEP: 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.

Cuidado

Habilitar o isolamento de origem cruzada bloqueará o carregamento de recursos de origem cruzada que você não ativou explicitamente e impedirá que seu documento de nível superior seja capaz de se comunicar com janelas pop-up. Temos explorado maneiras de implantar a Cross-Origin-Resource-Policy em escala, já que o isolamento de origem cruzada requer que todos os sub-recursos optem por isso explicitamente. Então tivemos a ideia de ir na direção oposta: um novo modo COEP "credentialess" que permite carregar recursos sem o cabeçalho CORP removendo todas as suas credenciais. Estamos descobrindo os detalhes de como isso deve funcionar, mas esperamos que isto alivie seu fardo de garantir que os sub-recursos estejam enviando o cabeçalho Cross-Origin-Resource-Policy Além disso, sabe-se que o cabeçalho Cross-Origin-Opener-Policy: same-origin quebrará integrações que requerem interações de janela de origem cruzada, como OAuth e pagamentos. Para atenuar esse problema, estamos explorando o relaxamento da condição para permitir o isolamento de origem Cross-Origin-Opener-Policy: same-origin-allow-popups. Desta forma, a comunicação com a janela aberta por ela mesma será possível. Se você deseja habilitar o isolamento de origem cruzada, mas está impedido por esses desafios, recomendamos registrar-se para um teste de origem e aguardar até que os novos modos estejam disponíveis. Não planejamos encerrar o teste de origem até que esses novos modos estejam disponíveis.

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çalho Cross-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ê configurou Cross-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ê configurou Cross-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 retorna true no console para verificar se sua página tem isolamento de origem cruzada.

Recursos #

Last updated: Aug 5, 2021 — Improve article

Return to all articles

assinar