Certains formulaires comportent des champs dans des iFrames, ce qui pose problème pour le remplissage automatique du navigateur. Avec la saisie automatique partagée, le frame parent peut désigner la fiabilité des iframes inter-origines afin d'améliorer l'expérience de saisie automatique pour l'utilisateur.
Une proposition visant à autoriser la saisie automatique dans un iFrame d'origine différente est disponible pour les tests. Grâce à cette fonctionnalité, un cadre parent peut désigner les cadres dont les champs doivent être préremplis. Cela est particulièrement utile pour les formulaires de paiement, où il est très courant que des champs sensibles (pour la conformité avec le PCI DSS) soient chargés à partir d'une origine tierce, telle qu'un fournisseur de services de paiement (PSP).
Dans l'exemple suivant, le nom du titulaire de la carte et la date d'expiration se trouvent sur la page de niveau supérieur (ou dans le frame principal), mais le numéro de carte de crédit et le code de validation se trouvent dans des iFrames d'un PSP.
<!-- Top-level document URL: https://merchant.com/... -->
<form>
Cardholder name: <input id="name">
Credit card number: <iframe src="https://psp.com/..."><input id="num"></iframe>
Expiration date: <input id="exp">
CVC: <iframe src="https://psp.com/..."><input id="cvc"></iframe>
</form>
Le schéma suivant représente la structure du formulaire:
Pour les marchands, cette conception combine sécurité et flexibilité:
- Les iFrames intersites isolent les données de paiement sensibles de l'infrastructure du marchand, ce qui facilite la conformité avec la norme PCI DSS.
- Les champs de formulaire dans différents cadres peuvent être disposés et stylisés pour correspondre à l'apparence du site Web du marchand.
Du point de vue du navigateur, cela signifie qu'il existe des cas d'utilisation courants et légitimes pour les formulaires multicadres, ce qui soulève des questions sur le modèle de sécurité des formulaires. Pour les utilisateurs, les formulaires multicadres peuvent entraîner une mauvaise expérience de saisie automatique, comme dans l'exemple suivant:
Le règlement d'origine identique est une référence solide pour le remplissage automatique dans les cadres, mais ne fournit pas une granularité suffisante pour que le navigateur puisse différencier les cadres approuvés et non approuvés pour le remplissage automatique.
Pour offrir une meilleure expérience de saisie automatique tout en préservant la sécurité des données utilisateur, l'équipe Chrome travaille sur une proposition permettant la saisie automatique dans un iframe inter-origine. Si le formulaire est modifié pour utiliser la saisie automatique partagée, Chrome remplit correctement le numéro de carte de crédit entre les origines:
<!-- Top-level document URL: https://merchant.com/... -->
<form>
Cardholder name: <input id="name">
Credit card number: <iframe src="https://psp.com/..." allow="shared-autofill"><input id="num"></iframe>
Expiration date: <input id="exp">
CVC: <iframe src="https://psp.com/..." allow="shared-autofill"><input id="cvc"></iframe>
</form>
Cela peut améliorer l'expérience de saisie automatique pour l'utilisateur:
Essayer la saisie automatique partagée en local
Vous pouvez tester le remplissage automatique partagé pour un seul utilisateur dans Chrome 93.0.4577.0 et versions ultérieures sur ordinateur et mobile en définissant des indicateurs à partir de la ligne de commande.
--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill
Détecter la compatibilité des fonctionnalités
Utilisez le code suivant pour détecter si la propriété shared-autofill est disponible:
if (document.featurePolicy && document.featurePolicy
.features().includes('shared-autofill')) {
console.log('shared-autofill available!');
}
Étape suivante
La saisie automatique partagée est une proposition initiale visant à ajouter une fonctionnalité de saisie automatique à la stratégie d'autorisations. L'équipe Chrome collabore actuellement avec d'autres fournisseurs de navigateurs pour faire examiner la proposition. D'autres propositions visant à améliorer l'expérience utilisateur pour la saisie automatique dans les iFrames sont également en cours de discussion.
Nous vous tiendrons informés au fur et à mesure de l'avancement de cette proposition. En attendant, si vous avez une page de paiement sur laquelle les champs <input> sensibles (numéro de carte de crédit, CVV) sont intégrés par un fournisseur tiers, contactez-nous. Nous aimerions savoir si le remplissage automatique partagé entre les iFrames pourrait potentiellement améliorer l'expérience de remplissage automatique de vos utilisateurs lors du processus de paiement.
En savoir plus
- Proposition actuelle
- Examen du TAG du W3C
- Exemple de formulaire de paiement utilisé dans cet article
- Que sont les indicateurs Chrome ?
Photo de Jessica Ruscello sur Unsplash.