CSP设为default-src 'none'仍允许React SPA加载资源，求助排查原因

AI 小北

2026-6-17

问题分析与解决方案

可能的原因及排查步骤

确认HTTP头是否实际发送
打开Chrome开发者工具（F12）切换到「网络」标签，找到那个唯一的请求，查看「响应头」区域，确认是否存在Content-Security-Policy头，且值确实是default-src 'none'。常见疏漏包括：服务器中间件顺序错误导致头未附加、拼写错误（比如写成仅报告模式的Content-Security-Policy-Report-Only，该模式只会记录违规不会拦截）、仅在特定路由而非全局设置头。
排查CSP规则冲突
检查服务器是否同时发送了多个CSP相关头，比如Content-Security-Policy与Content-Security-Policy-Report-Only共存，或残留了其他宽松的CSP规则。浏览器会合并多组CSP规则，若存在更宽松的配置，可能覆盖你的严格设置。
检查Express配置顺序
若用express.static托管React静态文件，务必确保CSP头的全局中间件在静态文件托管之前配置，否则静态资源的响应不会带上CSP头。正确示例：
```
// 先设置全局CSP头中间件
app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', "default-src 'none'");
  next();
});

// 再托管静态文件
app.use(express.static('build'));
```
验证资源加载实际触发情况
若React SPA的初始HTML已包含所有内联脚本、样式，可能没有后续资源请求，导致你误以为“资源全部加载”。此时可查看控制台是否有CSP报错——若CSP生效，违规的内联资源会触发错误提示；若无报错，大概率是头未正确发送。
强制禁用浏览器缓存
即使在无痕模式，也可在开发者工具「网络」标签勾选「禁用缓存」，重新加载页面后再次确认响应头是否正确。