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

Die WebOTP API kann jetzt Einmalpasswörter aus iFrames empfangen.

Eiji Kitamura
Yi Gu
SMS-OTPs (Einmalpasswörter) werden häufig verwendet, um Telefonnummern zu bestätigen, z. B. als zweiter Schritt bei der Authentifizierung oder um Zahlungen im Web zu bestätigen. Das Wechseln zwischen dem Browser und der SMS-App, um das Einmalkennwort zu kopieren und einzufügen oder manuell einzugeben, ist jedoch fehleranfällig und beeinträchtigt die Nutzerfreundlichkeit.

Mit der WebOTP API können Websites das Einmalkennwort programmatisch aus einer SMS abrufen und automatisch in das Formular für die Nutzer eingeben. Dazu ist nur ein Tippen erforderlich, ohne dass die App gewechselt werden muss. Die SMS ist speziell formatiert und an den Ursprung gebunden, sodass das Risiko, dass Phishing-Websites das Einmalkennwort stehlen, verringert wird.

Ein Anwendungsfall, der in WebOTP noch nicht unterstützt wurde, war das Targeting auf einen Ursprung in einem iFrame. Dies wird in der Regel zur Zahlungsbestätigung verwendet, insbesondere bei 3D Secure. Da das gemeinsame Format zur Unterstützung von ursprungsübergreifenden iFrames verwendet wird, liefert die WebOTP API ab Chrome 91 OTPs, die 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 muss mit den ursprungsgebundenen Einmalcodes formatiert sein.

Your OTP is: 123456.  @web-otp.glitch.me #12345

Beachten Sie, dass die letzte Zeile den Ursprung enthält, der gebunden werden soll, gefolgt von einem @ und dem OTP, gefolgt von einem #.

Wenn die SMS eingeht, wird eine Infoleiste eingeblendet, in der der Nutzer aufgefordert wird, seine Telefonnummer zu bestätigen. Nachdem der Nutzer auf die Schaltfläche Verify geklickt hat, leitet der Browser das Einmalkennwort automatisch an die Website weiter und löst die navigator.credentials.get() auf. Die Website kann dann das Einmalkennwort extrahieren und den Bestätigungsvorgang abschließen.

Telefonnummern im Web mit der WebOTP API bestätigen

Anwendungsfälle für ursprungsübergreifende iFrames

Die Eingabe eines OTP in einem Formular in einem Cross-Origin-iFrame ist in Zahlungsszenarien üblich. Einige Kreditkartenaussteller verlangen einen zusätzlichen Bestätigungsschritt, um die Identität des Zahlungspflichtigen zu überprüfen. Dieses Verfahren wird als 3D Secure bezeichnet. Das Formular wird in der Regel in einem iFrame auf derselben Seite wie der Zahlungsablauf angezeigt.

Beispiel:

  • Ein Nutzer besucht shop.example, um Schuhe mit einer Kreditkarte zu kaufen.
  • Nach der Eingabe der Kreditkartennummer zeigt der integrierte Zahlungsanbieter ein Formular von bank.example in einem iFrame an, in dem der Nutzer aufgefordert wird, seine Telefonnummer für die schnelle Kaufabwicklung zu bestätigen.
  • bank.example sendet eine SMS mit einem Einmalkennwort an den Nutzer, damit er es zur Bestätigung seiner Identität eingeben kann.

WebOTP API aus einem iframe mit ursprungsübergreifendem Zugriff verwenden

Wenn Sie die WebOTP API in einem ursprungsübergreifenden iFrame verwenden möchten, müssen Sie zwei Dinge tun:

  • Geben Sie sowohl den Ursprung des Top-Frames als auch den Ursprung des iFrames in der SMS an.
  • Konfigurieren Sie die Berechtigungsrichtlinie so, dass das ursprungsübergreifende iFrame das Einmalkennwort direkt vom Nutzer empfangen kann.
WebOTP API in einem iFrame in Aktion.

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

Bound-Origins in der SMS-Nachricht annotieren

Wenn die WebOTP API aus einem iFrame heraus aufgerufen wird, muss die SMS den Ursprung des Top-Frames, dem @ vorangestellt ist, gefolgt vom OTP, dem # vorangestellt ist, gefolgt vom Ursprung des iFrames, dem @ vorangestellt ist, enthalten.

@shop.example #123456 @bank.exmple

Berechtigungsrichtlinie konfigurieren

Wenn Sie WebOTP in einem iframe mit ursprungsübergreifendem Zugriff verwenden möchten, muss der Einbettungscode über die Berechtigungsrichtlinie „otp-credentials“ Zugriff auf diese API gewähren, um unerwünschtes Verhalten zu vermeiden. Im Allgemeinen gibt es zwei Möglichkeiten, dieses Ziel zu erreichen:

  • Über 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 WebOTP-API-Aufrufe nur von ursprungsübergreifenden iFrames, die nicht mehr als einen eindeutigen Ursprung in ihrer Ancestor-Kette haben. In den folgenden Szenarien:

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

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

Das folgende Szenario wird aufgrund mangelnder Nachfrage und UX-Komplexität ebenfalls nicht unterstützt.

  • a.com -> b.com -> a.com (WebOTP API-Aufrufe)

Interoperabilität

Browser-Engines, die nicht auf Chromium basieren, implementieren die WebOTP API nicht. Safari verwendet jedoch dasselbe SMS-Format wie input[autocomplete="one-time-code"]. In Safari wird, sobald eine SMS mit einem ursprungsgebundenen Einmalcode-Format mit dem übereinstimmenden Ursprung eingeht, auf der Tastatur vorgeschlagen, den Einmalcode in das Eingabefeld einzugeben.

Seit April 2021 unterstützt Safari iFrames mit einem eindeutigen SMS-Format mit %. Da die Diskussion über die Spezifikation jedoch mit der Entscheidung für @ abgeschlossen wurde, hoffen wir, dass sich die Implementierung des unterstützten SMS-Formats angleichen wird.

Feedback

Ihr Feedback ist für uns sehr wichtig, um die WebOTP API zu verbessern. Probieren Sie sie also aus und teilen Sie uns Ihre Meinung mit.

Ressourcen

Foto von rupixen.com auf Unsplash