Ventanas emergentes particionadas: un nuevo enfoque para las ventanas emergentes web en la Versión preliminar para desarrolladores

Natalia Markoborodova

A partir de Chrome 132, los desarrolladores pueden participar en una prueba para desarrolladores de un nuevo enfoque para las ventanas emergentes web: las ventanas emergentes particionadas. Esta prueba para desarrolladores solo está disponible para computadoras, y la función aún no está disponible en Android.

Una ventana emergente particionada es un nuevo tipo de ventana emergente diseñada para interacciones breves, como inicios de sesión o confirmaciones rápidas. Carga contenido web con dos funciones únicas:

• Almacenamiento particionado por el elemento que lo abre
• Una IU similar a un diálogo modal

¿Por qué necesitamos ventanas emergentes particionadas?

Los pop-ins particionados están diseñados para mantener las propiedades de privacidad de un iframe particionado y las propiedades de seguridad de las ventanas emergentes.

A medida que más usuarios habiliten la navegación sin cookies de terceros, es posible que se interrumpan los flujos que dependen del almacenamiento de datos en una ventana emergente para su recuperación posterior en un contexto de terceros (por ejemplo, para mantener la sesión del usuario en varios sitios). Las ventanas emergentes particionadas tienen como objetivo abordar este problema.

¿Cómo funcionan las ventanas emergentes particionadas?

El almacenamiento de cada ventana emergente particionada se particiona para su abridor. El particionamiento del almacenamiento limita el acceso a los datos entre sitios, lo que mitiga los riesgos de seguimiento y los ataques de inyección de secuencias de comandos. Obtén más información sobre cómo funciona la partición de almacenamiento en nuestra documentación.

Considera un sitio web opener.example que incorpora contenido de third-party.example. Para mostrar contenido personalizado en opener.example, el usuario debe acceder a su cuenta en third-party.example. Cuando se bloquean las cookies de terceros en el navegador del usuario, el flujo emergente actual es el siguiente:

1. El usuario hace clic en un botón de acceso.
2. Se abrirá un cuadro de diálogo.
3. El usuario accede desde el contexto de nivel superior de third-party.example y se escribe una cookie de autenticación sin particionar.
4. El contenido de third-party.example incorporado en opener.example no tiene acceso a sus propias cookies de nivel superior escritas en third-party.example cuando se presentó en un contexto de origen. Esto sucede porque la cookie de autenticación no está particionada y, por lo tanto, es una cookie de terceros.

El almacenamiento de una ventana emergente particionada se particiona para el elemento que la abre. Esto cambia los pasos 3 y 4 de los flujos:

1. El usuario accede desde el contexto de nivel superior de third-party.example. Como se abre en una ventana emergente particionada, el almacenamiento se particiona por opener.example.

2. El contenido de third-party.example incorporado en opener.example tiene acceso a su propia cookie que se configuró en la ventana emergente, ya que comparten el mismo almacenamiento particionado.

IU similar a un diálogo modal en relación con su pestaña de apertura

Las ventanas emergentes particionadas tienen como objetivo ayudar al usuario a comprender que el elemento que abre la ventana y la ventana emergente están relacionados:

• Cuando el usuario cambia a otra pestaña, la ventana emergente se vuelve invisible y deja de estar disponible automáticamente, de la misma manera que una ventana modal solo está visible cuando la pestaña de apertura está activa.
• Cuando el usuario regresa a la pestaña del selector, se vuelve a mostrar la ventana emergente.
• El usuario no puede realizar cambios en la barra de direcciones del navegador de la ventana emergente.

Probar

Chrome 132 presenta una prueba para desarrolladores de la función de ventanas emergentes particionadas. Esto significa que la función estará disponible detrás de una marca. Sigue estos pasos para probar las ventanas emergentes particionadas:

1. Asegúrate de usar Chrome 132 o una versión posterior.
2. Navega a chrome://flags#partitioned-popins y habilita la marca de función.
3. Reinicia Chrome.
4. Prueba nuestra demostración.

Usa ventanas emergentes particionadas en tu sitio web

Para usar una ventana emergente particionada en tu sitio web, llama al método window.open() con el parámetro popin pasado:

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

Comparte tus comentarios

Estamos explorando las ventanas emergentes particionadas y buscando comentarios de los desarrolladores. Estos son algunos posibles casos de uso:

• Flujo de autenticación del usuario. Si implementaste un flujo de autenticación personalizado y la autenticación se realiza en un dominio diferente del de tu sitio (por ejemplo, los usuarios de site.example acceden a auth-site.example), intenta abrir la página de autenticación en una ventana emergente para usar la cookie de sesión en la página de apertura.
• Contenido incorporado. Prueba las ventanas emergentes particionadas para mostrar contenido adicional de un widget de terceros, como un diálogo de configuración, una imagen o un PDF (o cualquier otro contenido que se suele cargar en una ventana emergente), renderizado en una ventana más grande. En este caso, las ventanas emergentes particionadas tienen como objetivo conservar el estado de la sesión del usuario entre el widget de terceros y tu sitio.

Si tienes alguno de estos casos en tus soluciones, tienes otros casos de uso en mente o quieres ayudar a definir el futuro de esta función, pruébala y cuéntanos tu experiencia:

• ¿Tuviste algún problema?
• ¿Tienes alguna sugerencia para mejorar la experiencia del usuario?
• ¿Tienes alguna sugerencia para mejorar la IU? Específicamente, ¿crees que la IU indica claramente que el elemento que abre la ventana y la ventana emergente están relacionados?
• ¿Qué tan útil te parece esta función?
• ¿Hay otros casos de uso para los que te gustaría usar ventanas emergentes particionadas?

Informa un problema en GitHub para compartir tu opinión.