可行但需服务端动态生成nonce且响应头与html标签值字符级完全一致，任何转义、缓存、大小写差异或meta设置csp均导致静默失效。
直接用 nonce 属性防 XSS 是可行的，但必须服务端每次响应动态生成、两端（响应头 + HTML 标签）字符级完全一致，缺一不可；任何硬编码、复用、大小写不一致、模板插值失败或用 <meta> 设置 CSP，都会让整个机制静默失效。
为什么加了 nonce 还报 “Refused to execute inline script”
这不是脚本写错了，而是浏览器在做严格校验时发现两端对不上。常见断裂点：
- 服务端响应头漏了
script-src 'nonce-abc123'，或写成script-src 'nonce-ABC123'（大小写敏感） - HTML 中的
nonce值被模板引擎转义或截断：Jinja2 里用了{{ nonce }}没加|safe，EJS 里被 HTML 编码成"，导致标签提前闭合 - 用了
<meta http-equiv="Content-Security-Policy">—— 该方式完全不支持nonce，必须走 HTTP 响应头 - Webpack/Vite 的 runtime 脚本（如 HMR 初始化、
__webpack_require__启动逻辑）自动注入但没带nonce，被script-src拦掉
nonce 必须由服务端动态生成，且不能前端参与
浏览器只信任本次 HTTP 响应中由服务端注入的加密安全随机值。客户端生成的任何值（Math.random()、Date.now()、crypto.randomUUID() 在浏览器端调用）都无效。
- 推荐生成方式：Node.js 用
crypto.randomBytes(32).toString('base64url')；PHP 用random_bytes(32)；Python 用secrets.token_urlsafe(32) - 必须清洗 Base64 字符：若用
toString('base64')，需替换+、/、=，否则响应头解析失败 - 不能缓存或复用：CDN 缓存了带固定
nonce的 HTML，等于关闭 CSP；SSG 静态页混 SSR 时，也必须为每次请求生成新值 - 排查方法：用
curl -I看响应头中的Content-Security-Policy，再查页面「源代码」（不是 Elements 面板）中<script nonce="的值，逐字比对
如何让 strict-dynamic 和 nonce 真正协同工作
只配 script-src 'nonce-xxx' 只能放行初始内联脚本；后续用 document.createElement('script') 或 eval 创建的脚本仍会被拦截。要支持现代前端的动态加载，必须共存且满足强约束：
- 响应头必须同时包含两者：
script-src 'nonce-xxx' 'strict-dynamic'；'self'和'strict-dynamic'不能共存，否则后者被忽略 - 首个执行的
<script nonce=" xxx></script>必须存在、非空、含初始化逻辑（不能是空标签或仅注释） - 后续动态创建的
<script></script>必须显式设置script.nonce = 'xxx'，值与初始nonce完全一致 - 框架内联脚本（如 React hydration、Vue
window.__INITIAL_STATE__注入）也必须带nonce，否则 hydration 失败
Vite/React/Next.js 等框架中容易被忽略的注入点
框架默认不处理 nonce，手动加在业务 <script></script> 上只是第一步。真正常被漏掉的是构建工具和框架自身注入的脚本：
- Vite：启用
html.cspNonce配置，它会自动为所有<script></script>和<style></style>标签添加nonce，包括 runtime 和 HMR 脚本 - Webpack：需配合
csp-html-webpack-plugin，或自定义 HTML template，在生成阶段把服务端传入的nonce注入到所有相关标签 - Next.js：若用
getServerSideProps，必须在getServerSideProps中生成nonce并透出到props，再在<script nonce="{props.nonce}"></script>中使用；禁用getStaticProps + revalidate混用时的 nonce 复用 - SvelteKit：在
+page.server.ts中生成nonce，通过stuff注入，模板中写<script nonce="{data.nonce}"></script>
最复杂的点不在生成逻辑，而在于“一致性”——服务端生成的字符串，必须原样出现在响应头里、HTML 源码里、所有动态插入脚本的 .nonce 属性里，中间任何一环被转义、截断、缓存或大小写改动，整个防护就归零。这不是配置问题，是数据流完整性问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
