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 Verifizierung von Telefonnummern, z. B. als zweiter Authentifizierungsschritt, oder zur Verifizierung von Zahlungen im Web verwendet. Wenn Sie jedoch zwischen dem Browser und der SMS-App wechseln, das OTP kopieren, einfügen oder manuell eingeben, machen Sie Fehler leicht und erschweren die Nutzerfreundlichkeit.

Mit der WebOTP API können Websites das Einmalpasswort programmatisch aus einer SMS abrufen und mit nur einem Tippen automatisch in das Formular eingeben, ohne die App zu wechseln. Die SMS ist speziell formatiert und an den Ursprung gebunden, sodass auch Phishing-Websites das OTP nicht stehlen können.

Ein Anwendungsfall, der noch nicht in WebOTP unterstützt wurde, war die Ausrichtung auf einen Ursprung in einem iFrame. Sie wird in der Regel zur Zahlungsbestätigung verwendet, insbesondere bei 3D Secure. Da die WebOTP API das gemeinsame Format zur Unterstützung ursprungsübergreifender iFrames hat, stellt sie jetzt ab Chrome 91 an verschachtelte Ursprünge gebundene OTPs bereit.

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

Die letzte Zeile enthält den Ursprung, an den ein @ gefolgt von dem OTP mit vorangestelltem # gebunden werden soll.

Wenn die SMS eingeht, wird eine Infoleiste angezeigt und der Nutzer wird aufgefordert, seine Telefonnummer zu bestätigen. Nachdem der Nutzer auf die Schaltfläche Verify geklickt hat, leitet der Browser automatisch das OTP an die Website weiter und löst das navigator.credentials.get()-Objekt auf. Die Website kann dann das OTP extrahieren und die Überprüfung abschließen.

Informationen zu den Grundlagen der 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 ursprungsübergreifenden iFrames ist in Zahlungsszenarien üblich. Bei einigen Kreditkartenausstellern ist ein zusätzlicher Bestätigungsschritt erforderlich, um die Authentizität des Zahlungspflichtigen zu überprüfen. Dies wird als 3D Secure bezeichnet. Das Formular wird normalerweise in einem iFrame auf derselben Seite angezeigt, als ob es Teil des Zahlungsablaufs wäre.

Beispiel:

  • Ein Nutzer besucht die Website von shop.example, um mit einer Kreditkarte Schuhe 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 zu bestätigen, um schnell bezahlen zu können.
  • bank.example sendet eine SMS mit einem OTP an den Nutzer, damit er seine Identität bestätigen kann.

WebOTP API über einen ursprungsübergreifenden iFrame verwenden

Wenn Sie die WebOTP API in einem ursprungsübergreifenden iFrame verwenden möchten, müssen Sie zwei Schritte ausführen:

  • Annotieren Sie sowohl den Ursprung des oberen Frames als auch den iFrame-Ursprung in der SMS-Textnachricht.
  • Konfigurieren Sie die Berechtigungsrichtlinie so, dass der ursprungsübergreifende iFrame 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.

Grenzquellen an die SMS-Textnachricht annotieren

Wenn die WebOTP API in einem iFrame aufgerufen wird, muss die SMS-Textnachricht den Ursprung des oberen Frames mit vorangestelltem @, gefolgt von dem OTP mit vorangestelltem # und dem iFrame-Ursprung mit vorangestelltem @ enthalten.

@shop.example #123456 @bank.exmple

Berechtigungsrichtlinie konfigurieren

Um WebOTP in einem ursprungsübergreifenden iFrame zu verwenden, muss der Einbettunger über die Berechtigungsrichtlinie „otp-credentials“ Zugriff auf diese API 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 Angeben einer Berechtigungsrichtlinie

Wichtige Hinweise

Ebenen verschachteln

Derzeit unterstützt Chrome nur WebOTP API-Aufrufe von ursprungsübergreifenden iFrames, die nicht mehr als einen eindeutigen Ursprung in der 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 auf b.com wird unterstützt, die Verwendung in c.com jedoch nicht.

Das folgende Szenario wird ebenfalls nicht unterstützt, da die Nachfrage fehlt und die UX nicht komplex ist.

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

Interoperabilität

Während die WebOTP API nicht in anderen Browser-Engines als Chromium implementiert ist, verwendet Safari das gleiche SMS-Format wie die input[autocomplete="one-time-code"]-Unterstützung. Sobald in Safari eine SMS mit einem ursprungsgebundenen Einmalcodeformat mit dem übereinstimmenden Ursprung eingeht, schlägt die Tastatur vor, das OTP in das Eingabefeld einzugeben.

Seit April 2021 unterstützt Safari iFrame mit einem speziellen SMS-Format mit %. Da die Diskussion zu den Spezifikationen jedoch zu @ geführt hat, hoffen wir, dass die Implementierung des unterstützten SMS-Formats konvergieren wird.

Feedback

Ihr Feedback ist von unschätzbarem Wert für die Verbesserung der WebOTP API. Probieren Sie es aus und lassen Sie uns wissen, was Sie davon halten.

Ressourcen

Foto von rupixen.com auf Unsplash