Como tornar seu site "isolado de origem cruzada" usando COOP e COEP

Use COOP e COEP para configurar um ambiente isolado de origem cruzada e ativar recursos avançados, como SharedArrayBuffer, performance.measureUserAgentSpecificMemory() e timer de alta resolução com mais precisão.

Eiji Kitamura

Atenção : o SharedArrayBuffer no Chrome para computador exige o isolamento de origem cruzada a partir do Chrome 92. Saiba mais em Atualizações do SharedArrayBuffer no Android Chrome 88 e no Chrome 92 para computadores (em inglês).

Atualizações

• 21 de junho de 2022: os scripts de worker também precisam de cuidado ao isolamento de origem cruzada. está ativado. Inclusão de algumas explicações.
• 5 de agosto de 2021: a API JS Self-Profiling é mencionada como uma das APIs que requerem isolamento de origem cruzada, mas refletindo a recente alteração da estrutura direção, ele será removido.
• 6 de maio de 2021: com base no feedback e nos problemas relatados, decidimos ajustar essa configuração. cronograma do uso de SharedArrayBuffer em nenhum site isolado de origem cruzada será restrita no Chrome M92.
• 16 de abril de 2021: adicionamos notas sobre um novo COEP sem credenciais. e COOP same-origin-allow-popups sejam relaxantes condição para origem cruzada isolamento.
• 5 de março de 2021: as limitações do SharedArrayBuffer foram removidas. performance.measureUserAgentSpecificMemory() e as funcionalidades de depuração, que agora estão totalmente ativadas no Chrome 89. Adicionados recursos futuros, performance.now() e performance.timeOrigin, que terão maior precisão.
• 19 de fevereiro de 2021: adicionamos uma observação sobre a política de recursos. allow="cross-origin-isolated" e a funcionalidade de depuração no DevTools.
• 15 de outubro de 2020: o self.crossOriginIsolated está disponível a partir do Chrome 87. Refletindo isso, document.domain é imutável quando self.crossOriginIsolated retorna true. performance.measureUserAgentSpecificMemory() está encerrando o teste de origem e é ativado por padrão no Chrome 89. O buffer de matriz compartilhado no Chrome para Android vai estarão disponíveis a partir do Chrome 88.

Algumas APIs da Web aumentam o risco de ataques de canal lateral, como o Spectre. Para mitigar esse risco, os navegadores oferecem um ambiente isolado com base em aceitação chamado isolados de origem cruzada. Com um estado isolado de origem cruzada, a página da Web será usar recursos privilegiados, incluindo:

.

Recursos que vão estar disponíveis atrás do isolamento de origem cruzada estado.

API	Descrição
SharedArrayBuffer	Obrigatório para linhas de execução WebAssembly. Disponível para Android Chrome 88. A versão desktop é ativada por padrão com o ajuda de isolamento de sites, mas vai exigir o estado isolado de origem cruzada e serão desativados por padrão no Chrome 92.
performance.measureUserAgentSpecificMemory()	Disponível a partir do Chrome 89.
performance.now() e performance.timeOrigin	Disponível atualmente em muitos navegadores, com a resolução limitada a 100 microssegundos ou mais. Com o isolamento de origem cruzada, o a resolução pode ser de 5 microssegundos ou mais.

O estado isolado de origem cruzada também impede modificações de document.domain: A possibilidade de mudar o document.domain possibilita a comunicação. entre documentos do mesmo site e foi considerado uma brecha na política de mesma origem).

Para ativar um estado isolado de origem cruzada, é necessário enviar o seguinte: Cabeçalhos HTTP no documento principal:

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

Esses cabeçalhos instruem o navegador a bloquear o carregamento de recursos ou iframes que não optaram pelo carregamento de documentos de origem cruzada e impedem janelas de origem cruzada interajam diretamente com seu documento. Isso também significa que os recursos que estão sendo carregados em origem cruzada exigem ativações.

Você pode determinar se uma página da Web tem um estado isolado de origem cruzada examinando self.crossOriginIsolated

Este artigo mostra como usar esses novos cabeçalhos. Em uma mensagem de acompanhamento artigo, vou fornecer mais informações.

Observação : este artigo é destinado a pessoas que querem preparar sites para usar SharedArrayBuffer, linhas de execução WebAssembly, performance.measureUserAgentSpecificMemory() ou timers de alta resolução com melhor precisão e mais eficiência em todas as plataformas de navegador.

.

Termo importante : este artigo usa vários termos que soam semelhantes. Para deixar tudo mais claro, vamos defini-los primeiro: * COEP: política de incorporador de origem cruzada * COOP: política de abertura de origem cruzada * CORS: política de recurso de origem cruzada * CORS: compartilhamento de recursos entre origens * CORB: bloqueio de leitura de origem cruzada

