csp 的 标签在生产环境几乎无效，因解析滞后、主流浏览器不支持 nonce/hash、易被响应头覆盖且无法拦截内联脚本；必须改用服务端 http 响应头配合最小化策略与前端代码改造。
别用 <meta http-equiv="Content-Security-Policy"> 做硬防御 —— 它在真实生产环境里基本拦不住 XSS，还容易让你误以为“已经配好了”。
为什么 <meta> 的 CSP 几乎不拦内联脚本
浏览器解析 <meta http-equiv="Content-Security-Policy"> 是同步但滞后的行为：它必须等 HTML 解析到该标签位置才开始生效。而 <script>alert(1)</script> 或 <button onclick="..."></button> 这类内联代码，在解析到对应标签时就立刻尝试执行了 —— 此时 CSP 还没加载、没注册、没起效。
- Safari 16.4 之前版本会直接跳过含
nonce-或sha256-的整条script-src指令 - Chrome 124+ 已移除对
script-src 'unsafe-inline'在<meta>中的解析支持（写了也当没写） - 只要服务端返回了任意
content-security-policy响应头（哪怕只是空值或拼写错误），<meta>就被完全忽略 - 本地用
file://打开 HTML 时，CSP 全面关闭 ——<meta>和响应头都无效
script-src 'self' 写在 <meta> 里等于没设
你写 content="script-src 'self'"，本意是只允许同源 JS，但它根本无法阻止 <script>fetch('/api/user').then(r => r.json().then(console.log))</script> 这种内联脚本执行 —— 因为 'self' 只约束外部 <script src="..."></script> 的来源，不约束内联脚本本身是否允许运行。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 真正禁用内联脚本，必须显式排除：
script-src 'self'默认仍允许内联；要拦住它，得靠nonce-或hash-，而这两者在<meta>中不被 Safari / Android WebView 等主流环境可靠支持 - 写了
script-src 'self' 'unsafe-inline'更糟：等于主动放行所有onclick、onerror、<script>...</script>，XSS 防御形同虚设 - 就算侥幸生效，它也只作用于当前 HTML 文档，无法覆盖 iframe、worker、fetch 子请求等上下文
真要上简版硬防御，必须走响应头 + 最小化指令
放弃 <meta>，改用服务端 HTTP 响应头发一条最简但有效的策略，才能真正阻断多数 XSS 载荷执行。
- Nginx 配置示例（放在
server或location块中）：add_header Content-Security-Policy "default-src 'none'; script-src 'self'; connect-src 'self'; form-action 'self'; base-uri 'self'; frame-ancestors 'none'; object-src 'none'";
-
default-src 'none'是关键：它让所有未显式声明的资源类型（如img-src、style-src）全部失效，避免漏配导致宽松回退 - 必须配套处理前端：把所有内联脚本外提为
<script src="/js/init.js"></script>；把onclick="do()"改成addEventListener；禁用document.write()和eval() - 开发期先用
Content-Security-Policy-Report-Only+report-uri观察违规，确认无误再切为强制拦截模式
真正的硬防御不在标签里，而在服务端响应头是否发出、前端是否彻底剥离内联行为、以及你有没有验证过每条指令在 Chrome DevTools → Network → Response Headers 中真实存在且格式正确。任何依赖 <meta> 的“快速上线”方案，上线当天就可能被绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
