内联CSS被CSP拦截时，style-src必须用nonce而非unsafe-inline；需服务端每次生成密码学安全的唯一nonce，同步注入HTTP头（如'style-src 'self' 'nonce-xxx''）和HTML中window.__nonce__，且Goober等库须在该变量定义后加载。
内联CSS被CSP拦截时，style-src必须用nonce而非unsafe-inline
浏览器默认禁止内联样式（如<style>body{color:red}</style>），除非style-src显式允许。加'unsafe-inline'等于直接放弃防护——它会让所有内联样式无条件执行，包括攻击者注入的恶意<style></style>块。正确做法是启用nonce机制，只放行服务端明确授权的那几处内联样式。
window.__nonce__必须在Goober加载前定义，且值要与CSP头严格一致
Goober这类CSS-in-JS库会自动读取window.__nonce__并赋给生成的<style></style>标签。但这个变量必须在Goober脚本执行前就存在，否则el.nonce = window.__nonce__会设成undefined，导致样式被拦。
- HTML中必须在
<script></script>引入Goober之前声明：<script>window.__nonce__ = 'EaBcDfGhIjKlMnOpQrStUvWxYz';</script> - 服务端生成的nonce值必须同时用于两处：
Content-Security-Policy: style-src 'self' 'nonce-EaBcDfGhIjKlMnOpQrStUvWxYz'和 HTML 中的window.__nonce__ - 不能用
Math.random()或时间戳生成nonce——必须用密码学安全的随机源，比如Node.js的crypto.randomBytes(16).toString('base64')
多个<style></style>标签共用同一个nonce值，但每次HTTP响应必须换新值
一个页面里可能有多个内联样式来源：Goober注入的、框架初始化时写的、甚至手写的<style></style>块。它们只要都属于可信上下文，就可以共享同一个nonce值——前提是这个值只在本次响应中使用。
- CDN或反向代理缓存了带固定nonce的HTML？立刻失效。浏览器发现nonce重复出现，会拒绝执行
- 后端模板渲染时，不能把nonce存在全局变量或单例里复用；每个
res.render()或http.ResponseWriter调用都应生成新nonce - 如果用了SSR框架（如Next.js/Nuxt），需确保服务端上下文中的nonce透传到客户端，并在hydration阶段保持一致
检查style-src指令是否遗漏'self'或拼写错误
即使nonce值完全匹配，style-src指令本身写错也会导致拦截。常见疏漏：
立即学习“前端免费学习笔记（深入）”；
- 漏掉
'self'：如果页面还加载了同源CSS文件（如<link rel="stylesheet" href="/main.css">），没写'self'会导致这些外部样式也被拦 - 引号格式错误：必须用单引号包裹
nonce-xxx，写成"nonce-xxx"（双引号）或nonce-xxx（无引号）都会让整个style-src失效 - 大小写敏感：
nonce全小写，Nonce或NONCE无效；Base64值里含非法字符（如换行、空格）也会使匹配失败
真正容易被忽略的是nonce生命周期管理——它不是“配一次就完事”，而是每个请求都要新鲜生成、同步注入、严格隔离。一旦复用或缓存，CSP就从防护变成摆设。
