使用 WebOTP API 在跨源 iframe 中填充动态密码表单

WebOTP API 现在可以从 iframe 中接收动态密码。

Eiji Kitamura
Yi Gu
短信动态密码（动态密码）通常用于验证手机号码， 例如身份验证的第二步，或验证网上付款。 但是，可以在浏览器和短信应用之间切换，无论是复制粘贴还是手动复制 输入动态密码很容易出错，还会增加用户体验。

WebOTP API 使网站能够以编程方式 从短信中获取动态密码并输入 自动显示在表单中，无需切换 应用。该短信采用特殊格式，并且与源绑定，因此可以降低 也有可能让钓鱼网站有机会窃取动态密码。

WebOTP 尚不支持的一个用例是定位来源 放置在 iframe 内。这通常用于确认付款，尤其是 3D Secure 提供安全保护。拥有共同的 格式来支持跨源 iframes，WebOTP API 现在 从 Chrome 91 开始，将动态密码绑定到嵌套源。

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 并使用信用卡买了一双鞋。
  • 输入信用卡号后，集成的付款服务机构会显示 用户在 iframe 内从 bank.example 获取表单，要求用户验证自己的 可快速结账的电话号码。
  • bank.example会向用户发送包含动态密码的短信，以便他们可以 请输入该验证码来验证自己的身份

如何通过跨源 iframe 使用 WebOTP API

若要在跨源 iframe 中使用 WebOTP API，您需要执行以下两项操作： 事情：

  • 在短信文本中同时注释顶部帧来源和 iframe 来源 消息。
  • 配置权限政策以允许跨源 iframe 接收动态密码 由用户直接发送
。 <ph type="x-smartling-placeholder">
</ph>
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"] 支持。在 Safari 中， 包含源站绑定的一次性代码格式的短信到达 源，则键盘建议在输入字段中输入动态密码。

自 2021 年 4 月起，Safari 支持通过 %。 不过，按照规范讨论的结果，改用 @，我们希望 支持的短信格式的实现将会收敛。

反馈

您的反馈对于改进 WebOTP API 至关重要，欢迎继续试用 请告诉我们 和你的想法一样

资源

照片由 rupixen.com 提供，由 Unsplash 提供