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

L'API WebOTP peut désormais recevoir des OTP depuis des iFrames.

Eiji Kitamura

Yi Gu

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

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 des paiements, en particulier avec 3D Secure. L'API WebOTP, qui utilise un format commun pour prendre en charge les iFrames cross-origin, fournit désormais des OTP 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 mis en forme avec les codes secrets à usage unique liés à l'origine.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Notez que la dernière ligne contient l'origine à laquelle lier le compte, précédée d'un @, suivi du code OTP précédé d'un #.

Lorsqu'il reçoit le SMS, une barre d'information 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 transmet automatiquement le code OTP au site et résout le navigator.credentials.get(). Le site Web peut ensuite extraire le code OTP et terminer le processus de validation.

Découvrez les bases 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 cross-origin

Il est courant de saisir un code secret à usage unique dans un formulaire au sein d'un iFrame multi-origine, notamment pour les paiements. Certains émetteurs de cartes de crédit exigent une étape de validation supplémentaire pour vérifier l'authenticité du payeur. Cette méthode s'appelle 3D Secure. Le formulaire est généralement affiché dans un iFrame sur la même page, comme s'il faisait partie du processus 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 services de paiement intégré affiche un formulaire 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 OTP à l'utilisateur afin qu'il puisse le saisir pour valider son identité.

Utiliser l'API WebOTP à partir d'un iFrame d'origine croisée

Pour utiliser l'API WebOTP depuis un iFrame d'origine croisée, vous devez effectuer deux opérations :

• Ajoutez une annotation à l'origine du frame supérieur et à l'origine de l'iFrame dans le message SMS.
• Configurez la règle d'autorisation pour permettre à l'iFrame d'origine croisée de recevoir directement le code OTP de l'utilisateur.

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

Annoter les origines liées au message SMS

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

@shop.example #123456 @bank.exmple

Configurer la règle relative aux autorisations

Pour utiliser WebOTP dans un iFrame cross-origin, l'intégrateur doit accorder l'accès à cette API via la règle d'autorisation otp-credentials pour éviter tout comportement indésirable. 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 allow de l'iFrame :

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Consultez d'autres exemples sur la façon de spécifier une règle d'autorisation .

Mises en garde

Niveaux d'imbrication

Pour le moment, Chrome n'accepte les appels d'API WebOTP depuis des iFrames multi-origine que s'ils ne comportent 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 sur b.com est acceptée, mais pas sur c.com.

Notez que le scénario suivant n'est pas non plus pris en charge en raison du manque de demande et de la complexité de l'UX.

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

Depuis avril 2021, Safari est compatible avec les iFrames utilisant un format SMS unique avec %. Toutefois, comme la discussion sur les spécifications a conclu qu'il fallait utiliser @, nous espérons que l'implémentation du format SMS pris en charge convergera.

Commentaires

Vos commentaires sont essentiels pour améliorer l'API WebOTP. Alors, essayez-la et dites-nous ce que vous en pensez.

Ressources

• Valider des numéros de téléphone sur le Web avec l'API Web OTP
• Bonnes pratiques concernant le formulaire OTP par SMS
• API WebOTP
• Codes à usage unique liés à l'origine envoyés par SMS

Photo de rupixen.com sur Unsplash