Chrome扩展中绕过后代iframe的X-Frame-Options和CSP限制问题

问题核心 #

你碰到的问题本质是：declarativeNetRequest的sub_frame资源类型确实覆盖所有嵌套iframe，但之前的规则可能因为匹配条件限制，没命中嵌套iframe的请求——毕竟嵌套iframe的请求发起者是父iframe的域名，不是你的扩展页面，导致对应的响应头没被移除。另外，报错里的frame-ancestors限制，可能来自目标页面的响应头CSP，也可能是页面内的meta标签CSP，后者用网络请求头修改是搞不定的。

解决方案步骤 #

1. 调整declarativeNetRequest规则，覆盖所有嵌套iframe请求

修改扩展manifest.json里的配置和规则，确保匹配所有sub_frame类型的请求，不要加不必要的发起者限制：

首先更新manifest.json的权限和规则引用：

{
  "manifest_version": 3,
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestWithHostAccess"
  ],
  "host_permissions": ["<all_urls>"],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "remove_frame_restrictions",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  }
}

然后在rules.json中编写高优先级规则：

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

• priority:1000：确保你的规则优先级高于其他可能存在的规则
• urlFilter:"*"：匹配所有sub_frame请求，不管目标域名
• 同时移除三个相关头：避免某些服务器使用非标准的Frame-Options头

2. 处理页面内的meta标签CSP

如果目标页面是通过<meta>标签设置的CSP（比如frame-ancestors限制），declarativeNetRequest无法干预，需要用内容脚本移除这些标签：

创建remove-csp-meta.js文件：

// 移除已存在的CSP meta标签
document.querySelectorAll('meta[http-equiv="Content-Security-Policy"]').forEach(tag => tag.remove());

// 监听DOM变化，移除动态添加的CSP meta标签
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes?.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE && 
          node.tagName === 'META' && 
          node.getAttribute('http-equiv') === 'Content-Security-Policy') {
        node.remove();
      }
    });
  });
});

observer.observe(document.documentElement, { childList: true, subtree: true });

然后在manifest.json中配置内容脚本，确保注入到所有嵌套iframe：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "all_frames": true,
    "run_at": "document_start",
    "js": ["remove-csp-meta.js"]
  }
]

• all_frames:true：让脚本注入到所有层级的iframe中
• run_at:"document_start"：在页面开始加载时就执行，抢在CSP meta标签生效前移除

3. 验证规则生效

加载扩展后，打开开发者工具的「网络」面板，查看嵌套iframe的请求响应头，确认Content-Security-Policy、X-Frame-Options已经被移除；同时检查iframe页面的DOM，确认没有CSP meta标签。

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