不能用<meta>标签配置CSP，因其优先级低于HTTP响应头、不支持report-to/report-uri、Chrome124+限制关键指令、file://协议下失效，且存在兼容性与安全风险。
用 <meta> 标签配置 CSP 的限制与风险
不能只靠 <meta> 标签上线 CSP，它不支持 report-uri 和 report-to，且优先级低于 HTTP 响应头——服务器头一覆盖，<meta> 就失效。
常见错误是把开发期验证用的 Content-Security-Policy-Report-Only 也写进 <meta>，但浏览器根本不认这个值，直接忽略。
-
<meta http-equiv="Content-Security-Policy" content="...">只在无法控制响应头时作为临时方案（如静态托管、某些 SaaS 页面） - 若页面含富文本渲染、
innerHTML注入或模板引擎动态插值，这些内容不会继承<meta>的策略，得单独验签或过滤 -
default-src 'none'这类严格策略在<meta>中可能因加载顺序问题导致白屏（比如 CSS 还没加载就被拦截）
script-src 不写 'unsafe-inline' 却没配 nonce 或 hash 的后果
删掉 'unsafe-inline' 后，所有内联脚本（<script>alert(1)</script>、<button onclick="doX()">、setTimeout("x()", 0)）会被静默拦截，页面功能直接中断，控制台只报 Refused to execute inline script，不提示缺什么。
- 必须二选一：
script-src 'nonce-RANDOM'+ 每个<script nonce="RANDOM">标签，或script-src 'sha256-xxx'+ 对内联脚本内容做哈希 - Webpack 用户可用
html-webpack-plugin的meta配置注入 nonce，但需确保服务端生成并同步传入模板 - Vue/React 等框架的事件绑定（如
@click、onClick）不算内联脚本，不受影响；但手写的onclick=""属性会被拦
img-src 漏掉 data: 导致 base64 图片炸掉
现代前端大量用 data: URI 内嵌小图标、占位图或用户头像，如果 img-src 没显式加 data:，这些图片全部 404，页面显示空白或裂图，控制台只报 CSP violation，不说明是缺 img-src。
立即学习“前端免费学习笔记（深入）”；
-
img-src 'self' data: https:是较安全的起点，https:允许任意 HTTPS 图片（慎用），data:必须带冒号 - 别写成
data或data://，浏览器只认data: - 若用 SVG 内联在 HTML 里（
<img src="data:image/svg+xml,...>），同样依赖img-src data:
connect-src 没覆盖 API 域名，fetch() 和 WebSocket 全挂
很多团队只配了 script-src 和 img-src，却忘了 connect-src —— 它管所有主动连接：XHR、fetch()、WebSocket、EventSource。漏配会导致接口请求静默失败，网络面板里看不到请求发出，控制台只有 CSP 报错。
-
connect-src 'self' api.example.com wss://ws.example.com，注意wss://要单独写，https:不自动包含 WebSocket - 本地开发常连
localhost:3000，上线后必须换成真实域名，localhost在生产环境无效 - 若用 Service Worker，它的
fetch请求也受connect-src约束，不是绕过策略的后门
font-src、甚至 base-uri 被劫持的风险。策略越严，漏点越隐蔽。 
