CSS变量本身不触发CSP拦截，因变量定义与读取不属于资源加载或内联执行；真正被拦的是内联注入含变量的样式规则，如setAttribute('style', ...)或innerHTML插入。
为什么CSS变量（--*）本身不触发CSP拦截
CSS变量（自定义属性）本身不是资源加载行为，也不属于内联样式执行环节。浏览器解析 div { --color: red } 或读取 getComputedStyle(el).getPropertyValue('--color') 不会触发 style-src 检查——CSP管的是“哪里来的样式”，不是“样式里写了什么”。真正被拦的，是那些**通过内联方式动态注入含变量的样式规则**的行为，比如：el.setAttribute('style', '--color: red; color: var(--color)') 或 document.head.innerHTML += '<style>:root { --theme: blue }</style>'。
style-src 配置错误导致 :root 变量失效的典型场景
很多人在 <style> 标签里写 :root { --primary: #007bff }，却忘了 CSP 的 style-src 指令是否允许该 <style> 执行。如果策略是 style-src 'self' 但 HTML 是通过 file:// 加载（Electron 或本地调试），'self' 实际指向空源或 about:blank，导致整个 <style> 被静默丢弃——变量没注册，后续 var(--primary) 就全变成 initial 或 fallback 值。
- 检查 DevTools → Application → Content Security Policy 面板，确认是否有
Refused to apply inline style记录 - 用
curl -I http://localhost:3000看响应头中Content-Security-Policy的style-src值是否包含'self'（且服务端协议/端口匹配） - 若用
<meta http-equiv="Content-Security-Policy">，注意它不支持nonce和hash，仅适合临时调试
安全注入 CSS 变量的三种可行方式
绕过内联样式限制，又不降级用 'unsafe-inline'，关键在于把变量定义“外置化”或“运行时注入但不走内联路径”：
- 预定义
:root在外部 CSS 文件中，确保该文件满足style-src 'self'或对应 CDN 域名，然后<link rel="stylesheet" href="/theme.css"> - 用
CSSStyleSheet.insertRule()动态追加：获取已存在的<style>或新建document.styleSheets[0]，调用.insertRule(':root { --accent: gold }', 0)—— 这不触发 CSP 检查，因它不涉及字符串解析为样式块 - 服务端渲染时配合
nonce：HTTP 响应头设Content-Security-Policy: style-src 'nonce-abc123'，HTML 中写<style nonce="abc123">:root { --mode: dark }</style>；注意nonce必须每次请求唯一、不可预测，不能硬编码
容易被忽略的兼容性与副作用
CSS 变量生效依赖于作用域链和继承，而 CSP 干预的是注册时机——这两者叠加后，问题常藏得深：
立即学习“前端免费学习笔记（深入）”；
-
insertRule()在 Firefox 中对:root生效需确保目标 stylesheet 已插入 DOM，否则抛InvalidStateError - 使用
data:URL 内联 CSS（如<link href="data:text/css,...">）会被style-src 'self'拦截，除非显式加data:到策略中（不推荐，削弱安全性） - 变量值含 URL（如
--bg: url(./img.png)）时，url()内部资源受img-src约束，和style-src无关——这点常被误判为 CSP 配置错误
最麻烦的情况是：变量定义成功了，但组件库（如 Tailwind、Bootstrap）的 utility class 里大量用 var(--*)，而这些 class 又来自外部 CDN 的 CSS 文件——这时必须确保 style-src 同时覆盖该 CDN 域名，否则变量有、引用无，UI 仍错乱。
