当前位置：首页 > news >正文

在 React / Vue 里安全插入动态脚本：一文读懂 nonce 的正确用法

news 2026/3/26 19:45:15

在前端项目里动态插入脚本非常常见：埋点 SDK、第三方分析脚本、A/B 实验、广告脚本……很多同学顺手就是一段document.createElement('script')然后appendChild，功能上没问题，但在安全视角下，这样做往往会被现代安全策略直接“打死”。

这篇文章想聊的就是：在开启 CSP（Content Security Policy，内容安全策略）时，如何在 React / Vue 这样的框架中，用nonce的方式安全、合规地“动态生成脚本”，既满足安全要求，又不牺牲业务灵活性。

一、为什么需要 nonce？先把 CSP 讲清楚

在没有 CSP 的年代，前端对 XSS 的防御基本靠“自觉”：

自己做输入输出转义
不乱用innerHTML
不随便执行字符串脚本等等

后来大家发现，仅靠“自觉”远远不够，于是有了 CSP——让浏览器帮你“管得更严”。

简单理解 CSP：

服务器通过响应头Content-Security-Policy告诉浏览器“哪些资源可以加载、哪些脚本可以执行”。
比如最典型的一条：

Content-Security-Policy: script-src 'self';

意思是：只允许加载来自同源的脚本，其他域名一律禁止。

为了防止 XSS，很多团队会直接禁掉所有“内联脚本”：

Content-Security-Policy: script-src 'self'; # 没有 'unsafe-inline'

这时候问题来了：

HTML 里<script>console.log(1)</script>会被拦截
JS 里用eval(...)、new Function(...)执行字符串，也会被拦截
甚至你在运行时动态创建<script>，如果 CSP 没配置好，也有可能被拦

这就对「动态生成脚本」提出了更高的要求——不能再随便写了。

nonce 的作用就是：在 CSP 很严格的情况下，给“特定脚本”一个一次性的通行证。

二、nonce 是什么？从浏览器视角看一眼

nonce 是 script 标签上的一个属性：

<scriptnonce="随机字符串">// 内联脚本内容</script>

配合 CSP 头使用：

Content-Security-Policy: script-src 'self' 'nonce-随机字符串';

浏览器会这样判断：

如果一个脚本标签带有nonce="随机字符串"，且 CSP 中允许'nonce-随机字符串'，就可以执行。
没有nonce的内联脚本，依旧被禁。
这个“随机字符串”应该是高熵、每次请求都不同（防重放）。

这带来两个非常重要的安全特性：

攻击者即使能插入一段<script>alert(1)</script>，也拿不到正确的 nonce，脚本不会执行。
后端每次响应生成不同 nonce，攻击者无法“复用”已知 nonce。

到这里，我们可以得出一个核心结论：

在 CSP 环境下，想动态生成脚本，就必须想办法给它加上正确的 nonce，让浏览器认出“这是自家人”。

三、在 React / Vue 中，nonce 一般从哪儿来？

由于 CSP 头是服务器下发的，而 nonce 又是 CSP 中的一部分，所以nonce 的生成通常在服务端完成，然后以某种方式“塞”到前端应用里。

常见的传递方式有几种（你可以视项目情况选一种或组合）：

写在服务器渲染的<script>标签上
```
<scriptid="app-entry"src="/static/app.js"nonce="abc123"></script>
```
前端可以通过 DOM 查到这个 nonce。

写在 meta / 自定义标签上

<metaname="csp-nonce"content="abc123"/>

或者：

<divid="csp-nonce-holder"data-nonce="abc123"></div>

写进首屏内联变量

<scriptnonce="abc123">window.__CSP_NONCE__='abc123';</script>

只要有一个地方能拿到这个 nonce，后续在 React / Vue 中，你就能用它给动态脚本“盖章”。

下面我们分框架看具体写法。

四、在 React 中使用 nonce 动态生成脚本

4.1 获取 nonce 的推荐方式

假设我们的index.html中这样写（以 CRA 或 Vite 模板为例）：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><metaname="csp-nonce"content="abc123"/><title>React App</title></head><body><divid="root"></div><scriptsrc="/src/main.tsx"nonce="abc123"></script></body></html>

然后在 React 应用里写一个小工具函数，统一读取 nonce：

// src/utils/csp.tsexportfunctiongetCspNonce():string|null{if(typeofdocument==='undefined')returnnull;constmeta=document.querySelector('meta[name="csp-nonce"]');returnmeta?.getAttribute('content')||null;}

这样就可以在任意 React 组件 / 业务模块里使用getCspNonce()了。

4.2 用原生 DOM 动态插入脚本并绑定 nonce

这是最通用、最不依赖框架的方式：

