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 häufig verwendet, um Telefonnummern zu bestätigen, z. B. als zweiter Schritt bei der Authentifizierung, oder um Zahlungen im Web zu bestätigen. Wenn Sie jedoch zwischen dem Browser und der SMS-App wechseln, um das OTP zu kopieren und einzufügen oder manuell einzugeben, können leicht Fehler auftreten und die Nutzerfreundlichkeit wird beeinträchtigt.

Mit der WebOTP API können Websites das Einmalpasswort programmatisch aus einer SMS-Nachricht abrufen und automatisch durch einmaliges Tippen in das Formular eingeben, ohne die App zu wechseln. Die SMS ist speziell formatiert und an den Ursprung gebunden. Dadurch wird die Wahrscheinlichkeit verringert, dass Phishing-Websites das OTP stehlen können.

Ein Anwendungsfall, der in WebOTP noch nicht unterstützt wird, ist das Targeting auf einen Ursprung innerhalb eines iframe. Dieser wird in der Regel für die Zahlungsbestätigung verwendet, insbesondere bei 3D Secure. Da die WebOTP API das gängige Format zur Unterstützung von iframes mit unterschiedlichen Ursprüngen ist, liefert sie ab Chrome 91 OTPs, die an verschachtelte Ursprünge gebunden sind.

Funktionsweise der WebOTP API

Die WebOTP API selbst ist recht einfach:

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

Die SMS-Nachricht muss mit den an den Ursprung gebundenen Einmalcodes formatiert sein.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Beachten Sie, dass sie in der letzten Zeile den Ursprung enthält, dem ein @ vorangestellt werden soll, gefolgt von dem OTP mit vorangestelltem #.

Wenn die Textnachricht 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 OTP automatisch an die Website weiter und löst das navigator.credentials.get() auf. Die Website kann dann die OTP extrahieren und den Bestätigungsvorgang abschließen.

Informationen zu den Grundlagen der Verwendung von WebOTP

Anwendungsfälle für iframes mit unterschiedlichen Ursprüngen

Die Eingabe eines OTP in einem Formular in einem herkunftsübergreifenden iFrame ist in Zahlungsszenarien üblich. Bei einigen Kreditkartenausstellern ist ein zusätzlicher Bestätigungsschritt erforderlich, um die Authentizität des Zahlungspflichtigen zu überprüfen. Dieser Vorgang wird als 3D Secure bezeichnet. Das Formular wird in der Regel in einem Iframe auf derselben Seite angezeigt, als wäre es Teil des Zahlungsvorgangs.

Beispiel:

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

WebOTP API über einen iframe mit unterschiedlichen Ursprüngen verwenden

Wenn Sie die WebOTP API in einem iframe mit unterschiedlichen Ursprüngen verwenden möchten, müssen Sie zwei Dinge tun:

  • Fügen Sie in der SMS-Textnachricht sowohl den Ursprung des Top-Frames als auch den des iFrames hinzu.
  • Konfigurieren Sie die Berechtigungsrichtlinie so, dass der iframe mit unterschiedlichen Ursprüngen OTP 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.

gebundene Ursprünge in der SMS-Textnachricht annotieren

Wenn die WebOTP API innerhalb eines Iframes aufgerufen wird, muss die SMS-Textnachricht den Ursprung des Top-Frames mit vorangestelltem @, gefolgt vom OTP mit vorangestelltem # und gefolgt vom Ursprung des Iframes mit vorangestelltem @ enthalten.

@shop.example #123456 @bank.exmple

Berechtigungsrichtlinie konfigurieren

Wenn WebOTP in einem iframe mit unterschiedlichen Ursprüngen verwendet werden soll, muss der Einbettungscode-Anbieter über die Berechtigungsrichtlinie für otp-Anmeldedaten Zugriff auf diese API gewähren, um unbeabsichtigtes Verhalten zu vermeiden. 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 höchstens einen eindeutigen Ursprung in der übergeordneten Kette haben. In den folgenden Fällen:

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

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

Das folgende Szenario wird aufgrund mangelnder Nachfrage und komplexer UX ebenfalls nicht unterstützt.

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

Interoperabilität

Die WebOTP API wird zwar in anderen Browser-Engines als Chromium nicht implementiert, aber Safari verwendet dasselbe SMS-Format wie die input[autocomplete="one-time-code"]-Unterstützung. Sobald in Safari eine SMS mit einem an den Ursprung gebundenen Einmalcode-Format mit dem übereinstimmenden Ursprung eingeht, schlägt die Tastatur vor, den OTP in das Eingabefeld einzugeben.

Seit April 2021 unterstützt Safari iframes mit einem eindeutigen SMS-Format mit %. Da in der Spezifikationsdiskussion jedoch @ als Standard festgelegt wurde, hoffen wir, dass die Implementierung des unterstützten SMS-Formats konvergiert.

Feedback

Ihr Feedback ist für die Verbesserung der WebOTP API von unschätzbarem Wert. Probieren Sie es also aus und teilen Sie uns Ihre Meinung mit.

Ressourcen

Foto von rupixen.com auf Unsplash