Implante o COOP e o COEP para tornar seu site isolado de origem cruzada

Observação : conheça as etapas práticas para ativar o isolamento de origem cruzada em Um guia para ativar o isolamento de origem cruzada.

Integrar COOP e COEP

1. Definir o cabeçalho Cross-Origin-Opener-Policy: same-origin no documento de nível superior

Ao ativar COOP: same-origin em um documento de nível superior, as janelas com o mesmo origem e as janelas abertas no documento terão uma navegação grupo de contexto, a menos que estejam na mesma origem com a mesma configuração COOP. Assim, o isolamento é aplicado para janelas abertas e a comunicação mútua entre ambas as janelas estão desativadas.

Cuidado : isso vai interromper as integrações que exigem interações de janela de origem cruzada, como OAuth e pagamentos. Para atenuar esse problema, estamos explorando o relaxamento da condição 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 sozinha será possível. Se você quiser ativar o isolamento de origem cruzada, mas estiver bloqueado por esse problema, recomendamos se registrar em um teste de origem e aguardar até que a nova condição esteja disponível. Não planejamos encerrar o teste de origem até que esse problema seja resolvido com segurança.

Um grupo de contexto de navegação é um conjunto de janelas que podem fazer referência umas às outras. Para exemplo, um documento de nível superior e os documentos filhos incorporados via <iframe>. Se um site (https://a.example) abrir uma janela pop-up (https://b.example), faça o seguinte: a janela de abertura e a janela pop-up compartilham o mesmo contexto de navegação, Elas têm acesso umas às outras pelas APIs do DOM, como window.opener.

Você pode verificar se a pessoa que abre e a pessoa que abre a janela estão em navegação separada. grupos de contexto do DevTools.

Faça um teste : veja o impacto de diferentes parâmetros COOP.

2. Verifique se os recursos têm o CORP ou CORS ativado

Verifique se todos os recursos da página estão carregados com CORP ou CORS HTTP e cabeçalhos de cache válidos. Esta etapa é necessária para a etapa 4, ativar o COEP.

Veja o que você precisa fazer de acordo com a natureza do recurso:

• Se for esperado que o recurso seja carregado apenas da mesma origem, defina o cabeçalho Cross-Origin-Resource-Policy: same-origin.
• Se for esperado que o recurso seja carregado somente do mesmo site, mas origem, defina o cabeçalho Cross-Origin-Resource-Policy: same-site.
• Se o recurso for carregado de origens diferentes sob seu controle, defina o Cross-Origin-Resource-Policy: cross-origin, se possível.
• Para recursos de origem cruzada sobre os quais você não tem controle:
  • Use o atributo crossorigin na tag HTML de carregamento se o recurso for veiculados com CORS. Por exemplo, <img src="***" crossorigin>.
  • Peça ao proprietário do recurso para oferecer suporte ao CORS ou ao CORP.
• Para iframes, siga os mesmos princípios acima e defina os Cross-Origin-Resource-Policy: cross-origin (ou same-site, same-origin) dependendo do contexto).
• Os scripts carregados com um WebWorker precisam ser veiculados a partir da mesma origem. portanto, você não precisa de cabeçalhos CORP ou CORS.
• Para um documento ou um worker exibido com COEP: require-corp, valores os sub-recursos carregados sem CORS precisam definir o cabeçalho Cross-Origin-Resource-Policy: cross-origin para ativar a incorporação. Por exemplo, isso se aplica <script>, importScripts, <link>, <video>, <iframe> etc.

.

É possível ativar o isolamento de origem cruzada em um documento incorporado em um iframe aplicando a política de permissões allow="cross-origin-isolated" à tag <iframe> e atendendo às mesmas condições descritas neste documento. Observe que toda a cadeia dos documentos, incluindo os frames principais e os frames secundários, também precisa ser isolada de origem cruzada.

.

Termo importante : é importante que você entenda a diferença entre "mesmo site" e "mesma origem". Saiba mais sobre a diferença no artigo Noções básicas sobre mesmo site e mesma origem.

3. Use o cabeçalho HTTP somente relatório do COEP para avaliar recursos incorporados

Antes de ativar totalmente o COEP, faça uma simulação usando o Cabeçalho Cross-Origin-Embedder-Policy-Report-Only para examinar se a política realmente funciona. Você vai receber relatórios sem bloquear conteúdo incorporado.

Aplique isso de forma recursiva a todos os documentos, incluindo o de nível superior, iframes e scripts de worker. Para informações sobre o cabeçalho HTTP Somente relatórios, consulte Observe problemas usando os Relatórios API.

4. Ativar COEP

Depois de confirmar que tudo funciona e que todos os recursos podem ser carregado, mude o Cross-Origin-Embedder-Policy-Report-Only para o cabeçalho Cross-Origin-Embedder-Policy com o mesmo valor para todas documentos, incluindo aqueles incorporados por iframes e scripts de worker.

