Vite 中如何为 CSP 的 script-src 动态注入 nonce 值？

Question

在 Vite 项目中，如何为 Content Security Policy（CSP）的 `script-src` 指令动态注入唯一、每次请求都变化的 `nonce` 值？由于 Vite 默认以静态方式构建 HTML（如通过 `index.html` 模板），其内置开发服务器（`vite dev`）和生产构建（`vite build`）均不原生支持服务端渲染（SSR）或按请求生成 nonce 的能力；而 CSP 要求 `nonce-` 必须由后端在响应时动态生成并同步注入 `<script></script>

Answer 1

```html

一、CSP nonce 的本质与 Vite 的静态瓶颈

CSP 的 script-src 'nonce-abc123' 要求：nonce 值必须具备唯一性、一次性、服务端动态生成、响应级绑定三大属性。Vite 的 index.html 是构建时静态模板（开发期由 vite dev 内存中 serve，生产期输出为固定文件），其 HTML 插值（如 <script nonce="%nonce%">）无法在每次 HTTP 响应时重计算——这与 CSP 安全模型根本冲突。

二、常见误方案剖析：为什么“前端生成”或“构建时硬编码”不可行

• ❌ 前端 Math.random() 生成 nonce：违反 CSP 规范，浏览器拒绝执行（nonce 必须由服务端可信上下文注入）；
• ❌ 构建时用环境变量写死：所有用户共享同一 nonce，等同于禁用 nonce 保护；
• ❌ Vite 插件修改 index.html 字符串（如 transformIndexHtml）：仅在启动/热更时触发一次，无法响应每个请求；
• ✅ 正确路径：将 HTML 渲染权交还服务端，Vite 仅负责构建资源。

三、架构级解法：分离关注点——Vite 构建 + 真实后端注入

核心原则：Vite 专注打包 assets（JS/CSS），HTML 生成完全由 Node.js/Java/Go 等后端完成。流程如下：

graph LR A[Vite build] -->|输出| B[dist/assets/*.js] A -->|输出| C[dist/index.html
仅含占位符 <script src="/assets/index.xxxx.js"></script>] D[Node.js Server] -->|读取 dist/index.html| E[解析 HTML 模板] D -->|每次请求生成 crypto.randomUUID()| F[生成新 nonce] E -->|注入 nonce 属性| G[<script src="/assets/index.xxxx.js"></script>] D -->|设置响应头| H[Content-Security-Policy: script-src 'nonce-n-abc123'] G --> I[返回完整 HTML 响应]

四、生产就绪方案：Express + Vite 构建协同示例

// server.js（Node.js）
import express from 'express';
import { createServer as createViteServer } from 'vite';
import fs from 'fs/promises';

const app = express();
const PORT = 3000;

// 1. 预加载 Vite 构建产物
const htmlTemplate = await fs.readFile('./dist/index.html', 'utf8');

app.use('/assets', express.static('./dist/assets'));

app.get('*', async (req, res) => {
  // 2. 每次请求生成唯一 nonce（符合 CSP 要求）
  const nonce = crypto.randomUUID().replace(/-/g, '');
  
  // 3. 动态注入 script 标签 nonce
  const html = htmlTemplate
    .replace(//g, `<script></script>