OTP-Formulare in ursprungsübergreifenden iFrames mit der WebOTP API ausfüllen

Die WebOTP API kann jetzt OTPs aus iFrames empfangen.

Eiji Kitamura
Yi Gu
SMS-OTPs (Einmalpasswörter) werden in der Regel zur Bestätigung von Telefonnummern verwendet, Dies kann beispielsweise ein zweiter Authentifizierungsschritt oder die Bestätigung von Zahlungen im Internet sein. Beim Wechsel zwischen Browser und SMS-App, zum Kopieren und Einfügen oder beim manuellen So können Fehler passieren und die Nutzererfahrung wird verbessert.

Die WebOTP API ermöglicht Websites, das Einmalpasswort aus einer SMS erhalten und es eingeben automatisch im Formular erstellen, ohne zwischen den Die SMS ist speziell formatiert und an den Ursprung gebunden, dass Phishing-Websites auch das OTP stehlen können.

Ein Anwendungsfall, der in WebOTP noch nicht unterstützt wurde, war die Ausrichtung auf einen Ursprung innerhalb eines iFrames. Sie wird in der Regel zur Zahlungsbestätigung verwendet, insbesondere mit 3D Secure. Das gemeinsame Format zur Unterstützung von ursprungsübergreifenden iFrames liefert die WebOTP API jetzt OTPs, die ab Chrome 91 an verschachtelte Ursprünge gebunden sind.

Funktionsweise der WebOTP API

Die WebOTP API selbst ist einfach genug:

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

Die SMS-Nachricht muss mit der ursprungsgebundenen einmaligen Codes.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Beachten Sie, dass in der letzten Zeile der Ursprung angegeben ist, dem der Wert vorangestellt werden soll. ein @ gefolgt von dem OTP mit vorangestelltem #.

Wenn die SMS eingeht, wird eine Infoleiste eingeblendet, in der der Nutzer aufgefordert wird, ihre Telefonnummer zu bestätigen. Nachdem der Nutzer auf die Schaltfläche Verify geklickt hat, wird der Der Browser leitet das OTP automatisch an die Website weiter und löst das navigator.credentials.get(). Die Website kann dann das OTP extrahieren und des Überprüfungsverfahrens.

Grundlegende Informationen zur Verwendung von WebOTP finden Sie unter Telefonnummern im Web mit dem WebOTP API

Anwendungsfälle für ursprungsübergreifende iFrames

Bei Zahlungen ist die Eingabe eines OTP in ein Formular innerhalb eines ursprungsübergreifenden iFrames üblich Szenarien durchführen. Bei einigen Kreditkartenausstellern ist ein zusätzlicher Bestätigungsschritt erforderlich, die Authentizität des Zahlungspflichtigen prüfen. Das heißt 3D Secure. Das Formular ist normalerweise innerhalb eines iFrames auf derselben Seite, als wäre er Teil des Zahlungsablauf.

Beispiel:

  • Ein Nutzer besucht shop.example, um mit einer Kreditkarte ein Paar Schuhe zu kaufen.
  • Nach Eingabe der Kreditkartennummer zeigt der integrierte Zahlungsanbieter eine Formular von bank.example in einem iFrame, in dem der Nutzer aufgefordert wird, seine um schnell bezahlen zu können.
  • bank.example sendet dem Nutzer eine SMS mit einem OTP, damit er um ihre Identität zu bestätigen.

WebOTP API über einen ursprungsübergreifenden iFrame verwenden

Um die WebOTP API in einem ursprungsübergreifenden iFrame zu verwenden, müssen Sie zwei Dinge:

  • Im SMS-Text sowohl den Ursprung des Top-Frames als auch den iFrame-Ursprung annotieren .
  • Berechtigungsrichtlinie so konfigurieren, dass der ursprungsübergreifende iFrame das OTP empfangen kann direkt von den Nutzenden.
<ph type="x-smartling-placeholder">
</ph>
. WebOTP API in einem iFrame in Aktion.

Sie können die Demo hier ausprobieren: https://web-otp-iframe-demo.stackblitz.io.

bound-Ursprung in der SMS-Textnachricht annotieren

Wenn die WebOTP API aus einem iFrame aufgerufen wird, muss die SMS-Textnachricht den Top-Frame-Ursprung mit vorangestelltem @ gefolgt von dem OTP mit vorangestelltem # einschließen gefolgt vom iFrame-Ursprung mit vorangestelltem @.

@shop.example #123456 @bank.exmple

Berechtigungsrichtlinie konfigurieren

Um WebOTP in einem ursprungsübergreifenden iFrame zu verwenden, muss der Einbettungscode Zugriff darauf gewähren API über die Berechtigungsrichtlinie „otp-credentials“, um unbeabsichtigte Eingaben zu vermeiden verhalten. Im Allgemeinen gibt es zwei Möglichkeiten, dieses Ziel zu erreichen:

  • im HTTP-Header:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • über das iFrame-Attribut allow:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Weitere Beispiele zum Angeben einer Berechtigungsrichtlinie

Vorsichtsmaßnahmen

Verschachtelungsebenen

Derzeit unterstützt Chrome nur WebOTP API-Aufrufe von ursprungsübergreifenden iFrames die nicht mehr als einen eindeutigen Ursprung in ihrer Ancestor-Kette haben. Im folgenden Szenarien:

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

Die Verwendung von WebOTP in b.com wird unterstützt, die Verwendung in c.com jedoch nicht.

Beachten Sie, dass das folgende Szenario ebenfalls aufgrund fehlender Nachfrage nicht unterstützt wird. und UX-Komplexitäten.

  • a.de -> b.com -> a.com (ruft WebOTP API auf)

Interoperabilität

Die WebOTP API wird zwar nicht in anderen Browser-Engines als Chromium implementiert, Safari verwendet dasselbe SMS-Format. mit der input[autocomplete="one-time-code"]-Unterstützung. Sobald in Safari ein SMS, die ein ursprungsgebundenes Einmalcodeformat enthalten, kommen mit dem übereinstimmenden Ursprung haben, schlägt die Tastatur vor, das OTP in das Eingabefeld einzugeben.

Seit April 2021 unterstützt Safari iFrame mit einem speziellen SMS-Format, % Nach der Spezifikationsdiskussion für @ hoffen wir jedoch, Implementierung des unterstützten SMS-Formats konvergieren.

Feedback

Ihr Feedback ist von unschätzbarem Wert für die Verbesserung der WebOTP API. Probieren Sie es einfach aus. und informieren Sie uns was Sie denken.

Ressourcen

Foto von rupixen.com auf Unsplash