如何实现类似RoboForm/AutoFill的跨域iframe文本框识别与填充？

问题 #

我正在复刻类似RoboForm或AutoFill的Chrome扩展，目标是填充Stripe招聘页面的表单。该表单通过iframe渲染文本框，尝试常规方法访问iframe内容时遇到跨域限制：

尝试的代码：

document.querySelectorAll('input, iframe'); // 获取目标iframe的ID
document.getElementById('grnhse_iframe'); // 获取iframe元素
document.getElementById('grnhse_iframe').contentWindow.document; // 获取iframe文档时触发错误

错误信息：

198:1 Uncaught DOMException: Blocked a frame with origin "https://stripe.com" from accessing a cross-origin frame.at <anonymous>:1:55

我知道这是同源策略限制，试过用PHP搭建代理服务器修改iframe的src：

<?php $url = $_GET['url']; $response = file_get_contents($url); echo $response; ?>

但触发了[Report Only] Refused to frame...错误。想知道RoboForm这类扩展是如何无需手动操作就能访问并填充跨域iframe内的表单的。

解决方案 #

RoboForm、AutoFill这类扩展能绕过跨域限制操作iframe表单，核心是利用Chrome扩展的特殊权限机制，而非特殊渲染方式，具体实现方式如下：

1. 配置扩展的content_scripts权限，注入到目标iframe #

在扩展的manifest.json中，设置content_scripts的matches包含主站和iframe的域名，同时指定all_frames: true，这样content script会被注入到所有iframe（包括跨域的）：

{
  "content_scripts": [
    {
      "matches": ["https://stripe.com/*", "https://*.greenhouse.io/*"],
      "js": ["content.js"],
      "all_frames": true
    }
  ]
}

这里https://*.greenhouse.io/*是Stripe招聘表单iframe的实际域名，需根据目标iframe的真实域名调整。

2. 在content script中直接操作iframe内的DOM #

注入到iframe的content script运行在iframe的上下文里，不受同源策略限制，可以直接查询和修改表单元素：

// content.js
// 直接操作当前上下文（主页面或iframe）的表单
const inputs = document.querySelectorAll('input[type="text"], input[type="email"], input[type="tel"]');
inputs.forEach(input => {
  switch(input.name) {
    case 'first_name':
      input.value = '你的名字';
      break;
    case 'email':
      input.value = '你的邮箱';
      break;
    // 按需匹配其他字段
  }
});

3. 主页面与iframe的content script通信（可选） #

如果需要从主页面控制iframe的填充逻辑，可使用Chrome扩展的消息API实现跨上下文通信：

• 主页面的content script发送指令：

// main-content.js
chrome.runtime.sendMessage({action: 'fillForm', data: {name: 'xxx', email: 'xxx'}});

• iframe的content script接收指令并执行填充：

// iframe-content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if(message.action === 'fillForm') {
    document.querySelector('input[name="first_name"]').value = message.data.name;
    document.querySelector('input[name="email"]').value = message.data.email;
  }
});

4. 代理方法行不通的原因 #

你用PHP代理修改iframe src的方式会触发CSP（内容安全策略）错误，原页面的CSP规则禁止加载localhost的资源，且这种方式无法绕过浏览器的同源策略限制，还会引入额外安全问题。

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