CSP 用 <meta> 标签配置不推荐用于生产环境，因其不支持 report-uri、report-to、frame-ancestors 等关键指令，存在解析时机晚、浏览器兼容性差、顺序敏感及多标签仅首条生效等严重限制。
CSP 用 <meta> 标签配置可行，但限制多、易踩坑，不推荐用于生产环境。
为什么 <meta http-equiv="Content-Security-Policy"> 不如 HTTP 头可靠
HTTP 响应头方式支持全部 CSP 指令，<meta> 标签在规范中明确被排除了部分关键能力。实际开发中遇到的多数“CSP 不生效”或“报告收不到”，根源都在这里。
-
report-uri和report-to在<meta>中完全无效 —— 你配了也收不到违规日志 -
frame-ancestors不可用 —— 无法防止被恶意 iframe 嵌入 - 浏览器解析
<meta>的时机晚于部分资源加载，存在竞态风险（尤其对内联脚本） - 某些旧版 Safari 和 WebView 对
<meta>的 CSP 支持不完整，行为不一致
script-src 配置不当会直接阻断 <script>，但不会影响 <meta name="csrf-token">
常见错误是把 CSP <meta> 和内联脚本写在同一份 HTML 里，比如：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<script>const token = document.querySelector('meta[name="csrf-token"]').content;</script>
结果是第二行 <script> 被浏览器直接拒绝执行 —— 但 <meta name="csrf-token"> 本身完全不受影响，它只是普通元数据，CSP 管不着。
- 真正该做的：把脚本外提为
<script src="/js/app.js"></script>，再在 JS 里读取meta[name="csrf-token"] - 如果必须保留内联脚本，得显式加
'unsafe-inline'（不推荐），或用nonce/sha256-哈希方式（<meta>支持这两种） -
style-src 'unsafe-inline'同理：它放行的是<style>和，不是<meta>
真要用 <meta> 配置，顺序和位置有硬要求
<meta http-equiv="Content-Security-Policy"> 必须出现在 <head> 最前面，且早于任何可能触发资源加载的标签（比如 <link rel="stylesheet">、<script>、甚至 <meta name="viewport">）。
- 放在
<title>后面？可能已错过部分样式/脚本加载时机 - 和
<meta charset>顺序颠倒？某些浏览器会忽略 CSP - 多个
<meta http-equiv="Content-Security-Policy">？只有第一个生效，其余被静默丢弃 - 内容里不能换行或含多余空格 ——
content="default-src 'self'; script-src 'self'"是合法的，但content="default-src 'self';\nscript-src 'self'"会导致整条失效
复杂点在于：CSP 不是“开了就安全”，而是每一条指令都要匹配真实资源加载路径。比如 connect-src 漏掉 API 域名，fetch() 就静默失败；img-src 没放开 data:，base64 图片就裂图。这些细节不会报错，只会在控制台悄悄标记 “Refused to load resource”，容易被忽略。
