可行，但需服务端每次响应生成唯一高熵nonce值，并在HTTP响应头Content-Security-Policy和HTML的<script nonce="">中字符级完全一致；任一环节缺失或不匹配（如大小写错误、模板截断、meta设置、构建脚本遗漏）均导致浏览器静默拦截。
直接用 <script nonce="..."> 防脚本注入是可行的，但前提是服务端每次响应都生成唯一高熵值，并且这个值必须在 HTTP 响应头和 HTML 标签中**字符级完全一致**；漏掉任一环节，浏览器就静默拦截，连错误提示都不给。
为什么加了 nonce 还被 Refused to execute inline script？
这不是标签写错了，而是两端没对齐。常见失效点：
-
Content-Security-Policy响应头里漏了script-src 'nonce-xxx'，或者写成'nonce-XXX'（大小写敏感） - 模板引擎插值失败：比如 Jinja2 中
{{ nonce|safe }}的值含换行或双引号，导致<script nonce="...>提前闭合 - 用
<meta http-equiv="Content-Security-Policy">设置策略——该方式**完全不支持nonce**，必须走 HTTP 响应头 - Webpack/Vite 自动注入的 runtime 脚本（如 HMR、chunk 加载逻辑）没带
nonce，被script-src拦掉
服务端怎么安全生成和同步 nonce？
不能前端拼、不能硬编码、不能复用。正确路径是：
- 每次 HTTP 响应前调用密码学安全随机源：Node.js 用
crypto.randomBytes(16).toString('base64').replace(/[+/=]/g, '')；PHP 用bin2hex(random_bytes(16)) - 把生成的值同时写入两处：
– 响应头：Content-Security-Policy: script-src 'self' 'nonce-27f434278e6b79578d5c9f0a321c4567'
– HTML 中对应<script>标签：<script nonce="27f434278e6b79578d5c9f0a321c4567">...</script> - 若页面有多个内联
<script>，全部都要加相同nonce；但不同请求必须用新值
框架里怎么确保所有内联脚本都带上 nonce？
现代构建工具和 SSR 框架默认不处理 nonce 注入，容易漏掉关键脚本：
立即学习“前端免费学习笔记（深入）”；
- Webpack 用户需在入口 JS 执行前设全局变量：
__webpack_nonce__ = nonce - Vite 用户要在
vite.config.ts中配置build.rollupOptions.output.manualChunks，并确保内联 runtime 脚本通过模板注入nonce - React Server Components 或 Vue SSR 渲染时，必须把
nonce作为上下文变量传入，并在生成的<script>标签中显式写出属性——不能靠 hydration 后 JS 补，浏览器解析 HTML 阶段就已完成校验 - 框架初始化脚本（如
window.__INITIAL_STATE__）也必须带nonce，否则首屏白屏
最常被忽略的是：nonce 必须每次请求唯一，且不能缓存。CDN、反向代理、SSR 静态化如果缓存了带固定 nonce 的 HTML，等于把“一次性令牌”变成“长期口令”，整个机制就废了。
