WebOTP API 現在可以從 iframe 中接收動態密碼。
WebOTP API 可讓網站透過程式 取得簡訊中的動態密碼並輸入 使用者只要輕觸一下，就能自動填入表單 應用程式。簡訊具有特殊格式，並且會繫結至來源，因此可緩解 也讓網路釣魚網站竊取動態密碼
WebOTP 尚未支援的其中一項用途是指定來源 在 iframe 內顯示通常用於確認付款，特別是 採用 3D Secure 即可。具有共通點的 支援跨來源格式 iframes，WebOTP API 現在會提供 自 Chrome 91 版起，繫結至巢狀來源的 OTP。
WebOTP API 的運作方式
WebOTP API 本身就夠簡單：
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
簡訊必須採用來源限制的一次性格式 代碼。
Your OTP is: 123456.
@web-otp.glitch.me #12345
請注意，在最後一行包含要與前面加上
@，後面加上 # 開頭的動態密碼。
收到簡訊時，系統會彈出資訊列，提示使用者
驗證電話號碼。使用者按下 Verify 按鈕後，
瀏覽器會自動將動態密碼轉達給該網站並解析
navigator.credentials.get()。接著網站就能擷取動態密碼，並填妥
進行驗證
如要瞭解 WebOTP 的基本使用方法，請參閱「使用 WebOTP API。
跨來源 iframe 用途
經常在付款時在跨來源 iframe 中輸入動態密碼 情境部分信用卡發卡機構會要求你進行額外的驗證步驟， 確認付款人真實性。這項機制稱為 3D Secure，其格式為 通常會在相同網頁的 iframe 內顯示， 付款流程。
例如：
- 使用者前往
shop.example購買了一雙信用卡鞋。 - 輸入信用卡號碼後，整合付款服務供應商會顯示
表單內顯示
bank.example的表單，要求使用者驗證身分 電話號碼，快速結帳。 - 「
bank.example」會傳送含有動態密碼的簡訊給使用者， 輸入 PIN 碼，藉此驗證身分。
如何透過跨來源 iframe 使用 WebOTP API
如要從跨來源 iframe 中使用 WebOTP API，您必須完成兩個步驟 事物：
- 在簡訊文字中同時註解頂端頁框和 iframe 來源 撰寫新的電子郵件訊息
- 設定權限政策，允許跨來源 iframe 接收動態密碼 直接從使用者登入
你可以自行前往 https://web-otp-iframe-demo.stackblitz.io.
在簡訊中為繫結來源加上註解
從 iframe 內呼叫 WebOTP API 時，簡訊必須
包含頂層頁框起點 (在 @ 開頭，後面加上 #
緊接在 iframe 來源之前的 @ 後方。
@shop.example #123456 @bank.exmple
設定權限政策
如要在跨來源 iframe 中使用 WebOTP，嵌入器必須授予存取權 透過 otp 憑證權限政策設定 API，避免發生非預期的情況 行為一般來說，您可以透過兩種方式達成這個目標：
- 透過 HTTP 標頭：
Permissions-Policy: otp-credentials=(self "https://bank.example")
- 透過 iframe
allow屬性：
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
查看更多指定權限政策的範例 。
注意事項
巢狀層級
目前 Chrome 僅支援來自跨來源 iframe 的 WebOTP API 呼叫 其祖系鏈結中「最多」有一個不重複的起點。在 下列情況：
- 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 中使用。
請注意，由於缺乏需求，系統也無法支援以下情況 和使用者體驗的複雜程度
- a.com ->b.com ->a.com (呼叫 WebOTP API)
互通性
雖然 Chromium 以外的瀏覽器引擎並未實作 WebOTP API，
Safari 採用相同的簡訊格式
以及 input[autocomplete="one-time-code"] 支援。在 Safari 中，
如果簡訊含有來源端的一次性代碼格式，則會收到與相符
鍵盤會建議在輸入欄位中輸入動態密碼。
自 2021 年 4 月起，Safari 支援使用專屬簡訊格式的 iframe
%。
不過，正如本規格討論最後與 @ 的討論，我們希望這些結果
這次支援的簡訊格式會交集。
意見回饋
你的寶貴意見對提升 WebOTP API 品質至關重要，現在就試試看吧！ 並告訴我們 。
資源
rupixen.com 由 Unsplash 提供的相片