WebOTP API を使用してクロスオリジンの iframe 内で OTP フォームに入力する

WebOTP API が iframe 内から OTP を受信できるようになりました。

SMS OTP(ワンタイム パスワード)は一般的に、 たとえば、認証の 2 つ目の手順として、またはウェブ上での支払いの確認に使用できます。 ただし、ブラウザと SMS アプリを切り替えて、コピー&ペーストするか、手動で ワンタイム パスワードを入力すると、間違いが起こりやすくなり、ユーザー エクスペリエンスの妨げになります。

WebOTP API を使用すると、ウェブサイトでプログラムによって SMS メッセージからワンタイム パスワードを取得して入力します。 ボタンをクリックするだけで自動的に 。SMS は特殊な形式で、送信元にバインドされているため、 OTP を盗むフィッシング サイトもあります。

WebOTP でまだサポートされていないユースケースの 1 つは、オリジンをターゲットとしています。 。これは通常、お支払いの確認に使用されます。特に、 3D セキュアに対応。共通の共通点や 新しい P-MAX キャンペーンを 、WebOTP API により、 Chrome 91 以降、OTP はネストされたオリジンにバインドされます。

WebOTP API の仕組み

WebOTP API 自体はとてもシンプルです。

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

SMS メッセージは、配信元にバインドされた 1 回限りの

Your OTP is: 123456.

@web-otp.glitch.me #12345

最後の行には、先頭に @ の後に OTP が続き、# が続きます。

テキスト メッセージを受信すると、情報バーがポップアップ表示され、 電話番号を確認してください。ユーザーが Verify ボタンをクリックすると、 ブラウザがサイトに OTP を自動的に転送し、 navigator.credentials.get()。その後、ウェブサイトは OTP を抽出して 確認プロセスに進みます。

WebOTP の基本的な使い方については、 WebOTP API

クロスオリジンの iframe の使用例

支払いでは、クロスオリジン iframe 内のフォームに OTP を入力するのが一般的 説明します。一部のクレジット カード発行会社では、 支払者の正当性をチェックします。これは 3D セキュアと呼ばれ、 一般的には、ウェブページの一部であるかのように、 。

例:

  • ユーザーが shop.example にアクセスし、クレジット カードを使って靴を購入しました。
  • クレジット カード番号を入力すると、統合された決済機関に ユーザーに確認を求める、iframe 内の bank.example フォーム 電話番号を登録して、すばやく購入手続きを行えるようにします。
  • bank.example が OTP を含む SMS をユーザーに送信し、 本人確認のための質問を入力します。

クロスオリジンの iframe から WebOTP API を使用する方法

クロスオリジンの iframe 内から WebOTP API を使用するには、次の 2 つのことを行う必要があります。 :

  • SMS テキスト内のトップフレームのオリジンと iframe のオリジンの両方にアノテーションを付ける 表示されます。
  • クロスオリジンの iframe が OTP を受信できるように権限ポリシーを設定する ユーザーから直接取得できるからです
で確認できます。 <ph type="x-smartling-placeholder">
</ph>
iframe 内で WebOTP API が動作する様子。

デモは https://web-otp-iframe-demo.stackblitz.io.

bound-origin を SMS テキスト メッセージにアノテーションを付ける

iframe 内から WebOTP API を呼び出す場合、SMS テキスト メッセージは 先頭に @ が付加されたトップフレーム オリジンと、その後に # が付加された OTP が含まれます。 その後に @ から始まる iframe オリジン。

@shop.example #123456 @bank.exmple

権限ポリシーを構成

クロスオリジンの iframe で WebOTP を使用するには、埋め込み元がこのアクセス権を付与する必要があります。 otp-credentials 権限ポリシーを介した API の使用により、意図しない 確認します。一般的に、この目標を達成するには 2 つの方法があります。

  • HTTP ヘッダー経由:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • iframe の allow 属性を使用する場合:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

権限ポリシーの指定方法に関するその他の例を見る

注意点

ネスト レベル

現時点では、Chrome はクロスオリジン iframe からの WebOTP API 呼び出しのみをサポートしています 一意のオリジンが祖先チェーンに 1 つしかないもの。 次のようなシナリオがあります。

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

b.com での WebOTP の使用はサポートされていますが、c.com ではサポートされていません。

以下のシナリオも、需要が不足しているためサポートされていません。 UX の複雑さです

  • a.com ->b.com ->a.com(WebOTP API を呼び出す)

相互運用性

Chromium 以外のブラウザ エンジンは WebOTP API を実装しませんが、 Safari は同じ SMS 形式を共有しています サポートしています。input[autocomplete="one-time-code"]Safari では、 送信元にバインドされたワンタイム コード形式を含む SMS が、 入力フィールドに OTP を入力するようキーボードが提案します。

2021 年 4 月現在、Safari は %。 ただし、仕様についての議論では @ で終了したため、 サポートされている SMS 形式の実装が収束します。

フィードバック

皆様からのフィードバックは、WebOTP API を改善するうえで非常に重要です。ぜひお試しください。 お知らせください 思います。

リソース

写真撮影: rupixen.comUnsplash より)