Saisie automatique partagée dans les cadres iFrame: proposition initiale

Certains formulaires comportent des champs dans des cadres iFrame, ce qui perturbe la saisie automatique du navigateur. La saisie automatique partagée permet au frame parent de déterminer la fiabilité des iFrames multi-origines afin d'améliorer l'expérience de saisie automatique de l'utilisateur.

Dominik Mengelt
Dominik Mengelt
Twitter GitHub Mastodon
Sam Dutton

Une proposition permettant d'autoriser la saisie automatique dans un iFrame multi-origine est disponible à des fins de test. Grâce à cette fonctionnalité, un frame parent peut désigner les frames dont les champs doivent pouvoir être remplis automatiquement. Cela est particulièrement utile pour les formulaires de paiement, où il est très courant que des champs sensibles (pour la conformité avec la norme PCI DSS) soient chargés depuis une origine tierce telle qu'un fournisseur de services de paiement (PSP).

Dans l'exemple suivant, le nom et la date d'expiration du titulaire de la carte figurent sur la page de premier niveau (ou dans le cadre principal), mais le numéro de carte de crédit et le code de validation se trouvent dans des cadres iFrame d'une 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:

Schéma en arborescence montrant les différents champs d&#39;un formulaire de paiement

Pour les marchands, cette conception allie sécurité et flexibilité:

  • Les iFrames multi-origines 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 compris dans différents cadres peuvent être organisé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 des formulaires multiframes, ce qui soulève des questions sur le modèle de sécurité des formulaires. Pour les utilisateurs, les formulaires multiframes peuvent nuire à l'expérience de saisie automatique, comme dans l'exemple suivant:

La règle d'origine commune est une référence fiable pour la saisie automatique entre les frames, mais elle n'offre pas une précision suffisante au navigateur pour faire la distinction entre les cadres approuvés et non approuvés pour la saisie automatique.

Pour améliorer l'expérience de saisie automatique tout en assurant la sécurité des données utilisateur, l'équipe Chrome travaille sur une proposition permettant la saisie automatique dans un iFrame multi-origine. Si le formulaire est modifié pour utiliser la saisie automatique partagée, Chrome remplit correctement le numéro de carte de crédit multi-origine:

<!-- 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:

Essayez la saisie automatique partagée en local

Dans Chrome 93.0.4577.0 et versions ultérieures, vous pouvez tester la saisie automatique partagée pour un seul utilisateur sur ordinateur et sur 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 règle sur les autorisations. L'équipe Chrome travaille actuellement avec d'autres fournisseurs de navigateurs pour faire examiner la proposition. D'autres propositions sur la manière d'améliorer l'expérience utilisateur pour la saisie automatique dans les iFrames sont également en cours de discussion.

Nous continuerons à vous informer de l'avancement de cette proposition. En attendant, si vous disposez d'une page de paiement dans laquelle les champs <input> sensibles (numéro de carte de crédit, code CVC) sont intégrés à partir d'un fournisseur tiers, contactez-nous. Nous aimerions savoir si la saisie automatique partagée dans les iFrames pourrait améliorer l'expérience de saisie automatique de vos utilisateurs lors du processus de règlement.

En savoir plus

Photo de Jessica Ruscello sur Unsplash.