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

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

Eiji Kitamura
Yi Gu
短信动态密码（一次性密码）通常用于验证电话号码，例如作为身份验证的第二步，或用于验证网络上的付款。 不过，在浏览器和短信应用之间切换，以复制粘贴或手动输入动态密码，很容易出错，并且会增加用户体验的阻力。

借助 WebOTP API，网站能够以编程方式从短信中获取动态密码，并只需点按一下即可自动在表单中输入该密码，而无需切换应用。短信采用特殊格式并绑定到来源，因此也降低了钓鱼式攻击网站窃取动态密码的可能性。

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.example.com #12345

请注意，最后一行包含要绑定的来源（前面带有 @），后跟动态密码（前面带有 #）。

收到短信后，系统会弹出一个信息栏，提示用户验证其电话号码。用户点击 Verify 按钮后，浏览器会自动将动态密码转发到网站并解析 navigator.credentials.get()。然后，网站可以提取动态密码并完成验证流程。

如需了解使用 WebOTP 的基础知识，请参阅使用 WebOTP API 在网络上验证电话号码。

跨域 iframe 应用场景

在支付场景中，在跨域 iframe 内的表单中输入动态密码很常见。某些信用卡发卡机构要求执行额外的验证步骤，以检查付款人的真实性。这称为 3D 安全验证，该表单通常会显示在同一页面的 iframe 中，就像是付款流程的一部分。

例如：

  • 某位用户访问 shop.example，使用信用卡购买了一双鞋。
  • 输入信用卡号后，集成的支付服务机构会在 iframe 中显示一个来自 bank.example 的表单，要求用户验证其电话号码，以便快速结账。
  • bank.example 会向用户发送一条包含动态密码的短信，以便用户输入该密码来验证其身份。

如何通过跨域 iframe 使用 WebOTP API

如需在跨域 iframe 中使用 WebOTP API，您需要执行以下两项操作：

  • 在短信中同时注明顶层框架来源和 iframe 来源。
  • 配置权限政策，以允许跨域 iframe 直接从用户接收动态密码。
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 中使用 WebOTP 不受支持。

请注意，由于缺乏需求和用户体验复杂性，以下场景也不受支持。

  • a.com -> b.com -> a.com（调用 WebOTP API）

互操作性

虽然 Chromium 以外的浏览器引擎未实现 WebOTP API，但 Safari 通过其 input[autocomplete="one-time-code"] 支持共享相同的短信格式。在 Safari 中，只要收到包含来源绑定一次性验证码格式且来源匹配的短信，键盘就会建议在输入字段中输入动态密码。

自 2021 年 4 月起，Safari 支持 iframe，使用 % 的独特短信格式。不过，由于规范讨论最终决定改用 @，我们希望支持的短信格式的实现能够趋于一致。

反馈

您的反馈对于改进 WebOTP API 非常宝贵，因此请继续试用并告诉我们您的想法。

资源