某些表单在 iframe 中有字段，这会导致浏览器自动填充问题。借助共享自动填充功能，父框架可以指定跨源 iframe 的可信度，以便为用户提供更好的自动填充体验。
有一个允许自动填充到跨源 iframe 中的提案，现在可用于测试。借助此功能，父框架可以指定哪些框架的字段应该可以自动填充。这对于付款表单特别有用，因为其中的敏感字段（符合 PCI DSS 要求）通常从付款服务提供商 (PSP) 等第三方来源加载。
在以下示例中，持卡人姓名和失效日期位于顶级页面（或主框架）中，但信用卡号和验证码位于 PSP 的 iframe 中。
<!-- Top-level document URL: https://merchant.com/... -->
<form>
Cardholder name: <input id="name">
Credit card number: <iframe src="https://psp.com/..."><input id="num"></iframe>
Expiration date: <input id="exp">
CVC: <iframe src="https://psp.com/..."><input id="cvc"></iframe>
</form>
下图显示了表单的结构：
对于商家来说，这种设计兼具安全性和灵活性：
- 跨源 iframe 可将敏感付款数据与商家的基础架构分离开来，这有助于遵守 PCI DSS。
- 您可以对不同框架中的表单字段进行排列和样式设置，使其与商家网站的外观和风格保持一致。
从浏览器的角度来看，这意味着多帧表单存在常见且合法的用例，这就引发了关于表单安全模型的问题。对于用户来说，多帧表单可能会导致糟糕的自动填充体验，如以下示例所示：
同源政策是跨帧自动填充的可靠基准，但无法为浏览器提供足够的粒度来区分可信帧和不可信帧以进行自动填充。
为了在保障用户数据的安全的同时提供更出色的自动填充体验，Chrome 团队正在制定一项提案，以允许自动填充到跨源 iframe 中。如果表单更改为使用共享自动填充功能，Chrome 就会跨源成功填充信用卡号：
<!-- Top-level document URL: https://merchant.com/... -->
<form>
Cardholder name: <input id="name">
Credit card number: <iframe src="https://psp.com/..." allow="shared-autofill"><input id="num"></iframe>
Expiration date: <input id="exp">
CVC: <iframe src="https://psp.com/..." allow="shared-autofill"><input id="cvc"></iframe>
</form>
这可以为用户提供更好的自动填充体验：
在本地尝试共享自动填充功能
您可以从命令行设置标志，在桌面版和移动版 Chrome 93.0.4577.0 及更高版本中为单个用户测试共享自动填充。
--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill
检测功能支持情况
使用以下代码检测 shared-autofill 属性是否可用：
if (document.featurePolicy && document.featurePolicy
.features().includes('shared-autofill')) {
console.log('shared-autofill available!');
}
后续操作
共享自动填充功能是向权限政策添加自动填充功能的初始提案。Chrome 团队目前正在与其他浏览器供应商合作，以对该提案进行审核。我们还将讨论如何提升跨 iframe 的自动填充功能的用户体验。
我们会继续在此提案的进展过程中提供最新动态。在此期间，如果您的结账页嵌入了第三方提供商提供的敏感 <input> 字段（信用卡号、cvc），请与我们联系。我们非常期待了解 iframe 之间的共享自动填充功能是否可以提升用户在结账过程中的自动填充体验。
了解详情
照片由 Jessica Ruscello 提供，由 Unsplash 提供。