WebOTP API 現在可以從 iframe 接收動態密碼。
WebOTP API 可讓網站透過程式輔助方式，從簡訊取得動態密碼，並自動在表單中輸入，使用者只要輕觸一下即可完成，不必切換應用程式。簡訊採用特殊格式，且與來源繫結，因此也能降低網路釣魚網站竊取動態密碼的機率。
WebOTP 尚未支援的用途之一，是指定 iframe 內的來源。這通常用於確認付款，尤其是 3D Secure。WebOTP API 採用支援跨源 iframe 的通用格式，自 Chrome 91 起，可提供繫結至巢狀來源的一次性密碼。
WebOTP API 的運作方式
WebOTP API 本身相當簡單：
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
簡訊必須採用來源繫結動態密碼格式。
Your OTP is: 123456.
@web-otp.example.com #12345
請注意，最後一行包含要繫結的來源 (前面加上 @)，後面接著動態密碼 (前面加上 #)。
收到簡訊時，系統會彈出資訊列，提示使用者驗證電話號碼。使用者點選「Verify」按鈕後，瀏覽器會自動將動態密碼轉送至網站，並解析 navigator.credentials.get()。接著，網站可以擷取動態密碼並完成驗證程序。
如要瞭解使用 WebOTP 的基本概念，請參閱「使用 WebOTP API 驗證網路上的電話號碼」。
跨來源 iframe 用途
在付款情境中，使用者通常會在跨來源 iframe 的表單中輸入動態密碼。部分信用卡發卡機構會要求額外的驗證步驟，確認付款人身分。這稱為 3D Secure，表單通常會顯示在同一頁面的 iframe 中，就像是付款流程的一部分。
例如：
- 使用者造訪
shop.example，使用信用卡購買一雙鞋。 - 輸入信用卡號碼後，整合式付款服務供應商會在 iframe 中顯示
bank.example的表單，要求使用者驗證電話號碼，以便快速結帳。 bank.example會傳送含有動態密碼的簡訊給使用者，讓使用者輸入動態密碼來驗證身分。
如何從跨來源 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-credentials 權限政策授予這個 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 品質，歡迎試用並與我們分享您的想法。