真正起效的前提是移除所有内联脚本、禁用eval类调用、清理危险属性，并同步处理富文本和动态渲染场景；否则csp策略形同虚设。
直接加 Content-Security-Policy 响应头或 <meta> 标签不能算整改完成，真正起效的前提是：移除所有内联脚本、禁用 eval 类调用、清理危险属性，并同步处理富文本和动态渲染场景。否则策略形同虚设。
script-src 不写 'unsafe-inline' 后页面白屏怎么办
这是最常遇到的“策略生效即崩”问题——浏览器真把所有 <script></script> 块和 onclick 属性全拦了，但你没提前拆分逻辑。
- 先全局搜索
<script></script>开头的内联块，把 JS 代码抽成独立文件，用<script src="..."></script>加载 - 替换所有
onclick、onload等事件属性为 JS 绑定：element.addEventListener('click', handler) - 若必须保留少量内联脚本（如初始化配置），改用
nonce：服务端生成随机值（如nonce-8a3f2e1b），在响应头中写script-src 'nonce-8a3f2e1b'，HTML 中对应 script 标签加nonce="8a3f2e1b" - 别硬编码
nonce值到模板里，每次请求必须新生成；否则攻击者可复用已知 nonce
富文本渲染时 CSP 报错“Refused to load the script”
用户提交的 HTML 片段（如评论、文章正文）被 innerHTML 直接插入后，其中的 <script></script> 或 onerror 属性会触发 CSP 拦截，但报错不提示具体哪段内容出问题。
- 绝对不要用
innerHTML = userHtml，改用 DOMPurify 等库净化后再插入：el.innerHTML = DOMPurify.sanitize(dirtyHtml, {ALLOWED_TAGS: ['p','strong','em']}) - 净化配置必须显式禁用
script、iframe、on*属性，且关闭FORBID_TAGS的宽松模式 - 如果后端返回的是已过滤的 HTML，前端仍要再过一遍净化——CSP 不继承父页面策略，子内容不受主策略保护
- 注意
data:协议图片可能被img-src拦截，若需支持 base64 图片，得在策略中显式加img-src 'self' data:
开发期用 report-only 模式却收不到违规报告
Content-Security-Policy-Report-Only 头 + report-uri 或 report-to 是灰度上线前必走步骤，但常见漏配导致日志静默丢失。
-
report-uri已废弃，优先用report-to+Reporting-EndpointsHTTP 头配合；浏览器只认后者 - 上报 endpoint 必须支持
POST，且响应状态码为201或204，否则后续报告会被丢弃 - 检查浏览器控制台是否出现
CSP policy violated: ...提示——没有说明策略根本没加载，可能是<meta>写错位置（必须在顶部，且早于任何脚本） - 本地开发用
file://协议时，CSP 完全不生效，必须走http://localhost或类似服务
CSP 不是开关式配置，它依赖整个前端链路的协同：构建工具要剔除注释和调试代码，框架要禁用 v-html / dangerouslySetInnerHTML，后端返回的 HTML 片段也得带自己的策略头。最容易被忽略的是 base-uri 和 form-action ——没显式声明就等于放行任意跳转和提交，XSS 利用链立刻补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
