Manifest 3 Chrome扩展：如何读取并修改CSP头避免覆盖？

问题背景 #

我们正在开发开源Chrome扩展Digital Assistant Client，当前需要在Manifest 3版本中读取并修改Content Security Policy（CSP）头，通过添加允许的域名实现数据的获取与提交。在Manifest V2中，可通过chrome.webRequest.onHeadersReceived.addListener( onHeadersReceived, onHeaderFilter, ['blocking', 'responseHeaders'] );轻松读取头信息，但在Manifest 3中不知如何实现读取及修改（当前使用declarativeNetRequest的append操作时，原有connect-src被覆盖）。

已配置的rules.json：

[
  {
    "id": 1,
    "action": {
      "type": "modifyHeaders",
      "responseHeaders": [
        {
          "header": "content-security-policy",
          "operation": "append",
          "value": "connect-src udan.nistapp.ai udantest.nistapp.ai"
        }
      ]
    },
    "condition": {
      "resourceTypes": [
        "csp_report",
        "font",
        "image",
        "main_frame",
        "media",
        "object",
        "other",
        "ping",
        "script",
        "stylesheet",
        "sub_frame",
        "webbundle",
        "websocket",
        "webtransport",
        "xmlhttprequest"
      ]
    }
  }
]

并已在manifest中配置declarativeNetRequest相关权限。

解决方案：使用Manifest V3的webRequest API实现精确修改 #

Manifest V3中仍保留了webRequest API的核心功能，可通过它读取并修改CSP头，避免原有connect-src被覆盖。具体步骤如下：

1. 更新manifest.json权限配置 #

添加webRequest、webRequestBlocking权限及目标主机权限：

{
  "permissions": ["webRequest", "webRequestBlocking"],
  "host_permissions": ["<all_urls>"] // 可替换为你需要处理的具体域名
}

2. 在后台Service Worker中编写修改逻辑 #

创建后台脚本（如background.js），添加以下代码：

chrome.webRequest.onHeadersReceived.addListener(
  (details) => {
    // 定位CSP头
    const cspHeader = details.responseHeaders.find(h => h.name.toLowerCase() === 'content-security-policy');
    if (!cspHeader) return { responseHeaders: details.responseHeaders };

    let cspValue = cspHeader.value;
    const connectSrcRegex = /connect-src\s+([^;]+);?/gi;
    const match = connectSrcRegex.exec(cspValue);

    if (match) {
      // 原有存在connect-src，追加新域名
      const updatedConnectSrc = `connect-src ${match[1]} udan.nistapp.ai udantest.nistapp.ai`;
      cspValue = cspValue.replace(connectSrcRegex, updatedConnectSrc);
    } else {
      // 原有无connect-src，直接添加指令
      cspValue += `; connect-src udan.nistapp.ai udantest.nistapp.ai`;
    }

    // 更新CSP头值
    cspHeader.value = cspValue;
    return { responseHeaders: details.responseHeaders };
  },
  { urls: ["<all_urls>"] }, // 匹配需要处理的请求URL
  ["blocking", "responseHeaders", "extraHeaders"] // extraHeaders为修改安全头的必要参数
);

关键说明 #

• extraHeaders参数必须添加：Manifest V3中修改CSP这类安全相关的响应头时，需要声明该参数才能生效。
• 正则处理逻辑：通过正则匹配原有connect-src指令，将新域名追加到原有源列表中，确保不会覆盖原有规则。
• 权限控制：host_permissions建议缩小到实际需要处理的域名，避免过度授权。

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