根本原因是服务端响应头与html标签中的nonce值未逐字节一致：大小写、空格、转义字符或生成方式差异（如base64含特殊符号）均导致匹配失败，且meta标签不支持nonce，必须通过http响应头设置。
为什么加了 nonce 还被浏览器拒绝执行内联脚本
根本原因不是标签写错了，而是服务端响应头和 HTML 标签里的 nonce 值没对齐。浏览器只认“两端严丝合缝”：HTTP 响应头中 Content-Security-Policy: script-src 'nonce-abc123' 的字符串，必须和 <script nonce="abc123"></script> 的值**逐字节一致**——大小写、空格、换行、末尾多一个字符，全算不匹配。
常见断裂点包括：
- 服务端用
crypto.randomBytes(16).toString('base64')生成值，但模板引擎（如 Jinja2、EJS）未做 HTML 安全转义，导致值里含"或>，提前闭合标签 - 响应头写成
script-src 'nonce-ABC123'（大写），而 HTML 里是nonce="abc123"（小写）——大小写敏感，直接失效 - 用
<meta http-equiv="Content-Security-Policy">设置策略——该方式**完全不支持nonce**，必须走 HTTP 响应头 - Webpack/Vite 构建注入的 runtime 脚本（如 HMR、
__webpack_require__启动逻辑）没带nonce，也被拦掉
如何安全生成并同步注入 nonce 值
nonce 必须由服务端每次 HTTP 响应动态生成，不能硬编码、不能复用、不能前端参与。它本质是一次性高熵令牌，目的是防重放。
推荐做法：
- 生成：Node.js 中用
crypto.randomBytes(32).toString('hex')（32 字节十六进制，比 base64 更少转义风险）；PHP 用bin2hex(random_bytes(32))；Python 用secrets.token_hex(32) - 注入响应头：确保整条
Content-Security-Policy指令用双引号包裹，内部源用单引号，指令间用分号+空格分隔，例如：default-src 'none'; script-src 'self' 'nonce-27f434278e6b79578d5c9f0a321c4567'; style-src 'self' 'unsafe-inline' - 注入 HTML：在渲染模板前，把生成的
nonce值传入上下文，并显式写入所有需放行的<script></script>和<style></style>标签，例如：<script nonce="27f434278e6b79578d5c9f0a321c4567">...</script> - SSR 框架注意：React Server Components 或 Vue SSR 中，需确保 hydration 不覆盖服务端已注入的
nonce属性；window.__INITIAL_STATE__等框架注入的内联脚本也必须带nonce
strict-dynamic 和 nonce 必须共存才能支持动态脚本
只配 script-src 'nonce-xxx'，页面里用 document.createElement('script') 动态加载 JS，照样被拦。因为 nonce 只授权“初始内联脚本”，不授权后续 JS 创建的脚本。
正确写法是两者同时启用：
- 响应头必须包含：
script-src 'nonce-27f434278e6b79578d5c9f0a321c4567' 'strict-dynamic' - 首个执行的
<script nonce="..."></script>必须存在且含实际初始化逻辑（不能是空标签） - 后续动态创建的脚本，必须显式设置
script.nonce = '27f434278e6b79578d5c9f0a321c4567'，值与初始nonce完全一致 - 注意：
'strict-dynamic'不影响onclick等内联事件处理器——这类仍需改用addEventListener，否则照样被拒
构建工具中 nonce 注入容易漏掉 runtime 脚本
你手动加了 <script nonce="xxx"></script>，但页面仍报错？大概率是构建工具注入的 runtime 脚本没带 nonce。这些脚本本质也是内联脚本，CSP 一视同仁。
解决方法：
- Vite：启用
html.cspNonce配置，它会自动为所有<script></script>和<style></style>标签添加nonce属性，包括构建时注入的 runtime - Webpack：需配合插件（如
csp-html-webpack-plugin）或自定义 template，在生成 HTML 时把服务端传入的nonce注入到所有相关标签中 - 切勿在构建时硬编码
nonce值——它必须随每次 HTTP 响应动态生成，否则失去“一次性”语义
真正难的不是加属性，而是让服务端、模板、构建产物、响应头四者始终同步；任何一环脱节，nonce 就等于没设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
