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
Einmalpasswörter per SMS 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. Das Wechseln zwischen dem Browser und der SMS-App, um das OTP 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 Einmalpasswort aus einer SMS-Nachricht programmatisch abrufen und es automatisch in das Formular für die Nutzer einfügen. Dazu ist nur ein Tippen erforderlich, ohne dass die App gewechselt werden muss. Die SMS ist speziell formatiert und an den Ursprung gebunden, sodass auch die Wahrscheinlichkeit, dass Phishing-Websites das Einmalpasswort stehlen, verringert wird.

Ein Anwendungsfall, der in WebOTP noch nicht unterstützt wurde, war die Ausrichtung auf einen Ursprung innerhalb eines iFrames. Dies wird in der Regel für die Zahlungsbestätigung verwendet, insbesondere bei 3D Secure. Dank des gemeinsamen Formats zur Unterstützung von ursprungsübergreifenden iFrames 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.example.com #12345

In der letzten Zeile ist der Ursprung enthalten, an den die Bindung erfolgen soll, vorangestellt mit einem @, gefolgt vom OTP, vorangestellt mit einem #.

Wenn die Nachricht eingeht, wird eine Infoleiste eingeblendet, in der der Nutzer aufgefordert wird, seine Telefonnummer zu bestätigen. Nachdem der Nutzer auf den Button 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 das OTP extrahieren und den Bestätigungsprozess abschließen.

Grundlagen zur Verwendung von WebOTP finden Sie unter Telefonnummern im Web mit der WebOTP API bestätigen.

Anwendungsfälle für ursprungsübergreifende iFrames

Die Eingabe eines OTP in ein Formular innerhalb eines Cross-Origin-iFrames ist bei Zahlungsvorgängen üblich. Einige Kreditkartenaussteller verlangen einen zusätzlichen Bestätigungsschritt, um die Authentizität des Zahlers zu prüfen. Dies wird als 3D Secure bezeichnet. Das Formular wird normalerweise in einem iFrame auf derselben Seite angezeigt, als wäre es Teil des Zahlungsablaufs.

Beispiel:

  • Ein Nutzer besucht shop.example, um ein Paar Schuhe mit einer Kreditkarte zu kaufen.
  • Nach Eingabe der Kreditkartennummer zeigt der integrierte Zahlungsdienstleister 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 eine SMS mit einem OTP an den Nutzer, damit er es eingeben kann, um seine Identität zu bestätigen.

How to use WebOTP API from a cross-origin iframe

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

  • Geben Sie in der SMS sowohl den Ursprung des obersten Frames als auch den Ursprung des iFrames an.
  • Konfigurieren Sie die Berechtigungsrichtlinie so, dass der ursprungsübergreifende iFrame das 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.

SMS-Nachricht mit gebundenen Ursprüngen annotieren

Wenn die WebOTP API innerhalb eines iFrames aufgerufen wird, muss die SMS-Nachricht den Ursprung des obersten Frames enthalten, dem @ vorangestellt ist, gefolgt vom OTP, dem # vorangestellt ist, gefolgt vom iFrame-Ursprung, dem @ vorangestellt ist.

@shop.example #123456 @bank.exmple

Berechtigungsrichtlinie konfigurieren

Wenn WebOTP in einem ursprungsübergreifenden iFrame verwendet werden soll, muss der Einbettende den Zugriff auf diese API über die Berechtigungsrichtlinie „otp-credentials“ gewähren, um unbeabsichtigtes 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 Festlegen einer Berechtigungsrichtlinie

Vorsichtsmaßnahmen

Verschachtelungsebenen

Derzeit unterstützt Chrome nur WebOTP API-Aufrufe von ursprungsübergreifenden iFrames, die höchstens 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 (ruft WebOTP API auf)

Interoperabilität

Andere Browser-Engines als Chromium implementieren die WebOTP API nicht, aber Safari verwendet dasselbe SMS-Format mit input[autocomplete="one-time-code"]-Unterstützung. In Safari wird, sobald eine SMS mit einem ursprungsgebundenen Einmalcodeformat mit dem übereinstimmenden Ursprung eingeht, auf der Tastatur vorgeschlagen, das OTP in das Eingabefeld einzugeben.

Seit April 2021 unterstützt Safari iFrames mit einem eindeutigen SMS-Format mit %. Da die Diskussion über die Spezifikation jedoch zu dem Schluss kam, stattdessen @ zu verwenden, hoffen wir, dass die Implementierung des unterstützten SMS-Formats konvergiert.

Feedback

Ihr Feedback ist von unschätzbarem Wert, um die WebOTP API zu verbessern. Probieren Sie sie also aus und teilen Sie uns Ihre Meinung mit.

Ressourcen