http响应头方式是唯一可靠方案，因在文档解析后期生效，不支持frame-ancestors、report-uri等关键指令，且无法阻断已解析的内联脚本执行。
用 http-equiv 设置 CSP 为什么基本无效
直接在 <meta http-equiv="Content-Security-Policy" content="..."> 中配置 CSP，浏览器会忽略大部分指令——这是由规范明确规定的。只有极少数指令（如 default-src、script-src、style-src）在部分浏览器中可能被解析，但行为不一致、不可靠，且完全不支持 frame-ancestors、base-uri、report-uri/report-to 等关键指令。
根本原因：CSP 是一个需要在文档解析早期就生效的安全策略，而 <meta http-equiv> 的实际处理时机晚于关键资源加载（尤其是内联脚本、重定向、frame 嵌入判断），浏览器为安全起见，选择性降级或直接跳过。
- Chrome、Firefox、Edge 均不支持通过
http-equiv设置frame-ancestors—— 这意味着无法防御点击劫持 -
report-to和report-uri在<meta>中永远不生效，导致违规报告收不到 - 即使
script-src 'self'看似生效，也无法阻止已解析的内联事件处理器（如<button onclick="..."></button>）执行
真正有效的 CSP 部署方式只有两种
所有生产环境都必须用以下任一方式，且优先选第一种：
-
HTTP 响应头（推荐）：在 Web 服务器或反向代理（Nginx / Apache / Cloudflare / CDN）中设置
Content-Security-Policy响应头。这是唯一能保证全指令生效、全浏览器兼容、且在 HTML 解析前就起作用的方式 -
HTML
<meta>仅作开发兜底（非常有限）：仅当无法控制服务端响应头时（如纯静态托管且无自定义 header 能力），才考虑用<meta>，且必须接受功能阉割。此时只能用于简单限制脚本/样式的来源，不能依赖它做真实防护
例如 Nginx 配置：
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.example.com; object-src 'none'; frame-ancestors 'none'; report-to default";
<meta http-equiv> 的实际可用范围和写法限制
如果真要硬上 <meta>，必须满足三个硬约束：
- 必须放在
最前面（在任何<script></script>、<link>、<style></style>之前），否则已被解析的内容不受控 - 只支持部分指令：允许
default-src、script-src、style-src、img-src、font-src、connect-src；禁止frame-ancestors、base-uri、form-action、report-uri、report-to、upgrade-insecure-requests - 不支持 nonce 或 hash：即无法放行指定内联脚本，
script-src 'unsafe-inline'是唯一（但极不推荐）的绕过方式
合法示例（仅限测试）：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://apis.google.com; img-src 'self' data:;">
部署后必须验证是否真正生效
光写了不等于起作用。常见失效场景包括：
- 响应头被 CDN 或中间代理覆盖（比如 Cloudflare 默认加了宽松策略，会覆盖你自己的）
- 服务器同时返回了
Content-Security-Policy和Content-Security-Policy-Report-Only，后者不会阻断但可能掩盖前者错误 - 策略中用了未被支持的源表达式（如
'strict-dynamic'在旧版 Safari 不支持，会导致整条script-src回退为'none'）
验证方法：curl -I https://yoursite.com 查看响应头是否存在且内容正确；打开 Chrome DevTools → Application → Manifest/CSP 查看解析结果；故意触发违规（如插入内联 script）观察 console 是否报 Refused to execute inline script。
最易被忽略的一点：CSP 是逐页生效的，SPA 路由切换不会重新触发策略检查，所以单页应用必须确保首屏 HTML 的 CSP 已覆盖所有可能动态加载的资源类型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
