O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

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

Eiji Kitamura

Este guia mostra como ativar o isolamento de origem cruzada. O isolamento de origem cruzada é necessário se você quiser usar SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), ou um timer de alta resolução com melhor precisão.

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

Determinar onde o `SharedArrayBuffer` é usado no seu site

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

Se você não tiver certeza de onde um SharedArrayBuffer é usado no seu site, há duas maneiras de descobrir:

Usando o Chrome DevTools
(Avançado) Usando 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.

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  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 ele for implementado como parte do seu site, siga o guia abaixo para ativar o isolamento de origem cruzada.

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

(Avançado) Usando relatórios de suspensão de uso

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

Configure um servidor de relatórios de suspensão de uso e receba o URL de relatórios. Para isso, use um serviço público ou crie um.

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

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

Depois que o cabeçalho começar a ser propagado, o endpoint registrado vai começar a coletar relatórios de suspensão de uso.

Confira um exemplo de implementação.

Analisar o impacto do isolamento de origem cruzada

Não seria ótimo se você pudesse avaliar o impacto da ativação do isolamento de origem cruzada 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 isso.

Defina Cross-Origin-Opener-Policy-Report-Only: same-origin no documento de nível superior. Como o nome indica, esse cabeçalho envia apenas relatórios sobre o impacto que 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 que você veja o impacto da ativação de COEP: require-corp sem afetar o funcionamento do seu site. Você pode configurar esse cabeçalho para enviar relatórios ao mesmo servidor de relatórios configurado na etapa anterior.

Atenção:a ativação do isolamento entre origens vai bloquear o carregamento de recursos entre origens que você não ativar explicitamente e vai impedir 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 ativados explicitamente.
E tivemos 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. Esperamos que isso alivie o trabalho de garantir que os sub-recursos estejam enviando o Cross-Origin-Resource-Policy header.
Embora o credentialless mode esteja disponível no Chrome a partir da versão 96, ele ainda não é compatível com outros navegadores. Isso pode dificultar a implantação do COOP ou do COEP para alguns desenvolvedores nesta fase.
Além disso, o Cross-Origin-Opener-Policy: same-origin header interrompe integrações que exigem interações de janelas de origem cruzada, como OAuth e pagamentos. Para atenuar esse problema, estamos explorando a condição de relaxamento para ativar 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 estiver bloqueado por esses desafios, recomendamos que se inscreva em um teste de origem e aguarde até que os novos modos estejam disponíveis. Não planejamos encerrar o teste de origem até que esses novos modos estejam disponíveis.

Mitigar o impacto do isolamento de origem cruzada

Depois de determinar quais recursos serão afetados pelo isolamento de origem cruzada, confira as 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 Cross-Origin-Resource-Policy:cross-origin cabeçalho. Em recursos do mesmo site, defina o cabeçalho Cross-Origin-Resource-Policy:same-site.
Para recursos carregáveis usando CORS, verifique se ele está ativado definindo o atributo crossorigin na tag HTML (por exemplo, <img src="example.jpg" crossorigin>). Para solicitações 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 de worker envolverem outra camada de iframes ou scripts de worker, aplique recursivamente as etapas descritas nesta seção antes de continuar.
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 da origem ser a mesma ou entre origens.
Verifique se não há janelas pop-up entre origens que exijam comunicação por postMessage(). Não é possível mantê-las funcionando quando o isolamento de origem cruzada está ativado. Você pode mover a comunicação para outro documento que não esteja 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 mitigar o impacto do isolamento de origem cruzada, confira 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ê tiver definido Cross-Origin-Opener-Policy-Report-Only: same-origin, substitua-o. 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ê tiver definido Cross-Origin-Embedder-Policy-Report-Only: require-corp, substitua-o. Isso vai bloquear o carregamento de recursos entre origens que não estão ativados.
Verifique se self.crossOriginIsolated retorna true no console para verificar se a página está isolada de origem cruzada.

A ativação do isolamento de origem cruzada em um servidor local pode ser difícil, já que servidores simples não oferecem suporte ao envio de cabeçalhos. 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. Saiba como executar o Chrome com uma flag de linha de comando nas respectivas plataformas.