Helmet CSP配置后仍拦截React.js inline脚本报错如何解决？

验证CSP配置是否生效的方法 #

打开Chrome开发者工具的「网络」面板，刷新页面后找到返回SPA入口html的请求，查看响应头中的Content-Security-Policy字段：

• 如果字段值和你写的Helmet配置不一致，说明配置确实没有生效
• 如果字段值已经包含'unsafe-inline'还是报错，说明CSP规则是从其他位置加载的

常见原因与对应解决方法 #

1. 中间件加载顺序错误（最高发原因） #

Express中间件是按顺序执行的，如果你把express.static静态资源中间件放在了Helmet配置之前，那么打包后的静态html请求会直接被static中间件返回，根本不会走到后面的Helmet配置逻辑，自然不会带上修改后的CSP头。
调整顺序如下即可：

// 先加载Helmet配置
App.use(helmet({    
    contentSecurityPolicy: {
        directives: {
            defaultSrc: ["'self'"],
            // 也可以直接把报错提示的hash添加进来，比unsafe-inline更安全
            scriptSrc: ["'self'", "'unsafe-inline'", "'sha256-1kri9uKG6Gd9VbixGzyFE/kaQIHihYFdxFKKhgz3b80='", 'https://ajax.googleapis.com', 'https://stackpath.bootstrapcdn.com'],
            // 注意：React打包产物通常也包含内联样式，建议给styleSrc也加上unsafe-inline或者对应hash
            styleSrc: ["'self'", "'unsafe-inline'"],
            imgSrc: ["*", 'data:'],
            connectSrc: ["'self'"],
            frameSrc: ["'self'"],
        },
    }}
));
// 后加载静态资源中间件
App.use(express.static('你的build文件夹路径'));

2. 入口HTML硬编码了CSP规则 #

检查build文件夹下的index.html文件，看是否存在<meta http-equiv="Content-Security-Policy" ...>标签：

• 如果存在该标签，要么直接删除，要么修改标签内的script-src规则添加'unsafe-inline'或者对应的hash值，页面内meta标签定义的CSP优先级会和服务器返回的头合并，取更严格的规则生效。

3. 存在其他配置覆盖了CSP头 #

• 如果卸载了Helmet仍然报错，检查你的服务链路中是否有其他组件设置了CSP：比如前端有CDN缓存了旧的响应头、Express前面有Nginx反向代理配置了CSP规则，逐一排查修改即可。
• 浏览器缓存也会导致旧的CSP头持续生效，测试时建议开启无痕模式，或者按Ctrl+Shift+R强制刷新清空缓存。

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