Chrome扩展MV3加载Worker遭CSP拦截，求本地解决方案

DevOps 小满

2026-7-5

Chrome MV3扩展Worker被CSP拦截的解决方案及绕过原理

问题背景

我正在开发Chrome Manifest V3（MV3）扩展，其中加载的部分依赖库需要使用Worker。我已将Worker相关的.js和.wasm文件放入资源文件夹以实现本地加载，并添加到了manifest配置中，但在部分网站上仍出现以下错误：

拒绝从'blob:'创建Worker，因为违反了以下Content Security Policy指令："child-src 'self' *.website.com cdn.cookielaw.org geolocation.onetrust.com privacyportal-de.onetrust.com *.youtube.com pay.sandbox.datatrans.com pay.datatrans.com siteintercept.qualtrics.com *.siteintercept.qualtrics.com website.com.qualtrics.com"。注意未显式设置'worker-src'，因此使用'child-src'作为fallback。
index.js:42287 Uncaught (in promise) DOMException: Failed to construct 'Worker': 访问位于'blob:https://www.website.com/4e6cdd96-13ca-4eef-9603-f241cf776a61'的脚本被文档的Content Security Policy拒绝。
at chrome-extension://nlphfnalpjgilnheibacdlongcbapgdi/assets/js/index.js:42287:25
...（重复错误栈省略）

我并非网站管理员，但这是本地运行的Chrome扩展，应该有权决定客户端运行内容，该如何解决？

编辑补充：发现有一款Chrome扩展可以绕过所有CSP指令，说明无需后端权限就能实现需求，请问它是如何实现的？

解决方案

1. 替换Blob Worker为扩展本地资源加载

你的依赖库当前大概率是通过Blob URL创建Worker，这会触发页面的CSP检查。可以修改Worker初始化逻辑，直接从扩展内部加载资源：

确保Worker相关文件已加入manifest.json的web_accessible_resources：

{
  "web_accessible_resources": [
    {
      "resources": ["assets/workers/*.js", "assets/workers/*.wasm"],
      "matches": ["<all_urls>"]
    }
  ]
}

用扩展资源URL替代Blob创建Worker：

// 替换原有的 new Worker(blobUrl)
const workerUrl = chrome.runtime.getURL('assets/workers/your-worker.js');
const worker = new Worker(workerUrl);

扩展资源URL不受页面CSP限制，因为扩展拥有独立的权限沙箱。

2. 用后台Service Worker代理Worker逻辑

如果无法修改依赖库代码，可以把Worker任务转移到扩展的后台Service Worker中，通过消息传递交互：

后台Service Worker监听消息并执行任务：

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'run-worker-task') {
    // 执行原本Worker的逻辑（比如Draco解码）
    const result = processTask(message.data);
    sendResponse(result);
  }
  return true; // 保持消息通道开放，支持异步响应
});

页面脚本调用后台Service Worker：

// 注入到页面的脚本
chrome.runtime.sendMessage({type: 'run-worker-task', data: yourData}, (response) => {
  // 处理返回结果
});

3. 本地开发临时关闭CSP

仅用于本地测试场景，通过Chrome启动参数关闭Web安全检查：

chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"

注意：此方法仅适合开发，日常浏览不要使用，会降低浏览器安全性。

绕过CSP扩展的实现原理

这类扩展核心利用Chrome MV3的declarativeNetRequest API修改HTTP响应头，绕过页面CSP限制：

扩展注册网络规则，拦截所有包含CSP相关头的响应；
直接移除页面的Content-Security-Policy或Content-Security-Policy-Report-Only头，或者修改为允许所有资源的宽松规则；
该API运行在浏览器层面，拥有修改响应头的权限，无需网站管理员授权即可覆盖页面CSP设置。

核心配置示例：

manifest.json：

{
  "name": "CSP Bypass",
  "version": "1.0",
  "manifest_version": 3,
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "ruleset_1",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  },
  "permissions": ["declarativeNetRequest", "<all_urls>"]
}

rules.json：

[
  {
    "id": 1,
    "priority": 1,
    "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", "script", "worker"]
    }
  }
]

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

Chrome扩展MV3加载Worker遭CSP拦截，求本地解决方案

问题背景 #

解决方案 #

1. 替换Blob Worker为扩展本地资源加载 #

2. 用后台Service Worker代理Worker逻辑 #

3. 本地开发临时关闭CSP #