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

WebOTP API 現在可以從 iframe 接收一次性密碼。

簡訊動態密碼 (一次性密碼) 通常用於驗證電話號碼,例如做為驗證的第二個步驟,或驗證網路上的付款。不過,在瀏覽器和簡訊應用程式之間切換,複製並貼上或手動輸入一次性密碼,很容易出錯,也會造成使用者體驗不順暢。

WebOTP API 可讓網站以程式輔助方式從簡訊取得一次性密碼,並自動在表單中輸入密碼,使用者只需輕觸一下即可完成,不必切換應用程式。簡訊會採用特定格式並繫結至來源,因此也能降低網路釣魚網站竊取 OTP 的機率。

WebOTP 尚未支援的用途之一,是鎖定 iframe 內的來源。這通常用於確認付款,尤其是3D Secure。WebOTP API 現在採用通用格式,支援跨來源 iframe,並從 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

請注意,最後一行包含要繫結的來源,前面加上 @,後面加上 OTP,OTP 前面則加上 #

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

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

跨來源 iframe 的用途

在跨來源 iframe 內的表單中輸入動態密碼,是付款情境中常見的做法。部分信用卡發卡機構會要求完成額外驗證步驟,以確認付款人的真實性。這稱為 3D Secure,表單通常會顯示在同一個網頁的 iframe 中,就像是付款流程的一部分。

例如:

  • 使用者前往 shop.example,並使用信用卡購買一雙鞋。
  • 輸入信用卡號碼後,整合式付款服務供應商會在 iframe 中顯示 bank.example 的表單,要求使用者驗證電話號碼,以便快速結帳。
  • bank.example 會傳送內含一次性密碼的簡訊給使用者,讓他們輸入密碼來驗證身分。

如何從跨來源 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 呼叫,且祖先鏈中最多只能有一個不重複來源。在下列情況中:

  • 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"] 支援功能共用相同的 SMS 格式。在 Safari 中,只要收到含有與來源綁定的一次性代碼格式的簡訊,且來源相符,鍵盤就會建議在輸入欄位中輸入 OTP。

自 2021 年 4 月起,Safari 支援使用 % 的獨特簡訊格式 iframe。不過,由於規格討論結果決定改用 @,我們希望支援的簡訊格式實作方式能趨於一致。

意見回饋

您的意見對我們改善 WebOTP API 來說非常重要,歡迎試用並告訴我們您的想法。

資源

相片來源:rupixen.com 發表於 Unsplash 網站上