Remplir les formulaires OTP dans des iFrame multi-origines avec l'API WebOTP

L'API WebOTP peut désormais recevoir des mots de passe à usage unique à partir d'iFrames.

Eiji Kitamura
Yi Gu
Les OTP (mots de passe à usage unique) envoyés par SMS sont couramment utilisés pour valider les numéros de téléphone, par exemple comme deuxième étape d'authentification, ou pour valider des paiements sur le Web. Toutefois, en passant du navigateur à l'application SMS, vous pouvez copier-coller des données saisir l'OTP permet de faire facilement des erreurs et de compliquer l'expérience utilisateur.

L'API WebOTP permet aux sites Web d'automatiser les opérations obtenir le mot de passe à usage unique à partir d'un SMS et le saisir automatiquement dans le formulaire pour les utilisateurs, d'un simple geste, l'application. Le SMS est spécialement formaté et lié à l'origine, ce qui atténue les risques de voler un mot de passe à usage unique par les sites d’hameçonnage.

WebOTP ne prend pas encore en charge le ciblage d'une origine. dans un iFrame. Il sert généralement à confirmer un paiement, en particulier avec 3D Secure. Avoir le point commun compatible avec plusieurs origines les cadres iFrame, l'API WebOTP fournit Mots de passe à usage unique liés à des origines imbriquées à partir de Chrome 91.

Fonctionnement de l'API WebOTP

L'API WebOTP est assez simple:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
…

Le message SMS doit être formaté avec le code à usage unique lié à l'origine codes.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Notez que sur la dernière ligne, elle contient l'origine à lier, précédée par Un @ suivi du mot de passe à usage unique précédé de #.

Lorsque vous recevez un SMS, une barre d'informations s'affiche et invite l'utilisateur à valider son numéro de téléphone. Lorsque l'utilisateur clique sur le bouton Verify, le navigateur redirige automatiquement le mot de passe à usage unique vers le site et résout le navigator.credentials.get() Le site Web peut alors extraire l'OTP et remplir la procédure de validation.

Pour en savoir plus sur l'utilisation de WebOTP, consultez la page Valider des numéros de téléphone sur le Web avec le API WebOTP

Cas d'utilisation des iFrames multi-origines

Saisir un OTP dans un formulaire au sein d'un iFrame d'origine différente est courant pour les paiements différents scénarios. Certains émetteurs de cartes de crédit exigent une étape de validation supplémentaire pour vérifier l'authenticité du payeur. Il s'agit de 3D Secure. généralement exposés dans un iFrame sur la même page que s'il faisait partie flux de paiement.

Exemple :

  • Un utilisateur se rend sur shop.example pour acheter une paire de chaussures avec une carte de crédit.
  • Une fois le numéro de carte saisi, le fournisseur de services de paiement intégré affiche un formulaire à partir de bank.example dans un iFrame demandant à l'utilisateur de valider son numéro de téléphone pour régler vos achats rapidement.
  • bank.example envoie à l'utilisateur un SMS contenant un mot de passe à usage unique pour qu'il puisse le saisir pour valider son identité.

Utiliser l'API WebOTP depuis un iFrame d'origine différente

Pour utiliser l'API WebOTP à partir d'un iFrame multi-origine, vous devez effectuer deux opérations choses:

  • Annotez l'origine du cadre supérieur et l'origine de l'iFrame dans le texte du SMS. .
  • Configurer une règle d'autorisations pour permettre à l'iFrame d'origine différente de recevoir l'OTP directement de l'utilisateur.
<ph type="x-smartling-placeholder">
</ph>
API WebOTP dans un iFrame en action.

Vous pouvez essayer la version de démonstration par vous-même à l'adresse https://web-otp-iframe-demo.stackblitz.io.

Annoter les origines liées dans le message SMS

Lorsque l'API WebOTP est appelée depuis un iFrame, le message SMS doit inclure l'origine du cadre supérieur précédée de @, suivie du mot de passe à usage unique précédé de # suivie de l'origine de l'iFrame, précédée de @.

@shop.example #123456 @bank.exmple

Configurer une règle d'autorisation

Pour utiliser WebOTP dans un iFrame multi-origine, l'intégrateur doit accorder l'accès à ce API via la règle d'autorisation otp-credentials pour éviter toute action comportemental. En général, il existe deux façons d'atteindre cet objectif:

  • via l'en-tête HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • via l'attribut iFrame allow:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Voir d'autres exemples de spécification d'une règle d'autorisation

Mises en garde

Niveaux d'imbrication

Pour le moment, Chrome n'accepte que les appels d'API WebOTP à partir d'iFrames multi-origines qui n'ont pas plus d'une origine unique dans sa chaîne ascendante. Dans scénarios suivants:

  • a.com -> b.com
  • a.com -> b.com -> b.com
  • a.com -> a.com -> b.com
  • a.com -> b.com -> c.com

WebOTP dans b.com est pris en charge, mais pas dans c.com.

Notez que le scénario suivant n'est pas non plus accepté en raison d'une absence de demande. et de la complexité de l'expérience utilisateur.

  • a.com -> b.com -> a.com (appel d'API WebOTP)

Interopérabilité

Bien que les moteurs de navigateur autres que Chromium n'implémentent pas l'API WebOTP, Safari partage le même format de SMS. compatible avec input[autocomplete="one-time-code"]. Dans Safari, dès qu'un Un SMS contenant un format de code à usage unique lié à l'origine arrive avec la correspondance origine, le clavier suggère de saisir l'OTP dans le champ de saisie.

Depuis avril 2021, Safari prend en charge iFrame avec un format de SMS unique utilisant %. Cependant, au terme de la discussion sur les spécifications, nous espérons que l'utilisation de @ à la place la mise en œuvre d'un format SMS compatible va converger.

Commentaires

Vos commentaires nous seront très utiles pour améliorer l'API WebOTP, alors n'hésitez pas à l'essayer. et contactez-nous ce que vous pensez.

Ressources

Photo de rupixen.com sur Unsplash