script-src白名单需用单引号包裹、空格分隔，仅列必需来源；必须显式写'self'，不支持通配符或路径；内联脚本默认被禁，应优先用http响应头配置并配合report-only模式调试。
直接用 script-src 指令就能精准控制哪些域名的脚本可执行，但写错一个引号或漏掉 'self' 就会导致整个页面白屏——这不是夸张，是真实发生的高频事故。
script-src 域名白名单怎么写才不崩溃
核心原则：只列出你真正需要的来源，且每个来源必须用单引号包裹、空格分隔。浏览器会严格按字面匹配，不支持通配符（如 *.cdn.com）或子路径（如 https://api.example.com/v1）。
-
'self'必须显式写出，它代表当前页面协议+域名+端口，不是“默认开启” - HTTPS 域名要带完整协议，
https://cdn.example.com和http://cdn.example.com视为两个不同源 - 不允许写裸域名（如
cdn.example.com），也不允许写带路径的 URL（如https://cdn.example.com/js/） - 如果用了
data:或blob:等特殊协议，也得单独加进去，例如data: blob:
正确示例：Content-Security-Policy: script-src 'self' https://cdn.jsdelivr.net https://unpkg.com
为什么内联脚本和 eval 会突然失效
因为只要没显式加上 'unsafe-inline' 或 'unsafe-eval'，script-src 默认就禁用它们——这是 CSP 的安全基线，不是 bug。
-
<script>alert(1)</script>这类内联脚本会被拦截，控制台报错Refused to execute inline script -
onclick="doSomething()"、javascript:void(0)等事件处理器和伪协议也会被阻止 -
eval()、setTimeout("...")、new Function(...)全部失效，报错Refused to evaluate a string as JavaScript
想保留某段内联脚本？别加 'unsafe-inline'，改用 nonce 或哈希：script-src 'self' 'nonce-abc123'，然后在对应 <script nonce="abc123"></script> 上加属性。
meta 标签 vs HTTP 响应头，选哪个更稳
优先用 HTTP 响应头配置 script-src。如果只能用 <meta>，得知道它的硬伤：
-
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">只对 HTML 文档本身生效，对通过fetch()或importScripts()加载的 JS 无效 - 如果服务器同时返回了 HTTP 头，
<meta>会被完全忽略——连 warning 都不给 - 某些浏览器（如旧版 Safari）压根不支持
<meta>中的 CSP 指令
扩展场景例外：Chrome / Edge 扩展的 manifest.json 中必须用 content_security_policy 字段，格式是 JSON 字符串，例如："content_security_policy": "script-src 'self'; object-src 'none'"。
测试时 script-src 报错太多，怎么快速定位问题
别一上来就上生产策略。先用 Content-Security-Policy-Report-Only 头，把违规行为发到自己的收集端点：
Content-Security-Policy-Report-Only: script-src 'self' https://trusted.cdn; report-uri /csp-report
- 浏览器不会阻断脚本，只发报告，你能看到所有被拦的请求来源、行号、触发的指令
- 报告是 JSON 格式，关键字段包括
csp-report: { "document-url", "violated-directive", "blocked-uri", "line-number" } - 注意：现代浏览器已弃用
report-uri，改用report-to+Reporting-Endpoints头，但兼容性要求高时仍可用report-uri
真正上线前，务必确认所有第三方 SDK（比如埋点、广告、客服组件）都已列入白名单——漏掉一个，就可能让某个按钮或弹窗彻底失灵，而且错误不会抛到 JS 控制台，只藏在 Network 的 CSP report 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
