使用 WebOTP API 在跨來源 iframe 中填入動態密碼表單

WebOTP API 現在可以從 iframe 中接收動態密碼。

Eiji Kitamura
Yi Gu
簡訊動態密碼 (OTP) 通常用於驗證電話號碼，例如做為驗證的第二步驟，或驗證網站上的付款。不過，在瀏覽器和簡訊應用程式之間切換，以便複製貼上或手動輸入 OTP，很容易出錯，也會讓使用者體驗變得更不順暢。

WebOTP API 可讓網站透過程式輔助方式，從簡訊取得動態密碼，使用者只需輕觸一下即可將其輸入到應用程式中，而使用者只需輕觸一下簡訊即可將其輸入。簡訊採用特殊格式，並且與來源繫結，因此可減少網路釣魚網站竊取動態密碼的機會。

WebOTP 尚未支援的用途之一，是指定 iframe 內的來源。通常用於確認付款，特別是搭配 3D Secure 時。有了支援跨來源 iframe 的通用格式，WebOTP API 現可從 Chrome 91 開始提供綁定至巢狀來源的 OTP。

WebOTP API 的運作方式

WebOTP API 本身相當簡單：

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

SMS 訊息必須採用來源限定的一次性代碼格式。

Your OTP is: 123456.

@web-otp.glitch.me #12345

請注意，在最後一行包含要繫結的來源在前方加上 @，OTP 後面加上 #。

收到簡訊後，系統會彈出資訊列，提示使用者驗證電話號碼。當使用者按一下 Verify 按鈕後，瀏覽器會自動將動態密碼轉送到網站，並解析 navigator.credentials.get()。網站就能擷取 OTP 並完成驗證程序。

如要瞭解使用 WebOTP 的基本概念，請參閱「使用 WebOTP API 驗證網路上的電話號碼」。

跨來源 iframe 用途

在付款情境中，經常會在不同來源 iframe 中以表單輸入動態密碼。部分信用卡發卡機構需要採取額外的驗證步驟，才能檢查付款人的真實性。這稱為 3D Secure，表單通常會在同一頁面的 iframe 中顯示，就像是付款流程的一部分。

例如：

  • 使用者造訪 shop.example，並使用信用卡購買一雙鞋子。
  • 輸入信用卡號碼後，整合付款服務供應商會在 iframe 中顯示 bank.example 表單，要求使用者驗證電話號碼，以便快速結帳。
  • bank.example 會傳送含有 OTP 的簡訊給使用者，方便他們輸入驗證碼來驗證身分。

如何透過跨來源 iframe 使用 WebOTP API

如要在跨來源 iframe 中使用 WebOTP API，您必須執行兩項操作：

  • 在簡訊文字訊息中同時註解頂端頁框來源和 iframe 來源。
  • 設定權限政策，允許跨來源 iframe 直接從使用者接收 OTP。
iframe 內的 WebOTP API 運作情形。

您可以前往 https://web-otp-iframe-demo.stackblitz.io 親自試用這個範例。

在簡訊中標註已綁定來源

從 iframe 內呼叫 WebOTP API 時，簡訊簡訊必須包含頂端頁框來源，並在後方依序加上 @ 和 OTP，後面緊接 # 的 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 呼叫，且該 iframe 在其祖系鏈結中不超過一個不重複的來源。在下列情況下：

  • 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 中，只要收到含有與來源相符的一次性代碼格式的簡訊，鍵盤就會建議在輸入欄位中輸入 OTP。

自 2021 年 4 月起，Safari 支援使用 % 建立專屬簡訊格式的 iframe。不過，由於規格討論結論是改用 @，因此我們希望支援的簡訊格式實作方式能統一。

意見回饋

您的寶貴意見有助於提升 WebOTP API 的服務品質，因此歡迎試用看看，並與我們分享您的想法。

資源

rupixen.com 由 Unsplash 提供的相片