Pop-ups partitionnés: nouvelle approche des pop-ups Web dans la version Preview développeur

Natalia Markoborodova

À partir de Chrome 132, les développeurs peuvent participer à un essai pour les développeurs concernant une nouvelle approche des pop-ups Web : les pop-ins partitionnées. Cet essai pour les développeurs n'est disponible que sur ordinateur. La fonctionnalité n'est pas encore disponible sur Android.

Un pop-in partitionné est un nouveau type de pop-up conçu pour les interactions de courte durée, comme les connexions ou les confirmations rapides. Il charge le contenu Web avec deux fonctionnalités uniques :

• Stockage partitionné par ouvreur
• Interface utilisateur de type modal

Pourquoi avons-nous besoin de pop-ins partitionnées ?

Les pop-ins partitionnées sont conçues pour préserver les propriétés de confidentialité d'un iframe partitionné et les propriétés de sécurité des pop-ups.

À mesure que de plus en plus d'utilisateurs choisissent de naviguer sans cookies tiers, les flux qui reposent sur le stockage de données dans un pop-up pour les récupérer ultérieurement dans un contexte tiers (par exemple, pour maintenir la session utilisateur sur plusieurs sites) peuvent être perturbés. Les pop-ins partitionnées visent à résoudre ce problème.

Comment fonctionnent les pop-ins partitionnées ?

Le stockage de chaque pop-in partitionnée est partitionné par rapport à son ouvreur. Le partitionnement du stockage limite l'accès aux données multisites, ce qui réduit les risques de suivi et d'attaques par injection de script. Pour en savoir plus sur le partitionnement du stockage, consultez notre documentation.

Prenons l'exemple d'un site Web opener.example qui intègre du contenu provenant de third-party.example. Pour afficher des contenus personnalisés sur opener.example, l'utilisateur doit se connecter à third-party.example. Lorsque les cookies tiers sont bloqués dans le navigateur de l'utilisateur, le flux de pop-up actuel est le suivant :

1. L'utilisateur clique sur un bouton de connexion.
2. Une boîte de dialogue s'ouvre.
3. L'utilisateur se connecte à partir du contexte de niveau supérieur de third-party.example, et un cookie d'authentification non partitionné est écrit.
4. Le contenu third-party.example intégré à opener.example n'a pas accès à ses propres cookies de premier niveau écrits sur third-party.example lorsqu'il a été présenté dans un contexte propriétaire. En effet, le cookie d'authentification n'est pas partitionné et est donc un cookie tiers.

Le stockage d'un pop-in partitionné est partitionné pour l'ouvreur. Cela modifie les étapes 3 et 4 des flux :

1. L'utilisateur se connecte à partir du contexte de premier niveau de third-party.example. Comme il est ouvert dans un pop-in partitionné, le stockage est partitionné par opener.example.

2. Le contenu third-party.example intégré à opener.example a accès à son propre cookie défini dans le pop-in, car ils partagent le même espace de stockage partitionné.

Interface utilisateur de type modal par rapport à son onglet d'ouverture

Les pop-ins partitionnées visent à aider l'utilisateur à comprendre que l'ouvreur et la pop-in sont liés :

• Lorsque l'utilisateur passe à un autre onglet, le pop-in devient automatiquement invisible et inaccessible, de la même manière qu'une boîte de dialogue modale n'est visible que lorsque l'onglet d'ouverture est actif.
• Lorsque l'utilisateur revient à l'onglet d'ouverture, le pop-in s'affiche à nouveau.
• L'utilisateur ne peut pas apporter de modifications dans la barre d'adresse du navigateur du pop-in.

Essayer

Chrome 132 introduit une version d'évaluation pour les développeurs de la fonctionnalité de pop-ins partitionnées. Cela signifie que la fonctionnalité sera disponible derrière un flag. Voici comment essayer les pop-ins partitionnées :

1. Assurez-vous d'utiliser Chrome 132 ou une version ultérieure.
2. Accédez à chrome://flags#partitioned-popins et activez l'indicateur de fonctionnalité.
3. Redémarrez Chrome.
4. Essayez notre démonstration.

Utiliser des pop-ins partitionnées sur votre site Web

Pour utiliser un pop-in partitionné sur votre site Web, appelez la méthode window.open() avec le paramètre popin transmis :

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

Envoyer des commentaires

Nous explorons les pop-ins partitionnées et nous aimerions recueillir l'avis des développeurs. Voici quelques scénarios d'utilisation potentiels :

• Flux d'authentification des utilisateurs Si vous avez implémenté un flux d'authentification personnalisé et que l'authentification a lieu sur un domaine différent de celui de votre site (par exemple, les utilisateurs site.example se connectent sur auth-site.example), essayez d'ouvrir la page d'authentification dans un pop-in pour utiliser le cookie de session sur la page d'ouverture.
• Contenu intégré. Essayez les pop-ins partitionnés pour afficher du contenu supplémentaire à partir d'un widget tiers, tel qu'une boîte de dialogue de paramètres, une image ou un PDF (ou tout autre contenu généralement chargé dans un pop-up), rendu dans une fenêtre plus grande. Dans ce cas, les pop-ins partitionnées visent à conserver l'état de la session utilisateur entre le widget tiers et votre site.

Si vous rencontrez l'un de ces scénarios dans vos solutions, si vous avez d'autres cas d'utilisation en tête ou si vous souhaitez contribuer à l'avenir de cette fonctionnalité, essayez-la et faites-nous part de vos commentaires :

• Avez-vous rencontré des problèmes ?
• Avez-vous des suggestions pour améliorer l'expérience utilisateur ?
• Avez-vous des suggestions pour améliorer l'UI ? Plus précisément, trouvez-vous que l'UI indique clairement que l'ouvreur et le pop-in sont liés ?
• Cette fonctionnalité vous est-elle utile ?
• Existe-t-il d'autres cas d'utilisation pour lesquels vous aimeriez utiliser des pop-ins partitionnées ?

Pour partager vos commentaires, signalez un problème sur GitHub.