应通过http响应头而非配置csp，因在服务端发csp头时被忽略、file://协议下失效、chrome124+限制关键指令、不支持report-to等必需指令，且存在兼容性与安全性问题。
别用 <meta http-equiv="Content-Security-Policy"> 配 CSP —— 它在绝大多数生产场景下不生效，且会掩盖真实问题。
为什么版CSP几乎总是失效
浏览器执行 CSP 的优先级是：HTTP 响应头 > <meta>。只要服务端发了任何 CSP 头（哪怕只是空值、语法错误或 Content-Security-Policy: ），<meta> 就被完全忽略。
- 本地用
file://协议打开 HTML 时，<meta>和响应头都无效 —— CSP 全面关闭 - 开发服务器（如 Vite、Webpack Dev Server）默认不发 CSP 头，此时
<meta>才可能起作用，但 Chrome 124+ 已限制其对script-src等关键指令的支持 -
<meta>不支持report-to、frame-ancestors、base-uri等必须项，也无法用于 iframe 或 worker 子上下文 - Safari 16.4 之前版本会静默丢弃含
nonce-或sha256-的整条策略
script-src 'unsafe-inline' 在里写了也没用
语法上能写进去，但实际效果极不可靠：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- Android WebView 可能直接跳过整条
script-src规则，导致所有脚本被拦 - 若后端已设
script-src 'self'，<meta>加'unsafe-inline'不会放宽限制，只会让策略冲突、更难调试 - 它只对当前 HTML 文档生效，无法继承或协同服务端策略
- 一旦放开
script-src，往往也得同步放开style-src，攻击面被动扩大
真要配 CSP，必须走 HTTP 响应头
Nginx 示例（必须放在 server 或 location 块中）：
add_header Content-Security-Policy "default-src 'none'; script-src 'self' 'nonce-{random}' https://js.stripe.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' api.example.com; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; report-to csp-endpoint";
- 双引号包裹整个策略值，内部单引号用于源关键字（如
'self'） -
nonce-{random}必须由后端每次请求动态生成并注入到 HTML 的<script nonce="xxx"></script>中 —— 硬编码或固定值等于没设 - 确认是否发出：Chrome DevTools → Network → HTML 请求 → Response Headers → 查看是否存在
content-security-policy（全小写） - 开发期建议先用
Content-Security-Policy-Report-Only+report-uri观察违规行为，再切为 blocking 模式
upgrade-insecure-requests 这个例外也有限制
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 只在页面**已通过 HTTPS 加载**时才生效：
- 它不会把
http://example.com自动跳转成 HTTPS —— 首次访问仍走明文，必须靠 Nginx 301 或 CDN 强制 HTTPS 开关 - 只升级同源相对路径或
http://开头的站内绝对 URL；跨域http://thirdparty.com不会被改写 - preload/prefetch 中的
http://资源在 CSP 解析前就已发出请求，会被直接拦截 - 如果第三方资源（如图床）没配 HTTPS，升级后直接 404，不会回退
真正容易被忽略的是：CSP 不是“加了就安全”，而是“漏掉一个指令就可能被绕过”。比如没设 base-uri 'self'，攻击者可用 <base href="http://evil.com"> 劫持所有相对链接；没设 form-action 'self'，表单照样能提交到钓鱼域名。这些都必须显式声明，不能依赖默认行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
