如何修复HTML页面中的worker-src CSP报错问题？

问题场景 #

报错信息：

index-cc3a9b6f.js:65 Refused to create a worker from 'http://localhost:3000/docs/reconstatus/serviceworker.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-inline' 'unsafe-eval'". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.

当前配置的meta标签：

<meta http-equiv="Content-Security-Policy"
    content="default-src 'self' * data: 'unsafe-eval' 'unsafe-inline'; connect-src *; img-src http://localhost:* data:; font-src file: http://localhost:*; worker-src 'self' blob:; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'" />

核心原因 #

浏览器提示worker-src未被显式设置，说明meta标签里的worker-src规则没生效，大概率是这几个原因：

• CSP规则冲突：default-src同时写了'self'和*，可能把后续的worker-src规则覆盖；部分浏览器对meta标签的CSP组合规则有兼容问题，导致特定规则被忽略。
• 路径匹配问题：Service Worker路径是/docs/reconstatus/serviceworker.js，虽然worker-src 'self'允许当前源下的脚本，但如果页面实际源和该路径的源不一致（比如不同端口、子目录），会匹配失败。
• 重复CSP覆盖：服务器可能通过HTTP响应头也设置了CSP，响应头的优先级比meta标签高，导致你的meta配置被覆盖。

解决方法 #

1. 修正CSP规则，确保worker-src生效 #

调整meta标签的CSP内容，简化default-src并明确指定Service Worker路径：

<meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; 
            connect-src *; 
            img-src http://localhost:* data:; 
            font-src file: http://localhost:*; 
            worker-src 'self' http://localhost:3000/docs/reconstatus/serviceworker.js; 
            script-src 'self' 'unsafe-eval'; 
            style-src 'self' 'unsafe-inline';
            data: 'unsafe-eval' 'unsafe-inline'" />

• 删掉default-src里的*，避免覆盖后续具体规则；
• 直接把Service Worker的完整路径加到worker-src里，确保精确匹配。

2. 检查服务器CSP响应头 #

打开浏览器F12开发者工具，在网络标签页查看页面的响应头，确认有没有Content-Security-Policy或Content-Security-Policy-Report-Only头。如果有，要么把worker-src 'self' blob:加到响应头的规则里，要么移除响应头的CSP配置，只保留meta标签的。

3. 强制刷新清除缓存 #

浏览器可能缓存了旧的CSP规则，按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，确保新配置生效。

4. 验证生效的CSP规则 #

在浏览器控制台输入以下命令，查看当前meta标签的CSP内容，确认worker-src规则存在且包含目标路径：

console.log(document.querySelector('meta[http-equiv="Content-Security-Policy"]').content)

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