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 des iFrames.

Eiji Kitamura
Yi Gu
Les mots de passe à usage unique envoyés par SMS sont généralement utilisés pour valider des numéros de téléphone, par exemple comme deuxième étape d'authentification ou pour valider des paiements sur le Web. Toutefois, passer du navigateur à l'application SMS, copier-coller ou saisir manuellement le mot de passe à usage unique facilite les erreurs et nuit à l'expérience utilisateur.

L'API WebOTP permet aux sites Web d'obtenir par programmation le mot de passe à usage unique à partir d'un SMS et de le saisir automatiquement dans le formulaire pour les utilisateurs d'un simple geste, sans changer d'application. Le SMS est spécialement formaté et lié à l'origine, ce qui réduit les risques pour les sites d'hameçonnage de voler l'OTP également.

Un cas d'utilisation qui n'a pas encore été pris en charge dans WebOTP consistait à cibler une origine dans un iFrame. Il est généralement utilisé pour la confirmation de paiement, en particulier avec 3D Secure. Grâce au format commun compatible avec les cadres iFrame multi-origines, l'API WebOTP fournit désormais des OTP liés aux origines imbriquées à partir de Chrome 91.

Fonctionnement de l'API WebOTP

L'API WebOTP est suffisamment simple:

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

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

Your OTP is: 123456.

@web-otp.glitch.me #12345

Notez qu'à la dernière ligne, il contient l'origine devant être précédée d'un @ suivi du mot de passe à usage unique précédé d'un #.

À la réception du SMS, une barre d'informations s'affiche et invite l'utilisateur à valider son numéro de téléphone. Une fois que l'utilisateur a cliqué sur le bouton Verify, le navigateur transfère automatiquement l'OTP au site et résout l'navigator.credentials.get(). Le site Web peut alors extraire le mot de passe à usage unique et terminer le processus de validation.

Apprenez les bases de l'utilisation de WebOTP dans Vérifier des numéros de téléphone sur le Web avec l'API WebOTP.

Cas d'utilisation des iFrame multi-origines

Il est courant de saisir un mot de passe à usage unique dans un formulaire au sein d'un iFrame multi-origine dans les scénarios de paiement. Certains émetteurs de cartes de crédit exigent une étape de validation supplémentaire pour vérifier l'authenticité du payeur. C'est ce qu'on appelle 3D Secure. Le formulaire est généralement exposé dans un iFrame sur la même page que s'il faisait partie du flux de paiement.

Exemple :

  • Un utilisateur accède à shop.example pour acheter une paire de chaussures avec une carte de crédit.
  • Une fois le numéro de carte de crédit saisi, le fournisseur de services de paiement intégré affiche un formulaire de bank.example dans un iFrame demandant à l'utilisateur de valider son numéro de téléphone pour pouvoir payer rapidement.
  • bank.example envoie un SMS contenant un mot de passe à usage unique à l'utilisateur afin qu'il puisse le saisir et vérifier 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:

  • Annotez l'origine du frame supérieur et l'origine de l'iFrame dans le SMS.
  • Configurez une règle d'autorisation pour permettre à l'iFrame multi-origine de recevoir directement l'OTP de l'utilisateur.
L'API WebOTP dans un iFrame en action.

Vous pouvez essayer la démonstration par vous-même sur https://web-otp-iframe-demo.stackblitz.io.

Annoter les origines liées au SMS

Lorsque l'API WebOTP est appelée depuis un iFrame, le SMS doit inclure l'origine du cadre supérieur, précédé de @, suivi de l'OTP, précédé de #, et suivi de l'origine de l'iFrame précédé de @.

@shop.example #123456 @bank.exmple

Configurer la règle d'autorisation

Pour utiliser WebOTP dans un iFrame multi-origine, l'outil d'intégration doit accorder l'accès à cette API via la règle d'autorisation otp-credentials afin d'éviter tout comportement inattendu. 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>

Découvrez d'autres exemples sur la 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 provenant d'iFrames multi-origines qui n'ont pas plus d'une origine unique dans leur chaîne d'ancêtre. Dans les cas suivants:

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

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

Notez que le scénario suivant n'est pas non plus pris en charge en raison d'un manque de demande et de complexités liées à l'expérience utilisateur.

  • a.com -> b.com -> a.com (appel à l'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 avec sa compatibilité input[autocomplete="one-time-code"]. Dans Safari, dès qu'un SMS contenant un format de code à usage unique lié à l'origine arrive avec l'origine correspondante, le clavier suggère de saisir l'OTP dans le champ de saisie.

Depuis avril 2021, Safari accepte les cadres iFrame avec un format de SMS unique utilisant %. Toutefois, comme la discussion sur les spécifications s'est terminée concernant l'utilisation de @ à la place, nous espérons que l'implémentation des formats SMS compatibles convergera.

Commentaires

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

Ressources

Photo par rupixen.com sur Unsplash