csp通过http响应头在浏览器层强制执行资源白名单，比js过滤更底层可靠；仅设script-src 'self'不防内联脚本和eval，须配合nonce/hash并显式配置base-uri、form-action等关键指令。
直接加 Content-Security-Policy HTTP 响应头，比靠 JS 过滤或 HTML 转义更底层、更可靠。它不是“修补漏洞”，而是让浏览器根本不敢执行非法脚本。
为什么不能只写 script-src 'self'
常见错误是以为加了 script-src 'self' 就安全了——其实 <script>alert(1)</script>、eval()、onclick="doSomething()" 默认全被放行，除非你显式禁止。
-
script-src 'self' https://cdn.example.com只限制外链脚本，不拦内联脚本和动态执行 - 要禁内联，必须不写
'unsafe-inline'，再配合nonce或hash - 漏掉
default-src 'none'会导致img-src、style-src等指令失效，资源静默 404
怎么安全启用内联脚本：用 nonce 还是 hash
两者都能合法化特定内联脚本，但机制不同，选错会导致白屏或策略失效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
nonce：服务端每次响应生成新随机值（如abc123），HTML 中写<script nonce="abc123">...</script>，响应头配script-src 'nonce-abc123'；硬编码或复用 nonce 值等于形同虚设 - 用
hash：对脚本内容做 SHA256 摘要（不含<script></script>标签），如sha256-BzLdO9X...，写进头里；适合静态内联脚本，动态拼接的无法预计算 - 别混用：一个策略里同时写
'nonce-xxx'和'sha256-...'是允许的，但浏览器只匹配其一；没匹配上的脚本仍被拦截
哪些关键指令容易被忽略
CSP 对 base-uri、form-action、frame-ancestors 这些指令默认宽松，不显式配置就可能被利用。
-
base-uri 'self'防止恶意<base href="http://attacker.com">劫持所有相对 URL -
form-action 'self'阻止表单提交到第三方，防 CSRF 数据外泄 -
frame-ancestors 'none'或'self'防止被嵌入钓鱼页面（点击劫持） -
object-src 'none'必须显式设置，否则 Flash/Java 插件可能被滥用
开发期怎么试，才不会炸掉线上页面
别一上来就用 Content-Security-Policy blocking 模式——先用 Content-Security-Policy-Report-Only + report-uri 观测违规行为。
- 响应头设为
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report - 浏览器会执行策略但不阻断，只发报告到
/csp-report接口，你能看清哪些脚本/样式被拦了 - 注意：CSP 不继承父页面策略，iframe、worker、fetch 返回的 HTML 片段也得各自带头，否则策略失效
- 上线前务必验证所有动态生成的脚本（比如富文本渲染、模板引擎插值）是否被覆盖
最麻烦的不是写策略，而是确认每个内联脚本、每个第三方资源、每个动态加载路径是否都落在白名单里——漏一个，就可能白屏或功能异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
