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

L'API WebOTP peut désormais recevoir des codes OTP à partir d'iFrames.

Eiji Kitamura
Yi Gu
Les mots de passe à usage unique (OTP, one-time password) par SMS sont couramment 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 de SMS pour copier-coller ou saisir manuellement le code OTP est propice aux erreurs et complique l'expérience utilisateur.

L'API WebOTP permet aux sites Web d'obtenir de manière programmatique le mot de passe à usage unique à partir d'un message SMS et de le saisir automatiquement dans le formulaire pour les utilisateurs en un seul geste, sans changer d'application. Le SMS est formaté de manière spéciale et lié à l'origine. Il réduit ainsi les risques que les sites Web de hameçonnage volent également le OTP.

Un cas d'utilisation qui n'est pas encore 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. Disposant du format commun pour prendre en charge les iFrames inter-origines, l'API WebOTP fournit désormais des OTP liés à des origines imbriquées à partir de Chrome 91.

Fonctionnement de l'API WebOTP

L'API WebOTP elle-même est assez simple:

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

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

Your OTP is: 123456.

@web-otp.glitch.me #12345

Notez que la dernière ligne contient l'origine à lier, précédée d'un @, suivie de l'OTP précédé d'un #.

Lorsque le message arrive, 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 vers le site et résout le navigator.credentials.get(). Le site Web peut ensuite extraire l'OTP et terminer le processus de validation.

Découvrez les principes de base de l'utilisation de WebOTP dans Valider des numéros de téléphone sur le Web avec l'API WebOTP.

Cas d'utilisation des iFrames inter-origines

La saisie d'un code à usage unique dans un formulaire dans un iFrame multi-origine est courante 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. Cette méthode est appelée 3D Secure. Le formulaire est généralement exposé dans un iframe sur la même page, comme s'il faisait partie du parcours de paiement.

Exemple :

  • Un utilisateur se rend sur shop.example pour acheter une paire de chaussures avec une carte de crédit.
  • Après avoir saisi le numéro de carte de crédit, le fournisseur 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 un paiement rapide.
  • bank.example envoie un SMS contenant un code à usage unique à l'utilisateur afin qu'il puisse le saisir pour valider son identité.

Utiliser l'API WebOTP à partir d'un iFrame inter-origine

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

  • Annotez à la fois l'origine du frame supérieur et l'origine de l'iFrame dans le message texte du SMS.
  • Configurez la stratégie d'autorisation pour autoriser l'iframe inter-origine à recevoir directement l'OTP de l'utilisateur.
API WebOTP dans un iFrame en action.

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

Annoter les origines liées au message texte par SMS

Lorsque l'API WebOTP est appelée à partir d'un iFrame, le message SMS doit inclure l'origine du frame supérieur précédée de @, suivie de l'OTP précédé de #, puis de l'origine de l'iFrame précédée de @.

@shop.example #123456 @bank.exmple

Configurer la stratégie d'autorisation

Pour utiliser WebOTP dans un iFrame multi-origine, l'intégrateur doit accorder l'accès à cette API via la règle d'autorisation des identifiants otp pour éviter tout comportement involontaire. En général, il existe deux façons d'y parvenir:

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

Consultez d'autres exemples de spécification d'une stratégie 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 leur chaîne d'ancêtres. Dans les 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

L'utilisation de WebOTP dans b.com est acceptée, mais pas dans c.com.

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

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

Depuis avril 2021, Safari est compatible avec les iFrames avec un format SMS unique à l'aide de %. Toutefois, comme la discussion sur les spécifications a conclu à l'utilisation de @, nous espérons que l'implémentation du format de SMS compatible convergera.

Commentaires

Vos commentaires sont essentiels pour améliorer l'API WebOTP. Alors, essayez-la et n'hésitez pas à nous faire part de vos commentaires.

Ressources

Photo de rupixen.com sur Unsplash