某些表单在 iframe 中包含字段，这会导致浏览器自动填充功能出现问题。借助 shared-autofill，父级框架可以指定跨源 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> 字段（信用卡号、CVV 码），请与我们联系。我们非常期待了解，在 iframe 中实现跨 iframe 共享自动填充功能是否有助于提升用户在结账流程中的自动填充体验。
了解详情
照片由 Jessica Ruscello 在 Unsplash 上发布。