Interações pop-up seguras com propriedades de restrição

Receba isolamento de origem cruzada e proteção contra vazamentos entre sites ao interagir com pop-ups.

Arthur Hemery
GitHub
Maud Nalpas

Um novo valor para a Política de abertura entre origens (COOP, na sigla em inglês) está disponível: restrict-properties. Ele oferece benefícios de segurança e facilita a adoção do isolamento de origem cruzada, permitindo que seu site interaja com pop-ups de terceiros para pagamentos, autenticação ou outros casos de uso.

Para começar a testar restrict-properties, participe do teste de origem que começa no Chrome 116.

Por que usar restrict-properties

restrict-properties tem dois casos de uso principais:

Prevenir vazamentos entre sites sem interrupções

Por padrão, qualquer site pode abrir seu aplicativo em um pop-up e receber uma referência a ele.

Um site malicioso pode usar isso para realizar ataques, como vazamentos entre sites. Para mitigar esse risco, use o cabeçalho Cross-Origin-Opener-Policy (COOP).

Até agora, suas opções para Cross-Origin-Opener-Policy eram limitadas. Você poderia:

  • Definir same-origin, que bloqueia todas as interações de origem cruzada com pop-ups.
  • Definir same-origin-allow-popups, que bloqueia todas as interações de origem cruzada que abrem seu site em um pop-up.
  • Definir unsafe-none, que permite todas as interações de origem cruzada com pop-ups.

Isso impossibilitou que sites que precisam ser abertos em um pop-up e interagir com o abridor aplicassem a COOP. Isso deixou casos de uso importantes, como o login único e os pagamentos, desprotegidos contra vazamentos entre sites.

Cross-Origin-Opener-Policy: restrict-properties resolve esse problema.

Com restrict-properties, as propriedades que podem ser usadas para contagem de frames e outros ataques de vazamento entre sites não estão disponíveis, mas a comunicação básica entre janelas via postMessage e closed é permitida.

Isso melhora a segurança de um site, mantendo os principais casos de uso. Por exemplo:

  • Se você fornecer um serviço em um pop-up, definir Cross-Origin-Opener-Policy: restrict-properties vai proteger você contra uma série de ataques de vazamento entre sites. Você ainda pode abrir todas as páginas que podia antes.
  • Se você precisar acessar um pop-up de origem cruzada, definir Cross-Origin-Opener-Policy: restrict-properties vai proteger seu site da contagem de iframes. Você poderá abrir o mesmo conjunto de pop-ups que pode abrir hoje.
  • Se o abridor e o aberto definirem o cabeçalho e as páginas forem de origem cruzada, o comportamento será semelhante ao de um deles que definiu o cabeçalho. Se eles forem da mesma origem, o acesso total será concedido.

Tornar seu site isolado de origem cruzada

Por que precisamos de isolamento de origem cruzada

Algumas APIs da Web aumentam o risco de ataques de canal lateral, como Spectre. Para mitigar esse risco, os navegadores oferecem um ambiente isolado baseado em ativação chamado isolamento de origem cruzada. Com um estado isolado de origem cruzada, a página da Web pode usar recursos privilegiados, incluindo SharedArrayBuffer, performance.measureUserAgentSpecificMemory() e timers de alta precisão com melhor resolução, ao mesmo tempo em que isola a origem de outras, a menos que elas sejam ativadas.

Até agora, para usar essas APIs, você precisava definir Cross-Origin-Opener-Policy: same-origin. No entanto, isso interromperia qualquer fluxo de pop-up de origem cruzada de que você possa precisar, como logon único e pagamentos.

Cross-Origin-Opener-Policy: restrict-properties agora pode ser usado em vez de Cross-Origin-Opener-Policy: same-origin para ativar o isolamento de origem cruzada. Em vez de interromper o relacionamento do abridor, ele apenas o restringe ao subconjunto de comunicação mínima de window.postMessage() e window.closed.

Você poderá ativar o isolamento de origem cruzada com os dois cabeçalhos a seguir:

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: require-corp

ou

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: credentialless

Saiba mais sobre credentialless em Carregar recursos de origem cruzada sem cabeçalhos CORP usando COEP: credentialless.

Demonstração

Teste várias opções de cabeçalho nesta demonstração de isolamento de origem cruzada.

Teste o teste de origem

Para testar Cross-Origin-Opener-Policy: restrict-properties, participe do teste de origem.

Suporte ao navegador

Cross-Origin-Opener-Policy: restrict-properties atualmente só é compatível com o Chrome. Outros navegadores estão ativamente envolvidos na discussão sobre a padronização.

Perguntas frequentes

Meu site precisa se comunicar com pop-ups da mesma origem. Devo usar COOP: restrict-properties para ativar o isolamento de origem cruzada?

Definir COOP: restrict-properties no pop-up e na página principal não causa restrições. Definir apenas no pop-up ou apenas na página principal vai impedir qualquer acesso a propriedades que não sejam postMessage e closed no abridor, mesmo que sejam da mesma origem.

O conjunto de propriedades permitidas é fixo?

Com base no feedback até agora, window.postMessage e window.closed são suspeitos de serem suficientes para a maioria dos fluxos de trabalho, mas ainda estamos considerando abrir para outras propriedades. Se você tiver um caso de uso que não possa ser resolvido usando apenas postMessage e closed, deixe seu feedback na thread de intenção de teste.

Recursos