WebOTP API が iframe 内から OTP を受信できるようになりました。
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 を受信できるように権限ポリシーを設定する ユーザーから直接取得できるからです
デモは 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.com（Unsplash より）