nonce属性本身不授权脚本，仅当服务端返回含'script-src 'nonce-xxx''的csp响应头且html中nonce值字节级匹配时才生效；否则报错“refused to execute inline script”实为csp未生效或三者未对齐。
nonce 属性本身不授权任何脚本，它只在服务端正确下发 Content-Security-Policy 响应头且策略中明确包含 'nonce-xxx' 时才起作用；没这行头，nonce 就是摆设。
为什么加了 nonce 还报 “Refused to execute inline script”
这不是 nonce 写错了，而是 CSP 策略根本没生效或没对齐。常见真实原因：
- 服务端压根没返回
Content-Security-Policy响应头（比如开发环境关了 CSP，或 CDN 缓存了旧响应） - 响应头里写的是
script-src 'self' 'nonce-abc123'，但 HTML 里写成nonce="ABC123"（大小写不一致）或nonce="abc123 "（末尾空格） - 用了
<meta http-equiv="Content-Security-Policy">设置策略——nonce在<meta>中完全无效，浏览器直接忽略 - 模板引擎插值失败，比如 Jinja2 里忘了转义，导致生成的 HTML 中
nonce值被截断或变成空字符串
nonce 值必须由服务端生成，不能用 JS 动态设置
浏览器在 HTML 解析阶段就完成 nonce 校验，JS 执行时早已尘埃落定。以下写法毫无意义：
<script id="boot">
document.getElementById('boot').setAttribute('nonce', 'abc123');
console.log('done');
</script>
正确做法只能是服务端渲染时注入：
<script nonce="<%= generateNonce() %>">
window.__CONFIG__ = { api: '/v1' };
</script>
-
generateNonce()必须调用密码学安全随机函数（如 Node.js 的crypto.randomBytes(16).toString('base64')） - 值不能硬编码、不能复用、不能含空格/换行/中文/下划线等非法字符
- 每次 HTTP 响应都应生成新值，哪怕页面内容完全一样
哪些内联代码能用 nonce 放行，哪些不能
nonce 只对 <script></script> 标签内的脚本块或带 src 的外链脚本有效，对以下情况完全无效：
-
<button onclick="doIt()"></button>这类内联事件处理器——CSP 会直接拦截，报错信息明确写 “inline event handler” -
eval()、setTimeout("alert(1)")、Function("return 1")等动态代码执行 - 通过
innerHTML注入的脚本字符串（即使带nonce属性）
想让内联事件工作，只能重构为 addEventListener，或改用 script-src-elem 'unsafe-hashes' 配合哈希白名单（不推荐）。
真正难盯的从来不是怎么写 nonce，而是确保三件事每毫秒都对得上：服务端是否稳定返回响应头、头里是否真含那个 'nonce-xxx'、HTML 中每个 nonce 属性值是否和头里那个字节级一致——漏掉任一环，脚本就静默失效，连错误提示都不给。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
