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'était pas encore pris en charge dans WebOTP consistait à cibler une origine à l'intérieur d'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 est suffisamment 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 le mot de passe à usage unique et terminer la procédure de validation.

Pour découvrir les bases de l'utilisation de WebOTP, consultez 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 OTP dans un formulaire au sein d'un iFrame multi-origine est courante dans les scénarios de paiement. Certains émetteurs de cartes de crédit exigent une étape de vérification 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 mot de passe à usage unique à l'utilisateur afin 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 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 une règle d'autorisation pour permettre à l'iFrame multi-origine de 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'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>

Consultez 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 à 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

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 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 compatibilité 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, la discussion sur les spécifications visant à utiliser @ à la place, nous espérons que la mise en œuvre du format SMS compatible aura converger.

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