Faça um teste : veja o impacto de diferentes parâmetros COEP / CORP.

.

Observação : o Squoosh (um PWA de otimização de imagens) agora usa COOP / COEP para ter acesso a Wasm Threads (e Shared Array Buffer) no Chrome para Android.

.

Atenção : estamos explorando maneiras de implantar o Cross-Origin-Resource-Policy em grande escala, já que o isolamento de origem cruzada exige que todos os sub-recursos sejam explicitamente aceitos. E tivemos a ideia de seguir na direção oposta: um novo COEP "sem credenciais" que permite carregar recursos sem o cabeçalho CORP, removendo todas as credenciais. Esperamos que isso reduza seu trabalho de garantir que os sub-recursos estejam enviando o cabeçalho Cross-Origin-Resource-Policy. No entanto, como o modo credentialless está disponível no Chrome a partir da versão 96, mas ainda não é compatível com nenhum outro navegador, alguns desenvolvedores podem ter dificuldade para implantar o COOP ou o COEP. Se você ainda preferir não ativar o isolamento de origem cruzada, inscreva-se em um teste de origem e aguarde até que credentialless esteja disponível em mais navegadores.

Determine se o isolamento foi bem-sucedido com self.crossOriginIsolated

A propriedade self.crossOriginIsolated retorna true quando a página da Web está em um um estado isolado de origem cruzada e todos os recursos e janelas ficam isolados no mesmo grupo de contexto de navegação. É possível usar essa API para determinar se você conseguiram isolar o grupo de contexto de navegação e obter acesso a recursos avançados, como performance.measureUserAgentSpecificMemory().

Depurar problemas usando o Chrome DevTools

Para recursos renderizados na tela, como imagens, é fácil para detectar problemas do COEP porque a solicitação será bloqueada, e a página será indicar uma imagem ausente. No entanto, para recursos que têm um impacto visual, como scripts ou estilos, os problemas de COEP passar despercebidos. Para isso, use o painel Network do DevTools. Se se houver um problema com o COEP, (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) no Status .

Clique na entrada para conferir mais detalhes.

Também é possível determinar o status de iframes e janelas pop-up por meio do Aplicativo. Acesse "Frames" no lado esquerdo e expandir "superior" para ver o detalhamento da estrutura de recursos.

É possível verificar o status do iframe, como a disponibilidade de SharedArrayBuffer, etc.

Você também pode verificar o status da janela pop-up, por exemplo, se ela é de origem cruzada. isolados.

Observar problemas usando a API Reporting

A API Reporting é outro mecanismo pelo qual é possível e detectar vários problemas. Você pode configurar a API de relatórios para instruir seus dos usuários navegador envie um relatório sempre que o COEP bloquear o carregamento de um recurso ou COOP, isola uma janela pop-up. O Chrome é compatível com a API Reporting desde a versão 69 para vários usos, incluindo COEP e COOP.

Observação : você já usa a API Reporting com o cabeçalho Report-To? O Chrome está em transição para uma nova versão da API Reporting, que substituirá Report-To por Reporting-Endpoints. considere migrar para a nova versão. Confira Migrar para a API Reporting v1 para mais detalhes.

Para saber como configurar a API Reporting e definir um servidor para receber consulte a seção Como usar os relatórios API.

Exemplo de relatório do COEP

Um exemplo de COEP relatório payload quando o recurso de origem cruzada está bloqueado tem esta aparência:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

Atenção : blocked-url existe apenas para compatibilidade com versões anteriores e será removido em algum momento.

Exemplo de relatório COOP

Um exemplo de COOP report quando uma janela pop-up é aberta isolada, desta forma:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Quando diferentes grupos de contexto de navegação tentam acessar uns aos outros (apenas em "somente relatório" COOP também envia um relatório. Por exemplo, um relatório quando A tentativa de postMessage() ficaria assim:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Conclusão

Use uma combinação de cabeçalhos HTTP COOP e COEP para ativar uma página da Web em uma um estado isolado de origem cruzada. Você será capaz de examinar self.crossOriginIsolated para determinar se uma página da Web tem origem cruzada em um estado isolado.

Manteremos esta postagem atualizada à medida que novos recursos forem disponibilizados para este estado isolado de origem cruzada e outras melhorias foram feitas no DevTools sobre COOP e COEP.

Recursos

• Por que você precisa de "isolamento de origem cruzada" para ter recursos avançados
• Um guia para ativar o isolamento de origem cruzada
• Atualizações do SharedArrayBuffer no Android Chrome 88 e no Chrome para computadores 92
• Monitore o uso total da memória da sua página da Web com measureUserAgentSpecificMemory()