仅支持default-src、script-src等部分指令，不支持report-uri、report-to等关键指令，且优先级低于http响应头，生产环境基本无效。
meta标签写CSP策略的正确语法
HTML中用 <meta> 标签设置CSP是可行的，但仅支持部分指令，且优先级低于HTTP响应头——如果服务端已发了CSP头，<meta> 会被完全忽略。
必须用 http-equiv="Content-Security-Policy"，且 content 值要符合CSP语法规范。常见错误是漏掉引号、多空格、或用了不被 <meta> 支持的指令（比如 report-uri、report-to、upgrade-insecure-requests）。
-
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'unsafe-inline' 'self'">✅ 可用 -
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; report-uri /csp-report">❌report-uri在<meta>中无效 -
<meta http-equiv="Content-Security-Policy" content="default-src">❌ 缺少双引号包裹content值
哪些CSP指令能用meta标签生效
只有“文档生命周期早期”起作用的指令才被浏览器允许在 <meta> 中使用，核心限制是：不能影响加载阶段的网络请求决策（比如重定向、上报、升级HTTP），也不能干预worker或嵌入式上下文。
- 支持：
default-src、script-src、style-src、img-src、font-src、connect-src、base-uri、frame-ancestors - 不支持：
report-uri、report-to、upgrade-insecure-requests、block-all-mixed-content、plugin-types、prefetch-src -
frame-ancestors是特例：它在<meta>中有效，但若同时存在HTTP头，则以HTTP头为准；且不支持'none'以外的源列表（很多浏览器会直接忽略非'none'的值）
为什么本地开发用meta测试CSP容易误判
因为 <meta> CSP只对当前HTML文档生效，不继承到iframe、fetch请求、或动态创建的script标签的子资源；而真实部署时，服务端头是全局作用于整个响应链的。
- 本地开
file://协议页面时，多数浏览器会无视<meta>CSP（Chrome/Firefox均明确禁用） - 用
python -m http.server启服务后，<meta>才可能生效，但仍无法模拟report-uri上报行为 - 如果页面里有内联
<script></script>，script-src 'unsafe-inline'在<meta>中虽能放行，但上线后若服务端头没配，照样被拦截——这种“本地能跑线上炸”的坑最常被忽视
实际建议：meta只用于原型验证，别用于生产
真正需要CSP防护的项目，必须由后端注入HTTP响应头。把CSP逻辑塞进HTML模板的 <meta>，等于把安全策略和渲染逻辑耦合，既难审计，又无法覆盖重定向、service worker、prefetch等场景。
- 开发阶段快速试策略？可以，但务必同步在Nginx/Apache/Node中间件里配好对应头，再对比行为是否一致
- 想让CSP对所有子资源生效？
<meta>不行，必须用Content-Security-PolicyHTTP头 - Vue/React单页应用要注意：路由切换不触发HTML重载，所以
<meta>只在首次加载时解析一次，后续JS动态插入的内容不受其约束
最常被忽略的一点：即使你写了 <meta http-equiv="Content-Security-Policy">，只要服务器返回了 Content-Security-Policy 响应头，浏览器就彻底无视它——连解析都不解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
