如何在Chrome扩展中绕过IFrame的CSP/CORS策略？

Chrome扩展确实可以借助自身权限绕过这类限制，以下是两种可行的无服务器方案：

方案1：利用沙盒页面嵌入目标网站 #

沙盒页面属于扩展的隔离环境，不受主页面CSP约束，也能规避目标网站的嵌入限制：

1. 在manifest.json中配置沙盒及资源访问权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "sandbox": {
    "pages": ["sandbox.html"]
  },
  "web_accessible_resources": [
    {
      "resources": ["sandbox.html"],
      "matches": ["<all_urls>"]
    }
  ]
}

2. 创建sandbox.html页面，直接嵌入目标网站的iframe：

<!DOCTYPE html>
<html>
<body style="margin:0">
  <iframe src="https://example.com" width="100%" height="100%" frameborder="0"></iframe>
</body>
</html>

3. 在扩展的主页面或内容脚本中，引用这个沙盒页面作为iframe源：

<iframe src="chrome-extension://<你的扩展ID>/sandbox.html" width="100%" height="600px"></iframe>

注：若需要沙盒页面与主扩展通信，可使用postMessage并做好消息来源验证。

方案2：通过网络请求规则修改响应头 #

如果目标网站是通过X-Frame-Options或CSP的frame-ancestors字段限制嵌入，可直接修改其响应头：

1. 在manifest.json中添加权限：

{
  "manifest_version": 3,
  "permissions": ["declarativeNetRequest"],
  "host_permissions": ["https://example.com/*"]
}

2. 创建rules.json配置移除限制的规则：

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "modifyHeaders",
      "responseHeaders": [
        {"header": "X-Frame-Options", "operation": "remove"},
        {"header": "Content-Security-Policy", "operation": "remove"}
      ]
    },
    "condition": {
      "urlFilter": "https://example.com/*",
      "resourceTypes": ["sub_frame"]
    }
  }
]

3. 在manifest.json中引入规则文件：

"declarative_net_request": {
  "rule_resources": [
    {
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }
  ]
}

关键注意点 #

• 必须使用Manifest V3版本（V2已被Chrome逐步淘汰），权限配置需精准匹配目标网站。
• 扩展提交Chrome Web Store审核时，过度权限可能被驳回，需确保权限仅为实现功能必要。

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