使用Chrome declarativeNetRequest API无法移除响应头求助

一、declarativeNetRequest移除响应头无效的排查点 #

你已经确认规则匹配但网络标签仍显示目标头，可能是以下原因：

1. 规则配置细节问题 #

• resourceTypes范围不全：移除页面CSP头需要规则覆盖main_frame和sub_frame类型，否则只匹配了其他资源（如脚本、图片）的请求，页面主响应的头没被处理。
  示例规则（rules.json）：

  [
    {
      "id": 1,
      "priority": 1000,
      "action": {
        "type": "modifyHeaders",
        "responseHeaders": [
          {"header": "content-security-policy", "operation": "remove"},
          {"header": "content-security-policy-report-only", "operation": "remove"}
        ]
      },
      "condition": {
        "urlFilter": "*://目标域名/*",
        "resourceTypes": ["main_frame", "sub_frame"]
      }
    }
  ]
  

• 权限配置缺失：manifest.json必须包含对应主机权限和declarativeNetRequest权限，且manifest_version为3：

  {
    "manifest_version": 3,
    "name": "CSP 绕过工具",
    "version": "1.0",
    "permissions": ["declarativeNetRequest"],
    "host_permissions": ["*://目标域名/*"],
    "declarative_net_request": {
      "rule_resources": [
        {
          "id": "ruleset_1",
          "enabled": true,
          "path": "rules.json"
        }
      ]
    },
    "content_scripts": [
      {
        "matches": ["*://目标域名/*"],
        "js": ["content.js"],
        "run_at": "document_start"
      }
    ]
  }
  

2. 缓存干扰 #

Chrome会缓存页面响应，即使规则生效，缓存的旧响应仍会显示原头。解决方法：

• 打开开发者工具「网络」标签，勾选「Disable cache」
• 按Ctrl+Shift+R强制刷新页面

3. 规则匹配验证 #

在扩展的Service Worker控制台执行chrome.declarativeNetRequest.getRules()，确认规则已正确加载且优先级足够高。

二、移除CSP头后仍无法执行内联脚本的解决方法 #

你遇到的错误大概率是因为页面存在meta标签形式的CSP，而非仅响应头CSP，此时即使移除响应头，meta标签的CSP依然生效。

1. 移除页面中的CSP meta标签 #

修改content.js，在页面加载初期就清理meta标签，并拦截动态添加的标签：

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

// 监听DOM变化，拦截动态添加的CSP meta标签
const cspObserver = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes?.forEach(node => {
      if (node.tagName === 'META' && node.httpEquiv?.toLowerCase().includes('content-security-policy')) {
        node.remove();
      }
    });
  });
});

// 改用Blob方式注入脚本（避免内联脚本触发CSP）
function injectScript() {
  const scriptCode = `console.log("from my injected script")`;
  const blob = new Blob([scriptCode], { type: 'text/javascript' });
  const scriptUrl = URL.createObjectURL(blob);
  
  const scriptEl = document.createElement('script');
  scriptEl.src = scriptUrl;
  document.head.prepend(scriptEl);
  
  scriptEl.onload = () => URL.revokeObjectURL(scriptUrl);
}

// 初始化执行（因run_at设为document_start，可提前介入）
clearCspMeta();
cspObserver.observe(document.documentElement, { childList: true, subtree: true });

// 等待DOM就绪后注入脚本
function waitForDOM() {
  if (document.head) {
    injectScript();
  } else {
    requestIdleCallback(waitForDOM);
  }
}
waitForDOM();

2. 关键说明 #

• 把content script的run_at设为document_start，确保在页面解析前就清理CSP meta标签。
• 用Blob创建脚本URL的方式属于「外部脚本」，不会触发CSP对「内联脚本」的限制，比直接用innerHTML更可靠。

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