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 poderosos, como SharedArrayBuffer. Este artigo explica como ativar o isolamento de origem cruzada no seu site.

Eiji Kitamura

Neste guia, mostramos como ativar o isolamento entre origens. O isolamento entre origens é necessário se você quiser usar SharedArrayBuffer, performance.measureUserAgentSpecificMemory() ou timer de alta resolução com maior precisão.

Se você pretende ativar o isolamento entre origens, avalie o impacto que isso vai ter em outros recursos entre origens no seu site, como posicionamentos de anúncios.

Determine onde no seu site o SharedArrayBuffer é usado

A partir do Chrome 92, as funcionalidades que usam SharedArrayBuffer não funcionarão mais sem o isolamento de origem cruzada. Se você chegou a esta página devido a uma mensagem de descontinuação de SharedArrayBuffer, é provável que seu site ou um dos recursos incorporados a ele esteja usando SharedArrayBuffer. Para garantir que nada seja quebrado no seu site devido à descontinuação, comece identificando onde ele é usado.

Se você não sabe em que parte do seu site um SharedArrayBuffer é usado, há duas maneiras de descobrir:

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

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 esteja 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 vem SharedArrayBuffer. Se for uma biblioteca de terceiros, entre em contato com o desenvolvedor para corrigir o problema. Se ele estiver implementado como parte do seu site, siga as instruções abaixo para ativar o isolamento entre origens.

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

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

Alguns navegadores têm uma funcionalidade de relatórios de APIs descontinuadas para um endpoint especificado.

Configure um servidor de relatórios de descontinuação e receba o URL do relatório. Para isso, use um serviço público ou crie um por conta própria.
Usando o URL, defina o seguinte cabeçalho HTTP para páginas que podem estar exibindo SharedArrayBuffer.
```
Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
```
Quando o cabeçalho começar a ser propagado, o endpoint que você registrou vai começar a coletar relatórios de descontinuação.

Confira 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 ativar o isolamento entre origens teria no seu site sem quebrar nada? Os cabeçalhos HTTP Cross-Origin-Opener-Policy-Report-Only e Cross-Origin-Embedder-Policy-Report-Only permitem fazer 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. Ele não desativa a comunicação com janelas pop-up.
Configure 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 permite ver 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 de relatórios que você configurou na etapa anterior.

Cuidado: ativar o isolamento entre origens bloqueia o carregamento de recursos entre origens que você não ativou explicitamente e impede que o documento de nível superior se comunique com janelas pop-up. Estamos buscando maneiras de implantar Cross-Origin-Resource-Policy em grande escala, já que o isolamento de origem cruzada exige que todos os subrecursos sejam ativados explicitamente. E então chegamos à ideia de seguir na direção oposta: um novo modo "sem credenciais" do COEP, que permite carregar recursos sem o cabeçalho CORP, removendo todas as credenciais. Esperamos que isso facilite a verificação de que os subrecursos estão 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. Isso pode fazer com que alguns desenvolvedores tenham dificuldade para implantar o COOP ou o COEP neste estágio. Além disso, o cabeçalho Cross-Origin-Opener-Policy: same-origin vai interromper as integrações que exigem interações de janelas entre origens diferentes, como OAuth e pagamentos. Para atenuar esse problema, estamos relaxando a condição para ativar o isolamento de origem cruzada em Cross-Origin-Opener-Policy: same-origin-allow-popups. Dessa forma, a comunicação com a janela aberta sozinha será possível. Se você quiser ativar o isolamento entre origens, mas estiver bloqueado por esses desafios, recomendamos se inscrever 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.

Reduzir o impacto do isolamento de origem cruzada

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

Em recursos entre origens, 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.
Para recursos que podem ser carregados usando o CORS, verifique se ele está ativado definindo o atributo crossorigin na tag HTML (por exemplo, <img src="example.jpg" crossorigin>). Para a solicitação de busca do 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 worker envolverem outra camada de iframes ou scripts worker, aplique recursivamente as etapas descritas nesta seção antes de prosseguir.
Depois de confirmar que todos os recursos entre origens estão ativados, defina o cabeçalho Cross-Origin-Embedder-Policy: require-corp em iframes e scripts de worker. Isso é necessário independentemente de origem única ou entre origens.
Verifique se não há janelas pop-up entre origens que exigem comunicação por postMessage(). Não é possível mantê-los funcionando quando o isolamento entre origens diferentes 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 entre origens

Depois de mitigar o impacto com o isolamento de origem cruzada, siga estas 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-a. 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-o. Isso vai bloquear o carregamento de recursos entre origens que não foram ativados.
Verifique se self.crossOriginIsolated retorna true no console para verificar se a página está isolada entre origens.

Ativar o isolamento entre origens em um servidor local pode ser difícil, já que servidores simples não oferecem suporte ao envio de cabeçalhos. É possível iniciar o Chrome com uma flag de linha de comando --enable-features=SharedArrayBuffer para ativar SharedArrayBuffer sem ativar o isolamento entre origens. Saiba como executar o Chrome com uma flag de linha de comando nas respectivas plataformas.