CSP配置需基于实际资源加载路径，而非一味收紧；应先用Report-Only模式收集violated-directive和blocked-uri日志，再针对性放行script-src、style-src等指令中的内联、nonce、data:或第三方域名，避免白屏与功能异常。
CSP不是写得越严越好，而是得先搞清哪些资源要放行、哪些必须拦截——盲目加default-src 'none'反而会让页面直接白屏。
怎么判断该配哪些指令？
别从零手写，先用Content-Security-Policy-Report-Only头跑几天，收集浏览器上报的违规请求。重点看violated-directive和blocked-uri字段，它们直接告诉你哪条指令缺了什么源。
- 内联脚本报错？说明
script-src没加'unsafe-inline'或没配nonce - Vue/React热更新失败？大概率是
connect-src没放行localhost:* - 字体加载失败？检查
font-src是否漏了data:或CDN域名 - 第三方统计JS 403？可能是
script-src没包含对应域名，或对方用了不兼容的协议（如HTTP资源在HTTPS页里）
script-src和style-src为什么不能只写'self'？
现代前端框架（比如Vite、Webpack Dev Server）默认注入内联<script>或<style>，'self'挡不住它们。生产环境更麻烦：Vue SFC里的<script setup>、Tailwind的JIT模式生成的内联样式，都会触发CSP拦截。
- 开发时临时加
'unsafe-inline'——仅限Report-Only模式下用，上线前必须删 - 生产用
nonce：服务端每次响应生成随机nonce-xxx，HTML里<script nonce="xxx">，CSP里写script-src 'nonce-xxx' - 避免
hash方案：Webpack打包后hash易变，维护成本高；且不支持动态生成的内联代码
常见坑：HTTPS混合内容和data:协议
即使全站HTTPS，CSP也会拦掉http://资源——但更隐蔽的是data:开头的URI。比如Base64图片、某些UI库（Ant Design图标）用的data:字体，或者React DevTools注入的data:脚本。
立即学习“前端免费学习笔记（深入）”；
-
img-src必须显式加data:才能显示Base64图 -
font-src加data:才让woff2字体正常加载 -
script-src加data:风险极高，除非明确知道来源（比如某SDK强制要求），否则别开 - 用
upgrade-insecure-requests指令自动把HTTP请求升成HTTPS，减少手动配源的遗漏
真正难的不是语法，是理清每个资源的实际加载路径——浏览器控制台的Network面板右键“Copy as cURL”再比对CSP规则，比死记文档管用得多。上线前务必在真实设备上测第三方SDK（尤其是埋点、客服、支付组件），它们常偷偷加载未知域名的JS。
