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

Die WebOTP API kann jetzt OTPs innerhalb von iFrames empfangen.

Eiji Kitamura
Yi Gu
SMS-OTPs (Einmalpasswörter) werden häufig zur Bestätigung von Telefonnummern verwendet, z. B. als zweiter Schritt bei der Authentifizierung oder zur Bestätigung von Zahlungen im Web. 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 abrufen und automatisch mit nur einem Tippen in das Formular für die Nutzer eingeben, ohne die App wechseln zu müssen. Die SMS ist speziell formatiert und an den Ursprung gebunden, wodurch die Wahrscheinlichkeit verringert wird, dass Phishing-Websites das Einmalpasswort stehlen.

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 die Quelle gebundenen Einmalcodes formatiert sein.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Beachten Sie, dass in der letzten Zeile der zu bindende Ursprung mit einer @ gefolgt vom OTP mit einer # vorangestellt ist.

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 OTP automatisch an die Website weiter und löst die 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. Einige Kreditkartenaussteller verlangen einen zusätzlichen Bestätigungsschritt, um die Echtheit 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.
Ein WebOTP API-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:

  • Über den 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 für die Angabe 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.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 komplexer UX ebenfalls nicht unterstützt.

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

Interoperabilität

Andere Browser-Engines als Chromium implementieren die WebOTP API nicht. Safari verwendet jedoch dasselbe SMS-Format wie input[autocomplete="one-time-code"]. 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 hilft uns, die WebOTP API zu verbessern. Probieren Sie sie also aus und teilen Sie uns mit, was Sie davon halten.

Ressourcen

Foto von rupixen.com auf Unsplash