基于iframe的Chrome扩展权限配置及X-Frame-Options报错如何解决？

你遇到的报错本质是三个独立问题叠加导致的：

1. 服务端同时在.htaccess和业务代码中输出X-Frame-Options头，两个值冲突浏览器默认回退到deny
2. Manifest V3 已经完全废弃了webRequestBlocking权限和chrome.webRequest的阻塞式监听能力，所以旧版V2的改Header代码完全失效
3. declarativeNetRequest权限需要配套对应规则配置才能生效，你之前只加了权限没有加规则所以无效

方案一：优先修改服务端配置（最安全，推荐） #

直接在服务端配置只允许你的Chrome扩展嵌入页面，不需要修改扩展逻辑，也不会产生安全漏洞：

• 第一步：删除.htaccess中设置x-frame-options: deny的配置，避免重复输出响应头
• 第二步：在后端接口统一输出以下响应头，将<你的扩展ID>替换为你扩展的实际ID：

// 优先用标准CSP的frame-ancestors限制可嵌入的源，兼容性更好
header("Content-Security-Policy: frame-ancestors chrome-extension://<你的扩展ID>;");
// 兼容老旧浏览器可以保留X-Frame-Options配置
header("X-Frame-Options: ALLOW-FROM chrome-extension://<你的扩展ID>");

配置完成后只有你的扩展可以用iframe嵌入对应页面，其他站点/扩展嵌入都会被拦截。

方案二：扩展端用Manifest V3的declarativeNetRequest处理 #

如果无法修改服务端配置，可以用Manifest V3官方推荐的声明式网络请求规则移除响应头，步骤如下：

1. 修改manifest.json配置：

{
  "manifest_version": 3,
  // 其他基础配置...
  "permissions": [
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "https://subdomain.example.com/*"
  ],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "remove_xfo_rule",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  }
}

2. 扩展根目录新建rules.json规则文件：

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "removeHeaders",
      "responseHeaders": [
        {"name": "X-Frame-Options"},
        {"name": "Frame-Options"}
        // 如果服务端还设置了CSP的frame-ancestors限制，再加下面一行
        // {"name": "Content-Security-Policy"}
      ]
    },
    "condition": {
      "urlFilter": "https://subdomain.example.com/*",
      "resourceTypes": ["sub_frame"]
    }
  }
]

3. 完全删除之前script.js中添加的chrome.webRequest相关代码，Manifest V3不支持该API的阻塞监听能力，这段代码不会生效。

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