style-src中加'nonce-xxx'不生效的根本原因是HTML中标签未带nonce属性或值不匹配；浏览器仅放行同时满足响应头style-src 'nonce-abc123'和对应的内联样式，缺一不可。
style-src 里加 'nonce-xxx' 为什么还不生效
根本原因不是 nonce 写错了，而是 HTML 中的 标签没带 nonce 属性，或者值不匹配。浏览器只放行**同时满足两个条件**的样式：HTTP 响应头（或 ）中 style-src 'nonce-abc123'，且对应 标签。漏掉任一环节，控制台就会报 Refused to apply inline style。
服务端生成 nonce 的三个硬性要求
nonce 不是随便拼个字符串就行，它必须：
- 每次 HTTP 响应唯一（不能缓存、不能复用）
- 不可预测（推荐用 CSP-safe 随机数生成器，如 Node.js 的
crypto.randomBytes(16).toString('base64')） - 不能硬编码在前端 JS 或 HTML 模板里（否则攻击者可提前获知）
常见翻车点：window.__nonce__ = 'static-string' —— 这等于把钥匙焊死在门上。
Goober 等 CSS-in-JS 库如何自动注入 nonce
像 Goober 这类库依赖全局变量 window.__nonce__ 来自动设置 标签的 nonce 属性。但前提是：
-
window.__nonce__必须在 Goober 初始化前就定义好（通常放在<script></script>标签里，且在引入 Goober 之前） - 服务端渲染时，
window.__nonce__的值必须和响应头中的Content-Security-Policy: style-src 'nonce-xxx'完全一致 - 注意：Goober 不会读取
中的 CSP，只认window.__nonce__
手动插入
如果你自己动态创建 ，别用 innerHTML 或 document.write() —— 它们绕不过 CSP。正确做法是：
- 用
document.createElement('style') - 显式赋值
el.nonce = window.__nonce__（值必须来自服务端注入，非客户端生成） - 再
document.head.appendChild(el)
示例：
const style = document.createElement('style');
style.nonce = window.__nonce__;
style.textContent = '.btn { color: red }';
document.head.appendChild(style);
关键点：style.textContent 是安全的，但 style.innerHTML 会被拦截；nonce 属性必须在 append 前设置，晚了无效。
真正容易被忽略的是：nonce 值的生命周期管理——它必须随每次页面请求刷新，且不能出现在任何可被 XSS 利用的上下文中（比如 JSON API 返回体、URL 参数、localStorage）。一旦泄露，整个 style-src 防护形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
