nonce是csp中授权内联脚本执行的安全凭证，由服务端每次响应生成唯一base64字符串，同步注入响应头和script标签；不匹配或前端生成即失效。
什么是 nonce，它在 HTML 脚本中起什么作用
nonce 是 CSP（Content Security Policy）机制中用于白名单内联脚本或样式的关键字段。它不是“一次性的随机数”那种传统 nonce，而是由服务端生成、一次性使用的 Base64 编码字符串，用来告诉浏览器：“这段 <script></script> 是我授权运行的，别拦”。没有它，启用 script-src 'self' 'nonce-...' 后，所有内联脚本（包括 <script>console.log(1)</script> 或 Vue/React 的内联模板）都会被直接阻止。
怎么生成和注入 nonce 值才安全
关键点：不能硬编码，不能复用，不能泄露。必须每次 HTTP 响应都生成新值，并同步注入到响应头和 HTML 中。
- 服务端生成方式：用加密安全随机源（如 Node.js 的
crypto.randomBytes(16).toString('base64')，Python 的secrets.token_urlsafe(16)），避免用Math.random()或时间戳 - 必须同时设置两个地方：
Content-Security-Policy响应头里含script-src 'nonce-'，且 HTML 中对应<script nonce="<值>"></script> - 模板渲染时，
nonce值要作为变量传入，不能拼接进字符串（防 XSS 注入导致伪造 nonce） - 不要把
nonce放在 JS 变量里输出，也不要在前端通过document.currentScript.nonce读取后动态创建 script 标签——这会绕过 CSP 检查
常见错误：为什么加了 nonce 还被拦截
现象：控制台报错 Refused to execute inline script because it violates the following Content Security Policy directive，但 HTML 里明明写了 nonce。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 响应头里的
nonce值和 HTML 中的不一致（大小写、空格、换行、Base64 填充符差异） - 用了缓存：CDN 或代理缓存了带旧
nonce的 HTML，但响应头没缓存或用了新值 - 多个
<script></script>标签共用一个nonce—— 允许，但若其中某个脚本被第三方库动态插入（如 analytics SDK 插入的<script></script>），它没带nonce就会被拦 - Webpack/Vite 等构建工具生成的内联 runtime 脚本（如
<script>__webpack_require__...</script>）未自动注入nonce，需配置插件（如webpack-csp-html-plugin或 Vite 的htmlPlugin钩子）
要不要给 <style></style> 也加 nonce？
要，如果启用了 style-src 'nonce-...'。规则完全对称：每个内联 <style></style> 必须带匹配的 nonce 属性，否则被阻断。注意：
- Vue 单文件组件中的
<style scoped></style>在 SSR 或预渲染时可能生成内联 style，需确保构建流程注入nonce - CSS-in-JS 库（如 Emotion、Styled Components）默认插入
<style></style>标签，必须配置其 nonce 支持（如 Emotion 的nonce选项） - 不要为了省事把
style-src设成'unsafe-inline'—— 这会让整个nonce策略形同虚设
真正麻烦的从来不是加一行 nonce，而是让所有自动化流程（构建、模板、CDN、SSR）都严格同步这个值，且保证生命周期一致。漏掉任意一环，CSP 就会静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
