Pop-ups divididos: uma nova abordagem para pop-ups da Web no teste para desenvolvedores

Natalia Markoborodova

A partir do Chrome 132, os desenvolvedores podem participar de um teste para desenvolvedores de uma nova abordagem para pop-ups da Web: popins particionados. Essa avaliação para desenvolvedores está disponível apenas para computadores, e o recurso ainda não está disponível no Android.

Um pop-in particionado é um novo tipo de pop-up projetado para interações de curta duração, como logins ou confirmações rápidas. Ele carrega conteúdo da Web com dois recursos exclusivos:

• Armazenamento particionado por abridor
• Uma interface semelhante a um modal

Por que precisamos de pop-ins particionados?

As pop-ins particionadas foram projetadas para manter as propriedades de privacidade de um iframe particionado e as propriedades de segurança de pop-ups.

À medida que mais usuários ativam a navegação sem cookies de terceiros, os fluxos que dependem do armazenamento de dados em um pop-up para recuperação posterior em um contexto de terceiros (por exemplo, para manter a sessão do usuário em vários sites) podem ser interrompidos. Os pop-ins particionados foram criados para resolver esse problema.

Como funcionam os pop-ups particionados?

O armazenamento de cada pop-in particionado é particionado para o abridor. O particionamento de armazenamento limita o acesso a dados entre sites, reduzindo os riscos de rastreamento e ataques de injeção de script. Saiba como funciona o particionamento de armazenamento na nossa documentação.

Considere um site opener.example que incorpora conteúdo de third-party.example. Para mostrar conteúdo personalizado no opener.example, o usuário precisa fazer login no third-party.example. Quando os cookies de terceiros são bloqueados no navegador do usuário, o fluxo de pop-up atual é o seguinte:

1. O usuário clica em um botão de login.
2. Uma caixa de diálogo será aberta.
3. O usuário faz login no contexto de nível superior de third-party.example, e um cookie de autenticação não particionado é gravado.
4. O conteúdo third-party.example incorporado em opener.example não tem acesso aos próprios cookies de nível superior gravados em third-party.example quando foi apresentado em um contexto próprio. Isso acontece porque o cookie de autenticação não é particionado e, portanto, é um cookie de terceiros.

O armazenamento de um pop-in particionado é particionado para o abridor. Isso muda as etapas 3 e 4 dos fluxos:

1. O usuário faz login no contexto de nível superior de third-party.example. Como ele está aberto em um pop-in particionado, o armazenamento é particionado por opener.example.

2. O conteúdo third-party.example incorporado no opener.example tem acesso ao próprio cookie definido no pop-in, já que eles compartilham o mesmo armazenamento particionado.

Interface semelhante a um modal relativa à guia de abertura

Os pop-ins particionados ajudam o usuário a entender que a página de abertura e o pop-in estão relacionados:

• Quando o usuário muda para outra guia, o pop-in fica automaticamente invisível e inacessível, da mesma forma que um modal só fica visível quando a guia de abertura está ativa.
• Quando o usuário volta para a guia de abertura, o pop-in é mostrado novamente.
• O usuário não pode fazer mudanças na barra de endereço do navegador do pop-in.

Faça um teste

O Chrome 132 está lançando um teste para desenvolvedores do recurso de pop-ups particionados. Isso significa que o recurso vai estar disponível por trás de uma flag. Confira como testar pop-ins particionados:

1. Verifique se você está usando o Chrome 132 ou uma versão mais recente.
2. Navegue até chrome://flags#partitioned-popins e ative a sinalização de recurso.
3. Reinicie o Chrome.
4. Teste nossa demonstração.

Usar pop-ups particionados no seu site

Para usar um pop-in particionado no seu site, chame o método window.open() com o parâmetro popin transmitido:

window.open("third-party-popin.example", "_blank", "popin");

Envie feedback

Estamos testando pop-ups particionados e aguardando o feedback dos desenvolvedores. Confira alguns cenários de casos de uso possíveis:

• Fluxo de autenticação do usuário. Se você tiver um fluxo de autenticação personalizado implementado e a autenticação acontecer em um domínio diferente do seu site (por exemplo, usuários do site.example fazem login no auth-site.example), tente abrir a página de autenticação em um pop-in para usar o cookie de sessão na página de abertura.
• Conteúdo incorporado. Use pop-ups particionados para mostrar conteúdo adicional de um widget de terceiros, como uma caixa de diálogo de configurações, uma imagem ou um PDF (ou outro conteúdo geralmente carregado em um pop-up), renderizado em uma janela maior. Nesse caso, os pop-ups particionados visam reter o estado da sessão do usuário entre o widget de terceiros e seu site.

Se você tiver algum desses cenários nas suas soluções, outros casos de uso em mente ou quiser ajudar a moldar o futuro desse recurso, teste e nos informe:

• Você teve algum problema?
• Você tem sugestões para melhorar a experiência do usuário?
• Você tem alguma sugestão para melhorar a interface? Especificamente, você acha que a interface indica claramente que o abridor e o pop-in estão relacionados?
• Você acha esse recurso útil?
• Há outros casos de uso em que você gostaria de usar pop-ups particionados?

Registre um problema no GitHub para compartilhar suas ideias.