Esta página foi traduzida pela API Cloud Translation.

Um guia para ativar o isolamento de origem cruzada

O isolamento de origem cruzada permite que uma página da Web use recursos avançados, como o SharedArrayBuffer. Neste artigo, explicamos como ativar o isolamento de origem cruzada no seu site.

Eiji Kitamura

Neste guia, mostramos como ativar o isolamento de origem cruzada. O isolamento de origem cruzada é necessário para usar SharedArrayBuffer, performance.measureUserAgentSpecificMemory() ou tempo de alta resolução com melhor precisão.

Se você quiser ativar o isolamento de origem cruzada, avalie o impacto que isso terá em outros recursos de origem cruzada no seu site, como canais de anúncios.

Determine onde o SharedArrayBuffer é usado no 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ê foi direcionado para esta página por causa de uma mensagem de descontinuação de SharedArrayBuffer, é provável que seu site ou um dos recursos incorporados nele esteja usando SharedArrayBuffer. Para garantir que nada seja corrompido no seu site devido à descontinuação, identifique onde ele é usado.

Se você não sabe onde o SharedArrayBuffer é usado no site, existem duas maneiras de descobrir:

Como usar o Chrome DevTools
(Avançado) Como usar os relatórios de descontinuação

Se você já sabe onde está usando SharedArrayBuffer, pule para Analisar o impacto do isolamento de origem cruzada.

Como usar o Chrome DevTools

O Chrome DevTools permite que os desenvolvedores inspecionem sites.

Abra o Chrome DevTools na página que você suspeita que está 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 vem. Se for uma biblioteca de terceiros, entre em contato com o desenvolvedor para corrigir o problema. Se ele for implementado como parte do seu site, siga o guia abaixo para ativar o isolamento de origem cruzada.

Aviso do DevToools Console quando SharedArrayBuffer é usado sem isolamento de origem cruzada — Aviso do console DevToools quando o SharedArrayBuffer é usado sem isolamento de origem cruzada.

(Avançado) Como usar os relatórios de descontinuação

Alguns navegadores têm uma funcionalidade de relatórios de descontinuação das APIs para um endpoint especificado.

Configurar um servidor de relatórios de descontinuação e acessar o URL de relatório. Para fazer isso, use um serviço público ou crie um por conta própria.

Usando o URL, defina o seguinte cabeçalho HTTP como páginas que podem exibir SharedArrayBuffer.

Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}

Quando a propagação do cabeçalho começar, o endpoint em que você se registrou começará a coletar relatórios de descontinuação.

Veja um exemplo de implementação aqui: https://cross-origin-isolation.glitch.me.

Analisar 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 no seu site sem causar danos? 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 no documento de nível superior. Como o nome indica, esse cabeçalho só envia relatórios sobre o impacto que o COOP: same-origin teria no seu site. Na verdade, ele não desativa a comunicação com janelas pop-up.
Configurar os relatórios e um servidor da Web para receber e salvar os relatórios.
Defina Cross-Origin-Embedder-Policy-Report-Only: require-corp no documento de nível superior. Novamente, esse cabeçalho mostra o impacto da ativação de COEP: require-corp sem afetar o funcionamento do site. É possível configurar esse cabeçalho para enviar relatórios ao mesmo servidor configurado na etapa anterior.

Atenção : ativar o isolamento de origem cruzada bloqueia o carregamento de recursos de origem cruzada que você não ativou explicitamente e impede que o documento de nível superior se comunique com janelas pop-up. Estamos explorando maneiras de implantar Cross-Origin-Resource-Policy em escala, já que o isolamento de origem cruzada exige que todos os sub-recursos sejam explicitamente ativados. E temos a ideia de ir na direção oposta: um novo modo "sem credenciais" do COEP que permite carregar recursos sem o cabeçalho CORP, removendo todas as credenciais deles. Esperamos que isso alivie o trabalho de garantir que os sub-recursos estejam enviando o cabeçalho Cross-Origin-Resource-Policy. Embora o modo credentialless esteja disponível no Chrome a partir da versão 96, ele ainda não é compatível com outros navegadores. No entanto, alguns desenvolvedores têm dificuldade para implantar o COOP ou o COEP no momento. Além disso, o cabeçalho Cross-Origin-Opener-Policy: same-origin corrompe as integrações que exigem interações de janela entre origens, como OAuth e pagamentos. Para atenuar esse problema, estamos testando o relaxamento da condição para permitir o isolamento de origem cruzada para Cross-Origin-Opener-Policy: same-origin-allow-popups. Dessa forma, a comunicação com a janela aberta por si só será possível. Se você quiser ativar o isolamento de origem cruzada, mas for bloqueado por esses desafios, recomendamos se registrar em 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.

Reduzir o impacto do isolamento de origem cruzada

Depois de determinar quais recursos serão afetados pelo isolamento de origem cruzada, veja as diretrizes gerais sobre como ativar esses recursos:

Em recursos de origem cruzada, como imagens, scripts, folhas de estilo, iframes e outros, defina o cabeçalho Cross-Origin-Resource-Policy: cross-origin. Nos recursos no mesmo site, defina o cabeçalho Cross-Origin-Resource-Policy: same-site.
Para recursos que podem ser carregados usando CORS, verifique se ele está ativado, definindo o atributo crossorigin na tag HTML (por exemplo, <img src="example.jpg" crossorigin>). Para solicitação de busca JavaScript, verifique se request.mode está definido como cors.
Se você quiser usar recursos avançados, como SharedArrayBuffer, em um iframe carregado, anexe allow="cross-origin-isolated" ao <iframe>.
Se os recursos de origem cruzada carregados em iframes ou scripts de worker envolverem outra camada de iframes ou scripts de worker, aplique as etapas descritas nesta seção de maneira recursiva antes de avançar.
Depois de confirmar que todos os recursos de origem cruzada estão ativados, defina o cabeçalho Cross-Origin-Embedder-Policy: require-corp em iframes e scripts de worker. Isso é obrigatório independente de origens iguais ou cruzadas.
Verifique se não há janelas pop-up de origem cruzada que exijam comunicação pelo postMessage(). Não há como mantê-los funcionando quando o isolamento de origem cruzada está ativado. É possível mover a comunicação para outro documento que não seja isolado de origem cruzada ou usar um método de comunicação diferente (por exemplo, solicitações HTTP).

Ativar o isolamento de origem cruzada

Depois de reduzir o impacto do isolamento de origem cruzada, veja abaixo as diretrizes gerais para ativar o isolamento de origem cruzada:

Defina o cabeçalho Cross-Origin-Opener-Policy: same-origin no documento de nível superior. Se você definiu Cross-Origin-Opener-Policy-Report-Only: same-origin, substitua. Isso bloqueia a comunicação entre o documento de nível superior e as janelas pop-up.
Defina o cabeçalho Cross-Origin-Embedder-Policy: require-corp no documento de nível superior. Se você definiu Cross-Origin-Embedder-Policy-Report-Only: require-corp, substitua. Isso vai bloquear o carregamento de recursos de origem cruzada que não estão ativados.
Verifique se self.crossOriginIsolated retorna true no console para conferir se sua página tem isolamento de origem cruzada.

Ativar o isolamento de origem cruzada em um servidor local pode ser um problema, já que servidores simples não dão suporte a cabeçalhos de envio. Você pode iniciar o Chrome com uma flag de linha de comando --enable-features=SharedArrayBuffer para ativar SharedArrayBuffer sem ativar o isolamento de origem cruzada. Aprenda a executar o Chrome com uma flag de linha de comando nas respectivas plataformas.