CSP nonce 是为每次HTTP响应生成的唯一随机值，用于安全允许特定内联脚本执行，解决XSS防护下必需内联脚本的授权问题。
什么是 CSP nonce 以及它解决什么问题
CSP（Content Security Policy）默认禁止内联脚本（<script>alert(1)</script>）执行，这是为了防御 XSS。但有些场景必须用内联脚本，比如服务端直出的初始化数据、框架模板渲染逻辑。这时 nonce 是最安全的绕过方式——它不是白名单域名，也不是关闭检查，而是为**每一次 HTTP 响应**生成一个唯一、不可预测的随机值，只对该次响应中的特定 <script nonce="..."> 生效。
如何在服务端生成并注入有效的 nonce 值
关键不是“生成字符串”，而是确保：该值只用一次、不被缓存、不泄露、且与响应头中的 Content-Security-Policy 严格一致。
- 用加密安全的随机源生成（如 Node.js 的
crypto.randomBytes(16).toString('base64')，Python 的secrets.token_urlsafe(16)），**不能用Math.random()或时间戳** - 把生成的 nonce 存在当前请求上下文（如 Express 的
res.locals.nonce），**不要存在全局变量或模块级常量里**，否则多个并发响应会复用同一个 nonce - 在响应头中设置：
Content-Security-Policy: script-src 'nonce-<strong>abc123</strong>'（注意单引号包裹、无空格） - 在 HTML 模板中，把同一值写入 script 标签：
<script nonce="abc123">console.log('ok');</script>
常见错误：为什么浏览器仍报 “unsafe inline” 错误
报错本质是 nonce 值不匹配或策略未生效，不是语法写错了。
-
Content-Security-Policy响应头缺失、拼写错误（比如写成Content-Secuirty-Policy），或被后续中间件覆盖 - nonce 字符串两端有空格或换行（如模板引擎自动加了换行），导致
nonce=" abc123 "和响应头里的'nonce-abc123'不等价 - 用了
script-src 'self'等其他策略，但没显式包含'nonce-xxx'—— CSP 是白名单机制，**不写就不认** - 前端构建工具（如 Webpack/Vite）自动注入的 runtime script 没带 nonce，需额外配置
__webpack_nonce__或使用插件（如vite-plugin-csp）
Vue/React SSR 场景下怎么让框架生成的内联脚本也带 nonce
框架默认不关心 CSP，必须手动桥接服务端生成的 nonce 到其渲染流程。
立即学习“前端免费学习笔记（深入）”；
- Vue SSR：在
createSSRApp后、renderToString前，把 nonce 注入到应用上下文，再通过useSSRContext传给模板；script 标签需手写（非v-html），并显式加nonce="{{ nonce }}" - React SSR：用
ReactDOMServer.renderToString渲染后，**不能直接拼接 script 标签**；需在组件中用useEffect或useLayoutEffect延迟执行逻辑，或把初始化数据塞进<script type="application/json" id="__INIT_DATA__">（这个不需要 nonce，属于script-src 'unsafe-inline'的例外） - 所有框架生成的
<script>都得走同一套 nonce 注入逻辑——没有“自动支持”，只有“你控制模板输出时手动加”
