html文档中在生产环境基本无效，因其生效滞后、不支持frame-ancestors等核心指令、被响应头强制忽略、report-to不生效、android webview跳过nonce规则，且防护范围不覆盖iframe等子资源。
HTML文档里直接写<meta http-equiv="Content-Security-Policy">看似简单，但生产环境基本无效——它拦不住首屏内联脚本、不支持frame-ancestors、会被响应头静默覆盖，真要防XSS，必须从HTTP响应头入手。
为什么标签配CSP在生产环境会失效
浏览器解析HTML是自上而下的，<meta>生效时，前面的<script></script>可能已经执行完了；更关键的是，只要服务端发了任何Content-Security-Policy响应头（哪怕值为空或语法错），<meta>就完全被忽略。
- Chrome 124+ 已禁用
<meta>对script-src、frame-ancestors等核心指令的支持 -
report-uri和report-to在<meta>中压根不生效，没法灰度观测 - Android WebView 可能跳过含
nonce-的规则，导致脚本全白屏 - 重定向页、iframe子页、data:URI都不受
<meta>约束，防护范围严重缩水
HTTP响应头CSP怎么写才不被浏览器忽略
整条策略必须用双引号包裹，内部源关键字（如'self'）必须用单引号，指令之间用分号+空格分隔，漏引号、多空格、非法字符都会让整条头被静默丢弃。
- Nginx配置必须用
add_header或Header set，不能用set或echo输出，否则头可能被覆盖 -
nonce值必须由后端每次HTTP响应动态生成，硬编码或复用等于没设 - 示例合法写法：
"default-src 'none'; script-src 'self' 'nonce-{random}'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; object-src 'none'; report-to csp-endpoint" - Express/Next.js等框架中，CSP中间件必须挂载在所有可能写入响应体的中间件之前
script-src配置最容易踩的三个坑
script-src不是“允许哪些CDN”，而是“只允许从哪些来源执行JS”——它管的是eval()、onclick、new Function()、document.write()生成的脚本，以及所有动态加载入口。
- 加了
'unsafe-inline'或'unsafe-eval'，整个XSS防护就形同虚设 - Webpack/Vite构建产物若含内联
<script></script>（比如SSR模板注入），必须配nonce，不能放宽策略 -
script-src 'self' 'strict-dynamic'混用'self'会导致strict-dynamic被浏览器忽略，信任链断掉 - React/Vue里用
dangerouslySetInnerHTML或v-html渲染含javascript:void(0)的内容，会被script-src拦截，得改用事件委托
上线前必须验证的动态加载入口
CSP不继承父页面策略，iframe、Web Worker、fetch返回的HTML片段、富文本渲染结果，都得各自带CSP头，否则策略失效。最常漏的是API返回的HTML内容（比如评论区、后台编辑器预览）。
- 检查所有
import()动态导入、eval()调用、setTimeout("...")字符串形式执行 - 确认第三方SDK（如统计、埋点、客服组件）是否被漏进
script-src白名单 - 用
Content-Security-Policy-Report-Only模式先跑一周，看/csp-report接口里哪些脚本被拦了再切正式策略 -
base-uri 'self'、form-action 'self'、frame-ancestors 'none'这些指令不显式写，就等于没防护，不是默认安全
真正难的不是写那行Content-Security-Policy头，而是把所有动态脚本加载路径都摸清楚、每个nonce都确保唯一、每处富文本渲染都走安全通道——漏掉任意一个，策略就变成摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
