用http响应头设置content-security-policy可从根本上阻止xss，需禁用内联脚本（不加'unsafe-inline'）、配合nonce或hash白名单机制，并显式声明base-uri、form-action等关键指令，开发期优先使用report-only模式观测。
怎么用 Content-Security-Policy 阻止 XSS？
直接加 HTTP 响应头 Content-Security-Policy，比靠 JS 过滤或 HTML 转义更底层、更可靠。它不是“修补漏洞”，而是让浏览器根本不敢执行非法脚本。
常见错误是只写 script-src 'self' 就以为安全了——其实 inline script（比如 <script>alert(1)</script>）、eval()、内联事件（onclick="..."）默认全被放行，除非你显式禁止。
-
script-src 'self' https://cdn.example.com：只允许同源和指定 CDN 的外部脚本，但依然允许内联脚本 - 要禁内联，必须加
'unsafe-inline'的反向操作——即不写它，再配合nonce或hash - 启用
default-src 'none'后，所有资源类型（img、style、font 等）都需显式声明，否则 404
nonce 和 hash 怎么选？
两者都能合法化特定内联脚本，但机制不同：nonce 是服务端每次响应生成一次随机值，hash 是对脚本内容做 SHA256 摘要。选错会导致脚本白屏或策略失效。
典型误用：把 nonce 值硬编码在 HTML 模板里，或用固定字符串当 nonce——这等于形同虚设，攻击者可复用。
- 用
nonce：HTML 中写<script nonce="abc123">...</script>，响应头配script-src 'nonce-abc123'；务必每次请求生成新值 - 用
hash：算出sha256-...，写进头里，如script-src 'sha256-BzLdO9X...'；适合静态内联脚本，动态拼接的脚本无法预计算 hash - 别混用：一个策略里同时写
'nonce-xxx'和'sha256-...'是允许的，但浏览器只匹配其一；没匹配上的脚本仍被拦截
为什么开了 CSP 还有资源加载失败？
因为 CSP 默认不继承父页面策略，iframe、worker、fetch 请求等子资源都受各自响应头控制。最常踩的坑是：主页面加了 CSP，但 API 接口返回的 HTML 片段（比如富文本渲染）没带头，或用了 unsafe-inline 却忘了限制 style-src。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
另一个隐形问题：CSP 对 base-uri、form-action、frame-ancestors 这些指令默认宽松，不显式配置就可能被利用。
-
base-uri 'self'防止恶意<base href="http://attacker.com">劫持相对 URL -
form-action 'self'阻止表单提交到第三方，防 CSRF 数据外泄 -
frame-ancestors 'none'或'self'防止被嵌入钓鱼页面（点击劫持） - 开发时用
Content-Security-Policy-Report-Only头 +report-uri先观察违规行为，别一上来就 blocking
HTTP 头 vs 标签配置 CSP 有什么区别？
只有 script-src、style-src、img-src 等少数指令支持 <meta>，且不支持 report-uri、frame-ancestors、base-uri 等关键指令。更重要的是：<meta> 在 HTML 解析中途才生效，之前加载的内联脚本已执行。
所以生产环境必须用 HTTP 响应头。仅在无法改服务器配置（如静态托管平台）时，才退而求其次用 <meta>，且得接受策略延迟生效的风险。
- Apache：用
Header set Content-Security-Policy "..." - Nginx：用
add_header Content-Security-Policy "...";（注意分号） - Node.js（Express）：用
res.setHeader('Content-Security-Policy', '...') - 千万别在
<meta>里写report-uri——它会被忽略
真正难的不是写对那几行策略，而是理清每个资源的实际来源路径、是否跨域、是否动态生成。线上策略一旦写死，改错一条就可能大面积白屏，所以先开 Report-Only，盯三天日志再切正式策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
