开发Chrome扩展跨源获取iframe内标签报错，应在哪页添加运行代码？

报错原因 #

浏览器同源策略默认要求协议、域名、端口完全一致才允许跨帧访问DOM，你的两个站点属于同主域不同子域，默认不满足同源要求，所以触发跨域拦截。

可选方案及对应代码添加位置 #

方案1：同主域降域方案（需要修改业务站点代码） #

这个方案仅适用于同根主域的场景，你需要同时在两个页面添加代码：

• 在父页面 https://aaa.xxx.com 的全局JS逻辑最开头添加：
  document.domain = 'xxx.com';
• 在iframe页面 https://bbb.xxx.com 的全局JS逻辑最开头添加：
  document.domain = 'xxx.com';
  添加完成后父页面就可以直接获取iframe内的DOM节点。

方案2：Chrome扩展专属方案（无需修改业务站点代码） #

作为Chrome扩展开发者更推荐这个方案，你只需要在你的扩展代码中做调整即可，不需要改动业务站点的原有逻辑：

1. 在manifest.json中声明两个子域的内容脚本注入权限，示例配置：

{
  "content_scripts": [
    {
      "matches": ["https://*.xxx.com/*"],
      "js": ["content-script.js"],
      "all_frames": true
    }
  ]
}

2. 在内容脚本content-script.js中分别处理父页和iframe的逻辑：
   • 运行在iframe中的内容脚本直接获取对应DOM信息，通过chrome.runtime.sendMessage把数据传给扩展后台
   • 运行在父页中的内容脚本从扩展后台获取iframe传递过来的DOM数据即可使用

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