不推荐在生产环境用<meta>标签配置CSP，因其解析滞后、无法拦截前置内联脚本、不支持frame-ancestors/report-uri等关键指令，且易被响应头覆盖；必须改用服务端HTTP响应头配合动态nonce与最小化策略。
直接在 index.html 里用 <meta> 标签配 CSP 是可行的，但**不推荐用于生产环境**——它比 HTTP 响应头晚生效、可被前端代码覆盖、且对内联脚本（如 <script> 块）的拦截能力更弱。
为什么 <meta> 配 CSP 容易失效
浏览器解析 HTML 是自上而下进行的，<meta http-equiv="Content-Security-Policy"> 必须出现在 <head> 最前面，否则：
- 它无法约束已提前解析的内联脚本（比如写在它之前的 <script>）
- 无法防护重定向后的页面（响应头能覆盖整个响应周期，<meta> 只管当前 HTML 文档）
- 若页面通过 document.write() 或框架动态注入 HTML，该策略可能完全不生效
<meta> 的正确写法与限制
如果仅用于开发调试或静态页托管（如 GitHub Pages 不支持自定义响应头），可用如下格式：
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; base-uri 'self';">
注意要点：
- http-equiv 属性名必须完整，不能写成 name
- content 值中不能换行，所有指令用英文分号 ; 分隔
- 不支持 report-uri 或 report-to（这些在 <meta> 中被忽略）
- nonce 和哈希值（如 sha256-...）在 <meta> 中**有效**，但需确保对应 <script nonce="..."> 在同一文档中且位置靠后
哪些指令在 <meta> 中会“形同虚设”
以下常见配置在 <meta> 下实际不起作用或效果打折：
- default-src：部分浏览器不支持该指令在 <meta> 中回退行为
- form-action：Chrome 等现代浏览器已支持，但 Safari 15.4 之前版本忽略
- frame-ancestors：**完全不支持**——必须通过响应头设置，否则点击劫持防护失效
- upgrade-insecure-requests：仅响应头生效，<meta> 中声明无效
真正要防脚本注入，优先改服务端响应头
哪怕只有一台 Nginx，也比依赖 <meta> 可靠得多。例如在 Nginx 配置中加一行：
add_header Content-Security-Policy "script-src 'self' 'nonce-$random_nonce'; object-src 'none'; base-uri 'self'; report-uri /csp-report;";
其中 $random_nonce 需由后端每次响应时生成并注入——这才是应对动态内容和真实攻击链的底线配置。HTML 文件本身只是载体，安全边界得从网络层开始划。
立即学习“前端免费学习笔记（深入）”；
