服务端每次响应必须生成新nonce，核心逻辑是“一次性”：复用或硬编码nonce会使csp失效，攻击者可复用已知值注入脚本；正确做法是使用crypto.randombytes(32).tostring('hex')生成密码学安全的十六进制nonce，并确保响应头与html标签中nonce值字符级完全一致。
服务端每次响应必须生成新 nonce，不能复用或硬编码
nonce 的核心安全逻辑是“一次性”：同一值在多个请求中重复使用，等于把 CSP 通行证发给攻击者。浏览器不报错，但攻击者可复用已知值注入脚本。
常见错误包括：
- 用
Math.random()或new Date().getTime()生成——熵太低，可预测，CSP 直接忽略 - 在模板里写死
nonce="abc123"——所有用户共享同一值，完全失效 - Node.js 中用
crypto.randomBytes(16).toString('base64')但没过滤+、/、=——导致 HTML 属性值被截断或解析失败
正确做法：调用密码学安全随机源，输出十六进制（推荐 32 字节以上），例如：27f434278e6b79578d5c9f0a321c4567。Node.js 示例：
const crypto = require('crypto');
const nonce = crypto.randomBytes(32).toString('hex');
响应头与 <script></script> 标签的 nonce 值必须字符级完全一致
浏览器校验极严：大小写、空格、引号、HTML 转义，任何差异都会静默拦截脚本，且控制台不提示 mismatch，只报 Refused to execute inline script。
典型不一致场景：
- 响应头写
Content-Security-Policy: script-src 'nonce-abc123 '（末尾空格），而 HTML 中是nonce="abc123" - 模板插值时未做 HTML 安全转义，nonce 含
&或"导致属性提前闭合 - 把 CSP 写进
<meta http-equiv="Content-Security-Policy">——该方式不支持 nonce，只响应头有效
验证方法：用 curl -I 查响应头，再右键“查看页面源代码”搜索 <script nonce="</code">，手动比对两处字符串是否逐字相同（推荐复制粘贴到编辑器用 diff 工具）。</script>
SSR 框架中内联 runtime 脚本也必须带 nonce
Webpack/Vite/React Server Components 等 SSR 场景下，框架自动生成的初始化脚本（如 __webpack_require__、HMR 逻辑、hydration 入口）默认不携带 nonce。哪怕你手写的 <script></script> 加了，这些脚本仍被拦，结果白屏或功能异常。
各方案关键操作：
- Webpack：在入口 JS 执行前设全局变量
__webpack_nonce__ = res.locals.nonce - Vite：启用
build.rollupOptions.output.manualChunks，并通过 HTML 模板显式注入，不能依赖构建时静态值 - React SSR：将 nonce 作为 context 或 props 传入根组件，渲染时写成
<script nonce="{nonce}">...</script>；dangerouslySetInnerHTML插入的脚本需手动传入，不会自动继承 - Vue SSR：调用
renderToString(app, { nonce })，模板中用{{ nonce }}插值，注意确认模板引擎不转义引号
strict-dynamic 是动态创建脚本的必要开关
仅靠 nonce 只能放行 HTML 中已存在的内联 <script></script>。后续 JS 用 document.createElement('script')、fetch().then(eval) 创建的脚本，默认仍被 CSP 拦截。
要让它合法执行，必须在响应头中启用 'strict-dynamic'，且写法有强约束：
- 必须和
'nonce-xxx'同时出现在script-src中，顺序无关 - 首个执行的脚本（通常是首屏初始化脚本）必须带该 nonce，否则浏览器拒绝所有后续动态脚本
- 禁用
'self'与'strict-dynamic'共存：写成script-src 'self' 'strict-dynamic'会导致'self'优先匹配，'strict-dynamic'失效
正确响应头示例：
Content-Security-Policy: script-src 'nonce-27f434278e6b79578d5c9f0a321c4567' 'strict-dynamic'
这个组合才是动态环境下的完整闭环：服务端生成 → 响应头发令牌 → HTML 标签持令牌 → 首个脚本激活 strict-dynamic → 后续动态脚本自动获准。漏掉任一环，链路就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
