可配置csp但不推荐用于生产环境，因其不支持report-uri、report-to、frame-ancestors等关键指令，存在解析时机晚、浏览器兼容性差、顺序敏感及多标签仅首条生效等严重限制。
meta http-equiv="Content-Security-Policy" 能设 CSP，但不是“加了就生效”，多数场景下它根本拦不住内联脚本，甚至可能被浏览器静默忽略。
为什么 script-src 'self' 在 meta 里经常失效
浏览器对 meta 声明的 CSP 解析有硬性限制：它不支持 nonce- 和 sha256- 校验，Safari 16.4 之前版本会直接跳过含这些值的整条 script-src；Chrome 虽能识别，但若 meta 出现在 <title></title> 或 <link rel="stylesheet"> 之后，内联 <script></script> 已被拒绝执行，策略才刚解析到一半。
常见错误现象包括：
- 页面加载时报
Refused to execute inline script，但你明明写了script-src 'self' - 控制台看不到 CSP 违规报告，策略像没起作用
- 同一份 HTML，在 Chrome 正常、Safari 白屏或报错
upgrade-insecure-requests 不等于强制 HTTPS
这个指令只在页面**已通过 HTTPS 加载**时才生效，作用是把 http:// 开头的站内资源请求（如 <img src="http://cdn.example.com/logo.png?x-oss-process=image/resize,p_40">）自动改成 https:// 发出。它不处理用户首次输入 http://example.com 的跳转，也不升级跨域请求（比如 fetch("http://api.thirdparty.com")）。
容易踩的坑：
- 开发环境用
http://localhost:3000，但 HTML 里写死http://api.example.com——upgrade-insecure-requests完全不生效 - 用了
<link rel="preload" href="http://...">，预加载在 CSP 解析前就触发，直接被拦截 - 误以为加了这行就能替代 Nginx 的
return 301 https://$host$request_uri配置
meta CSP 的三道硬约束：位置、格式、数量
不是“写进 就行”，而是必须同时满足：
-
<meta http-equiv="Content-Security-Policy">必须是中第一个标签，早于<meta charset>、<title></title>、任何<link>或<script></script> -
content属性值不能换行、不能首尾空格、不能含未转义双引号 ——content="default-src 'self'; script-src 'self'"合法，content="default-src 'self';\nscript-src 'self'"整条失效 - 整个页面只能有一个该
meta标签；Webpack 插件自动生成 + 手动添加导致重复时，只有第一个生效，其余被静默丢弃
真正要放行内联脚本，别靠 meta
想让 <script>const token = document.querySelector('meta[name="csrf-token"]').content;</script> 执行，唯一靠谱做法是外提为 <script src="/js/app.js"></script>，再在 JS 里读取 meta[name="csrf-token"]。若真无法外提，必须用服务端动态注入 nonce 值并配响应头 —— meta 根本做不到动态 nonce，固定字符串等于没设。
复杂点在于：CSP 不是开关，而是每条指令都得匹配真实加载路径。比如 connect-src 'self' 拦的是 fetch() 目标，和 script-src 完全无关；frame-src 和 child-src 在现代浏览器中已分离，写错一个就漏防。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
