Esta página foi traduzida pela API Cloud Translation.

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

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

Arthur Hemery

Maud Nalpas

Um novo valor para a Política de abertura de origem cruzada (COOP, na sigla em inglês) está disponível: restrict-properties. Ele traz 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 o restrict-properties, participe do teste de origem, a partir do Chrome 116.

Por que usar `restrict-properties`?

A restrict-properties tem dois casos de uso principais:

Evitar vazamentos entre locais sem falhas.
tornar seu site isolado de origem cruzada;

Evitar vazamentos entre locais sem falhas

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

Um site malicioso pode usar isso a seu favor para realizar ataques como vazamentos entre sites. Para reduzir esse risco, é possível usar o cabeçalho Cross-Origin-Opener-Policy (COOP).

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

Definir same-origin,, que bloqueia todas as interações de origem cruzada com pop-ups.
Defina 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 tornou impossível para sites que precisam ser abertos em um pop-up e interagir com o usuário que o abre para aplicar a COOP. Isso deixou casos de uso importantes, como o Logon único e os pagamentos, desprotegidos contra vazamentos entre sites.

O Cross-Origin-Opener-Policy: restrict-properties resolve isso.

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. No entanto, a comunicação básica entre janelas usando postMessage e closed é permitida.

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

Se você disponibilizar um serviço em um pop-up, definir Cross-Origin-Opener-Policy: restrict-properties vai proteger você contra diversos ataques de vazamento entre sites. Você ainda poderá abrir todas as páginas que conseguia abrir antes.
Se você precisar acessar um pop-up de origem cruzada, definir Cross-Origin-Opener-Policy: restrict-properties protegerá seu site contra a contagem de iframes. Você poderá abrir o mesmo conjunto de pop-ups que pode abrir hoje.
Se o usuário definir o cabeçalho e as páginas forem de origem cruzada, ele se comportará de maneira semelhante a uma delas que definiu o cabeçalho. Se forem da mesma origem, o acesso total será concedido.

Isolar o site de origem cruzada

Por que precisamos do isolamento de origem cruzada

Algumas APIs da Web aumentam o risco de ataques de canal lateral, como a Spectre. Para reduzir esse risco, os navegadores oferecem um ambiente isolado com base em permissã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 tempos de alta precisão com melhor resolução, isolando a origem de outros, a menos que eles estejam ativados.

Até agora, para usar essas APIs, era necessário configurar Cross-Origin-Opener-Policy: same-origin. No entanto, isso interromperia qualquer fluxo pop-up de origem cruzada necessário, 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 permitir o isolamento de origem cruzada Em vez de dividir a relação mais aberta, ela apenas a restringe ao subconjunto de comunicação mínimo de window.postMessage() e window.closed.

Ative o isolamento de origem cruzada com estes dois cabeçalhos:

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

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

Saiba mais sobre o 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 do isolamento de origem cruzada.

Testar o teste de origem

Para testar com Cross-Origin-Opener-Policy: restrict-properties, ative o teste de origem.

Suporte ao navegador

No momento, o Cross-Origin-Opener-Policy: restrict-properties só é compatível no Chrome. Outros navegadores estão ativamente envolvidos na discussão da 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 vai causar restrições. A definição dela apenas no pop-up ou apenas na página principal vai impedir qualquer acesso a propriedades diferentes de postMessage e closed na abertura, mesmo que sejam da mesma origem.

O conjunto de propriedades permitidas é fixo?

Com base no feedback até agora, window.postMessage e window.closed podem ser suficientes para a maioria dos fluxos de trabalho, mas ainda estamos pensando em abri-lo para outras propriedades. Se você tiver um caso de uso que não pode ser resolvido usando apenas postMessage e closed, deixe seu feedback na linha de execução de intents para experimentos.