Cinevva

Português (Brasil)

English
简体中文
한국어
हिन्दी
Español
Français
Türkçe
Bahasa Indonesia

Português (Brasil)

English
简体中文
한국어
हिन्दी
Español
Français
Türkçe
Bahasa Indonesia

Tema

Verificador de Isolamento entre Origens ​

Insira a URL de qualquer site para descobrir se ele está isolado entre origens e se SharedArrayBuffer e WebAssembly multithread funcionarão nele. O verificador lê os cabeçalhos de resposta Cross-Origin-Opener-Policy e Cross-Origin-Embedder-Policy da URL e informa o que está faltando. Ele lê apenas os cabeçalhos; nada mais é obtido ou armazenado.

Por que o isolamento entre origens é importante para jogos web ​

Alguns dos recursos mais úteis dos navegadores ficam bloqueados por trás do isolamento entre origens e, para jogos, o principal deles é o SharedArrayBuffer, a memória compartilhada que torna possível o WebAssembly multithread. Se seu motor disponibiliza uma versão web com múltiplas threads, ela não funcionará sem isso:

  • As exportações web do Godot historicamente exigiam SharedArrayBuffer (o Godot 4.3+ adicionou uma exportação de thread única para dispensar os cabeçalhos).
  • As versões WebGL multithread do Unity precisam dele.
  • Pthreads do Emscripten, ffmpeg.wasm e muitas bibliotecas de física e codecs também precisam dele.

Sem o isolamento, o navegador também restringe temporizadores de alta resolução e performance.measureUserAgentSpecificMemory(). Portanto, se um jogo multithread falhar silenciosamente ao carregar ou performance.now() parecer estranhamente impreciso, verificar o isolamento é a primeira coisa a fazer.

Como funciona o isolamento entre origens ​

Uma página se torna isolada entre origens quando envia dois cabeçalhos de resposta no documento HTML:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

COOP: same-origin separa a página de outras janelas que não tenham a mesma origem. COEP: require-corp determina que todo sub-recurso deve permitir explicitamente sua incorporação. Quando ambos estão definidos, self.crossOriginIsolated passa a ser true e o SharedArrayBuffer é liberado.

O problema é o COEP: depois de ativá-lo, todo recurso de outra origem (imagens de CDN, fontes, scripts e iframes) deve enviar Cross-Origin-Resource-Policy: cross-origin ou ser obtido com CORS; caso contrário, o navegador o bloqueará. Essa é a parte que geralmente faz sites pararem de funcionar. Se você não puder controlar seus recursos de terceiros, use Cross-Origin-Embedder-Policy: credentialless, que carrega recursos de outras origens sem credenciais em vez de exigir que eles permitam explicitamente a incorporação.

Como ativar ​

Cloudflare Pages (um arquivo _headers):

/*
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp

Servidor de desenvolvimento do Vite (vite.config.js):

js
export default {
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
    },
  },
}

nginx:

add_header Cross-Origin-Opener-Policy same-origin;
add_header Cross-Origin-Embedder-Policy require-corp;

itch.io: ative "SharedArrayBuffer support" nas opções de incorporação do seu jogo HTML; isso configurará os cabeçalhos para você.

Após a implantação, recarregue a página e execute novamente o verificador. crossOriginIsolated deverá mudar para true.

Perguntas frequentes ​

Como verifico se minha página está isolada entre origens? ​

Insira a URL do seu site no verificador acima. Ele lê no servidor os cabeçalhos Cross-Origin-Opener-Policy e Cross-Origin-Embedder-Policy da página e informa se essa combinação torna a página isolada. Para verificar durante a execução no seu próprio navegador, abra a página e execute crossOriginIsolated no console; o resultado será true quando o isolamento estiver ativo.

Por que SharedArrayBuffer está indefinido? ​

Os navegadores só disponibilizam SharedArrayBuffer para páginas isoladas entre origens. Se ele estiver undefined, sua página não tem os cabeçalhos Cross-Origin-Opener-Policy: same-origin e Cross-Origin-Embedder-Policy: require-corp, ou algum recurso de outra origem está impedindo o isolamento sob o COEP. Configure os cabeçalhos (veja acima) e teste novamente.

O que são COOP e COEP? ​

Cross-Origin-Opener-Policy (COOP) controla como uma página interage com outras janelas de navegação. Cross-Origin-Embedder-Policy (COEP) controla quais sub-recursos podem ser incorporados. Definir COOP: same-origin e COEP: require-corp em conjunto torna uma página isolada entre origens, liberando o SharedArrayBuffer e outros recursos avançados.

Meu jogo em WebAssembly não carrega no navegador. Esse pode ser o motivo? ​

Muitas vezes, sim. Versões WebAssembly multithread (algumas exportações web do Godot e Unity, pthreads do Emscripten e ffmpeg.wasm) precisam de SharedArrayBuffer, que exige isolamento entre origens. Se o verificador acima mostrar "não isolado", configure os cabeçalhos COOP/COEP ou use uma versão de thread única do motor, quando disponível.

Preciso do cabeçalho Cross-Origin-Resource-Policy? ​

Não na página que você está isolando. COOP e COEP são os cabeçalhos que tornam um documento isolado entre origens e devem ser definidos no documento. Cross-Origin-Resource-Policy (CORP) é um cabeçalho diferente, usado na direção oposta: você o coloca em um recurso de outra origem (uma imagem, fonte ou script) para permitir que uma página usando COEP: require-corp o incorpore. Portanto, se o verificador mostrar que CORP está "não definido" na sua página, isso é esperado e não representa um problema. Você só adicionaria CORP aos recursos que outras páginas isoladas precisam carregar.

Ativar o COEP pode interromper minhas incorporações de terceiros? ​

Pode. Com COEP: require-corp, todo recurso de outra origem deve enviar Cross-Origin-Resource-Policy ou usar CORS; caso contrário, ele será bloqueado. Se você incorpora recursos de CDN ou scripts de terceiros que não controla, use COEP: credentialless, que evita essa exigência.

Conteúdo relacionado ​