import{getCspNonce}from'./utils/csp';exportfunctionloadAnalytics(){constnonce=getCspNonce();constscript=document.createElement('script');script.src='https://example.com/analytics.js';script.async=true;if(nonce){script.nonce=nonce;// 核心：绑定同一个 nonce}document.head.appendChild(script);}

在 React 组件中调用它：

import { useEffect } from 'react'; import { loadAnalytics } from './analytics'; export function App() { useEffect(() => { loadAnalytics(); }, []); return <div>Hello React with CSP nonce</div>; }

要点：

尽量把“动态插入脚本”的逻辑从组件中抽出去，写在独立模块（如analytics.ts）里，方便复用和测试。
记得在useEffect中调用，而不是在组件 render 函数体里直接操作 DOM。

4.3 用 React JSX 直接生成`<script>`（较少用，但可以）

React DOM 对nonce是支持的，你可以在 JSX 里直接这么写：

const nonce = getCspNonce(); return ( <> <div>Some content</div> {nonce && ( <script nonce={nonce} dangerouslySetInnerHTML={{ __html: ` window.__APP_CONFIG__ = { env: 'prod' }; `, }} /> )} </> );

但有几点需要明确：

使用dangerouslySetInnerHTML本身就有安全风险；如果可以，尽量避免拼接用户可控内容。
对于加载外部脚本，更推荐前面那种document.createElement('script')方式。

五、在 Vue 中使用 nonce 动态生成脚本

Vue 的思路与 React 完全一致：先拿到 nonce，再通过原生 DOM 动态插入脚本。

5.1 在 Vue 里读取 nonce

假设你同样在 HTML 模板里配置了 meta：

<metaname="csp-nonce"content="abc123"/>

可以在一个工具文件中封装：

// src/utils/csp.tsexportfunctiongetCspNonce():string|null{if(typeofdocument==='undefined')returnnull;constmeta=document.querySelector('meta[name="csp-nonce"]');returnmeta?.getAttribute('content')||null;}

5.2 在 Vue 组件中动态插入脚本

以 Vue 3 +<script setup>为例：

<script setup lang="ts"> import { onMounted } from 'vue'; import { getCspNonce } from '@/utils/csp'; function loadAnalytics() { const nonce = getCspNonce(); const script = document.createElement('script'); script.src = 'https://example.com/analytics.js'; script.async = true; if (nonce) { script.nonce = nonce; } document.head.appendChild(script); } onMounted(() => { loadAnalytics(); }); </script> <template> <div>Vue app with CSP nonce</div> </template>

如果你是 Options API：

import{getCspNonce}from'@/utils/csp';exportdefault{name:'App',mounted(){constnonce=getCspNonce();constscript=document.createElement('script');script.src='https://example.com/analytics.js';script.async=true;if(nonce){script.nonce=nonce;}document.head.appendChild(script);},};

5.3 用指令封装（可选的语法糖）

如果你项目里动态脚本很多，可以做一个指令，直接在模板上用：

// src/directives/script.tsimporttype{DirectiveBinding}from'vue';import{getCspNonce}from'@/utils/csp';interfaceScriptOptions{src:string;async?:boolean;defer?:boolean;}exportconstvScript:DirectiveBinding<ScriptOptions>['mounted']=(el,binding)=>{const{src,async=true,defer=false}=binding.value||{};if(!src)return;constnonce=getCspNonce();constscript=document.createElement('script');script.src=src;script.async=async;script.defer=defer;if(nonce){script.nonce=nonce;}document.head.appendChild(script);};

注册到应用上后：

<template> <div v-script="{ src: 'https://example.com/analytics.js' }"> Vue app </div> </template>

这只是语法糖，本质还是动态插入脚本 + 赋值 nonce。

六、和 CSP 配置配合：别忘了服务端那一半

前端把 nonce 做对了，只是完成了一半；服务端的 CSP 头必须正确配置，两边的 nonce 才能对得上。

一个常见的配置方式（以 Node / Express 为例）：

app.use((req,res,next)=>{// 1. 生成高熵 nonce，一般使用 crypto 随机constnonce=crypto.randomBytes(16).toString('base64');// 2. 挂在 res.locals 上，供模板引擎 / SSR 使用res.locals.cspNonce=nonce;// 3. 设置 CSP 头，允许这个 nonce 的脚本执行res.setHeader('Content-Security-Policy',["default-src 'self'",`script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https://example.com`,].join('; '));next();});

在 HTML 模板里输出：

<metaname="csp-nonce"content="{{cspNonce}}"/><scriptsrc="/static/app.js"nonce="{{cspNonce}}"></script>

几个实践要点：

nonce 必须每个响应唯一（至少是每个页面请求唯一）。
CSP 中对应的是'nonce-<值>'，注意前缀'nonce-'是标准格式的一部分。
如果你用了'strict-dynamic'，就算 script 标签是通过可信脚本动态插入的，只要带上 nonce，子脚本也能被信任。

七、常见坑与注意事项

7.1 忘记给动态脚本加 nonce

现象：

本地开发一切 OK，线上开启 CSP 后动态脚本全挂。
控制台出现类似错误：
Refused to load the script because it violates the following Content Security Policy directive: “script-src ‘self’ ‘nonce-***’ …”.

排查步骤：

看 Network / Headers 里 CSP 的具体配置。
看生成的 script 标签上是否真的有 nonce。
确认 nonce 值和 CSP 中'nonce-xxx'的内容一致。

7.2 不要把 nonce 当作“固定秘钥”

错误示例：

// 千万别这样constnonce='my-secret-nonce';

nonce 不是 API Key，它不需要“记住”。
nonce 应该是短期的一次性令牌，每次响应随机生成，而且不依赖“保密性”来保证安全，而是依赖“不可预测性”和“短生命周期”。

7.3 SSR / 同构应用要考虑“首屏 + 运行时”一致

如果你在使用 Next.js / Nuxt 等 SSR 框架，情况会稍微复杂一点：

首屏 HTML（SSR 输出）要带上正确的 nonce。
前端打包好的 JS 在“水合”后继续运行时，如果还会动态插入脚本，也要用同一个 nonce。
通常做法是：在 SSR 时把 nonce 放到某个全局变量（例如window.__CSP_NONCE__或 meta），前端 hydrate 后从那里读取。

不要在客户端自己“再随机一个 nonce”——那样浏览器会认为是另外一个“人”，CSP 头并不认识。