Chrome扩展页面嵌入跨源iframe遇X-Frame-Options问题的Manifest V3解决方案

你遇到的问题是目标网站通过X-Frame-Options: sameorigin响应头禁止了非同源页面的嵌入，而Chrome扩展页面属于chrome-extension://协议，和目标网站不同源，所以被拦截。下面是Manifest V3下的完整解决方案，同时帮你理清各个配置项的作用：

一、Manifest.json配置说明 #

先明确你困惑的几个配置项的作用：

• permissions：需要添加"declarativeNetRequest"，因为我们要通过声明式网络请求修改响应头。
• host_permissions：必须添加目标网站的权限，比如"https://example.com/*"，否则无法拦截该网站的请求并修改响应头。
• content-security-policy：这里不需要调整，因为扩展页面的CSP是控制自身资源的加载规则，和目标网站设置的X-Frame-Options限制无关。

完整的Manifest.json关键配置片段：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["declarativeNetRequest"],
  "host_permissions": ["https://example.com/*"],
  "background": {
    "service_worker": "service-worker.js"
  }
}

二、代码实现（放在service-worker.js中） #

你找到的那段代码是正确的，但必须放在**后台服务工作者文件（service-worker.js）**中，不能放在扩展的页面脚本里——因为chrome.declarativeNetRequest和chrome.runtime.onInstalled只能在后台上下文执行。

调整后的完整代码：

const iframeHosts = [
  'example.com',
];

chrome.runtime.onInstalled.addListener(() => {
  const RULE = {
    id: 1,
    condition: {
      initiatorDomains: [chrome.runtime.id], // 仅拦截来自本扩展的请求
      requestDomains: iframeHosts, // 目标网站域名
      resourceTypes: ['sub_frame'], // 仅针对iframe类型的请求
    },
    action: {
      type: 'modifyHeaders',
      responseHeaders: [
        {header: 'X-Frame-Options', operation: 'remove'},
        {header: 'Frame-Options', operation: 'remove'},
        // 如果目标网站用CSP的frame-ancestors限制，取消下面这行注释
        // {header: 'Content-Security-Policy', operation: 'remove'},
      ],
    },
  };

  // 先移除旧规则（避免重复添加），再添加新规则
  chrome.declarativeNetRequest.updateDynamicRules({
    removeRuleIds: [RULE.id],
    addRules: [RULE],
  });
});

三、注意事项 #

1. 规则ID必须唯一，如果后续要添加更多规则，需要使用不同的ID值。
2. 如果目标网站同时设置了Content-Security-Policy中的frame-ancestors指令，必须取消代码中移除CSP头的注释，否则还是会被拦截。
3. 测试时需要重新加载扩展，确保后台脚本和Manifest配置生效。

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