Chrome与Safari中Autocomplete属性在iframe场景下的行为差异及适配方案

针对Safari仅自动填充信用卡号、其他字段无响应的问题，可通过以下几个关键调整实现全字段自动填充：

• 统一域名上下文
  确保所有承载信用卡输入字段的iframe与主页面使用完全一致的域名（包括子域名），Safari对跨域iframe的自动填充限制远严于Chrome，跨域场景下几乎无法触发全字段填充。

• 添加精准的autocomplete属性
  给每个iframe内部的输入字段设置标准的信用卡类autocomplete属性，直接作用于input元素：

  • 信用卡号：autocomplete="cc-number"
  • 持卡人姓名：autocomplete="cc-name"
  • 有效期月份：autocomplete="cc-exp-month"
  • 有效期年份：autocomplete="cc-exp-year"
  • CVV码：autocomplete="cc-csc"

• 绑定统一表单上下文
  在主页面用一个<form>标签包裹所有iframe，同时给每个iframe内的input元素设置form属性，关联到主表单的ID，让Safari识别到这些字段属于同一个表单集合：
  主页面结构示例：

  <form id="cc-form">
    <iframe src="cc-number.html"></iframe>
    <iframe src="cc-expiry.html"></iframe>
    <iframe src="cc-cvv.html"></iframe>
  </form>
  

  iframe内input示例：

  <input type="text" autocomplete="cc-exp-month" form="cc-form">
  

• 检查iframe sandbox权限
  如果给iframe设置了sandbox属性，必须包含allow-forms和allow-same-origin权限，这两个权限是Safari触发跨iframe自动填充的必要条件，缺失会导致字段无法被识别。

• 使用有效自动填充条目测试
  测试时确保Safari的自动填充列表中已添加完整的信用卡信息（可使用测试环境专用的合规卡号），虚拟测试号可能无法被Safari的自动填充系统识别。

内容的提问来源于stack exchange，提问作者Earl