html页面安全策略不能靠标签做基础防护，因其在浏览器解析html时存在时间差，无法拦截内联脚本等关键攻击；必须使用http响应头content-security-policy配置，并配合x-frame-options等头部加固。
为什么 `` 标签不能用于基础防护
浏览器解析 HTML 是自上而下的流式过程：
– 首屏 `<script>`、服务端注入的初始化代码、甚至 `<button onclick="">` 在解析到对应标签时立刻运行；<br>
– `<meta>` 必须等解析器“走到那里”才注册策略，防护存在天然时间差；<br>
– 只要服务端发了任意 `Content-Security-Policy` 响应头（哪怕值为空或语法错误），`<meta>` 就被浏览器静默忽略；<br>
– Chrome 124+ 已移除对 `<meta>` 中 `script-src 'unsafe-inline'` 的支持；<br>
– `frame-ancestors`、`report-to`、`nonce` 等核心指令在 `<meta>` 中完全不生效；<br>
– Android WebView 可能跳过含 `nonce-` 的规则，导致白屏；<br>
– `file://` 协议下所有 CSP（包括 `<meta>`）一律失效。</script>
必须用 HTTP 响应头配置 CSP
这是唯一可靠的方式。策略需由后端或反向代理（如 Nginx、Apache）在响应中直接写入：
- 使用 `add_header`（Nginx）或 `Header set`（Apache），不能用 `set` 或 `echo` 输出，否则可能被覆盖
- 整条策略必须用英文双引号包裹，内部源用单引号，如：
"default-src 'none'; script-src 'self' 'nonce-{random}'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; object-src 'none'; report-to csp-endpoint" - `default-src 'none'` 是推荐起点，未显式声明的资源类型（如 `connect-src`、`font-src`）将默认被阻断
- `script-src` 必须去掉 `'unsafe-inline'` 和 `'unsafe-eval'`，改用动态生成的 `nonce` 或哈希值
- `nonce` 值需每次 HTTP 响应唯一生成，硬编码或复用等于无效
其他头部配合加固
单靠 CSP 不够，还需搭配以下关键响应头：
- X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none' —— 防点击劫持，比前端 JS 检测更底层、更可靠
- X-Content-Type-Options: nosniff —— 阻止 MIME 类型嗅探，防 `.jpg` 被当 JS 执行
- Strict-Transport-Security: max-age=31536000; includeSubDomains —— 强制 HTTPS，防中间人劫持
- Referrer-Policy: strict-origin-when-cross-origin —— 控制 Referer 泄露敏感路径
验证是否生效
别信代码写了就完事，务必实测：
- 打开 Chrome DevTools → Network → 点开 HTML 请求 → 查看 Response Headers 中是否存在
content-security-policy - 故意插入 `<script>alert(1)</script>`，确认是否被拦截（Console 显示 CSP violation）
- 用在线工具如 CSP Evaluator 检查策略是否存在宽泛源或高危指令
- 灰度期可用
Content-Security-Policy-Report-Only头收集违规但不阻断，确认无误后再切为正式策略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
