nonce值必须与服务端响应头content-security-policy中'nonce-xxx'的字符串逐字节一致，大小写、空格、转义等任一差异均导致内联脚本被拦截；且必须由服务端动态生成并全程可控，不可前端参与。
nonce属性必须和服务端响应头完全一致
浏览器只认“两端严丝合缝”的 nonce：HTML 中 <script nonce="abc123"></script> 的值，必须和响应头 Content-Security-Policy: script-src 'nonce-abc123' 里的字符串**逐字节相同**。大小写、空格、换行、末尾多余字符——任何一处不一致，脚本立刻被拦截，控制台报 Refused to execute inline script。
常见断裂点：
- 服务端用
crypto.randomBytes(16).toString('base64')生成值，但模板引擎（如 Jinja2）未做 HTML 安全转义，导致值里含"或>，提前闭合标签 - 响应头写成
script-src 'nonce-ABC123'（大写），而 HTML 里是nonce="abc123"（小写）——大小写敏感，不匹配 - 用
<meta http-equiv="Content-Security-Policy">设置策略——该方式**完全不支持 nonce**，必须走 HTTP 响应头
Vite/webpack 构建产物的 nonce 注入要覆盖 runtime 脚本
你手动加了 <script nonce="xxx"></script>，但页面仍报错？大概率是构建工具注入的 runtime 脚本（比如 Webpack 的 __webpack_require__ 启动逻辑、Vite 的 HMR 代码）没带 nonce。这些脚本本质也是内联脚本，CSP 一视同仁。
解决方法：
- Vite：启用
html.cspNonce配置，它会自动为所有<script></script>和<style></style>标签添加 nonce 属性，包括构建时注入的 runtime - Webpack：需配合插件（如
csp-html-webpack-plugin）或自定义 template，在生成 HTML 时把服务端传入的 nonce 注入到所有相关标签中 - 切勿在构建时硬编码 nonce 值——它必须随每次 HTTP 响应动态生成，否则失去“一次性”语义
strict-dynamic 和 nonce 必须共存才能支持动态脚本
只配 script-src 'nonce-xxx'，页面里用 document.createElement('script') 动态加载 JS，照样被拦。因为 nonce 只授权“初始内联脚本”，不授权后续 JS 创建的脚本。
正确做法是两者同时启用：
- 响应头写：
Content-Security-Policy: script-src 'nonce-xxx' 'strict-dynamic' - 首个执行的
<script nonce="xxx"></script>必须存在且包含实际初始化逻辑（不能是空标签） - 后续动态创建的脚本，必须显式设置
script.nonce = 'xxx'，值与初始 nonce 完全一致 - 注意：
'strict-dynamic'不影响onclick等内联事件处理器——这类仍需改用addEventListener，否则照样被拒
SSR 框架中 nonce 容易在 hydration 阶段丢失
React/Vue SSR 渲染时，服务端已注入 <script nonce="xxx"></script>，但客户端 hydration 后，如果用了 dangerouslySetInnerHTML 或 v-html 插入新脚本，那些脚本不会自动继承 nonce——它们是全新 DOM 节点，浏览器按 CSP 规则重新校验。
安全做法：
- React：把 nonce 作为 context 或 props 透传到组件，在需要插入内联脚本的地方显式写出
<script nonce="{nonce}"></script> - Vue：SSR 时通过
renderToString(app, { nonce })注入，模板中用{{ nonce }}插值，确认模板引擎不转义引号或等号 - 始终检查最终返回的 HTML 源码（不是 Elements 面板），确认你要执行的那段脚本确实带有正确 nonce 属性
最常被忽略的一点：nonce 不是前端能碰的东西。从生成、分发到注入，整个链路必须由服务端可控；任何前端拼接、URL 参数传递、localStorage 存取，都会让机制失效。它本质上是一次性密钥，不是配置项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
