security-vite

针对 Vite 应用的安全审计模式，重点关注环境变量暴露、构建时机密信息和 SPA 特有漏洞。

环境变量暴露

VITE_ 陷阱

VITE_*    → Bundled into client JavaScript → Visible to everyone
No prefix → Only available in vite.config.ts → Safe for secrets

审计步骤：

1. grep -r "VITE_" . -g "*.env*"
2. 检查源代码中 import.meta.env.VITE_* 的用法
3. 常见错误：
   • VITE_API_SECRET（应仅在服务端使用）
   • VITE_DATABASE_URL（绝不能使用）
   • VITE_STRIPE_SECRET_KEY（只能使用可公开的密钥）

环境文件优先级

Vite 按以下顺序加载（后加载的会覆盖先加载的）：

.env                # Always loaded
.env.local          # Always loaded, gitignored
.env.[mode]         # e.g., .env.production
.env.[mode].local   # e.g., .env.production.local, gitignored

检查： .env.local 和 .env.*.local 是否已加入 .gitignore？

envPrefix 覆盖项

如果配置了 envPrefix，Vite 会暴露所有带有这些前缀的变量。请将 envPrefix 视为安全敏感设置。

构建时与运行时

危险：在 vite.config.ts 中存放机密信息

// ❌ Secret in config (ends up in bundle)
export default defineConfig({
  define: {
    'process.env.API_KEY': JSON.stringify(process.env.API_KEY),
  },
});

// The above makes API_KEY available in client code!

安全模式

// Only use VITE_ prefix for truly public values
export default defineConfig({
  define: {
    '__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
  },
});

// Keep secrets on server (use a backend API)

开发服务器安全

对网络开放

// ❌ Exposes dev server to network
export default defineConfig({
  server: {
    host: '0.0.0.0',  // or host: true
  },
});

这在共享网络上很危险。请检查是否有意为之。

代理配置错误

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        // ❌ Missing secure options for production-like setup
      },
    },
  },
});

SPA 安全问题

仅在客户端进行身份验证

// ❌ "Protection" only in React Router
const ProtectedRoute = ({ children }) => {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" />;
  return children;
};

// API calls still need server-side auth!
// This is UI convenience, not security.

Bundle 中的机密信息

# Check the built bundle for secrets
rg -a "(sk_live|sk_test|AKIA|api[_-]?key)" dist/

生产环境中的源映射

// Check vite.config.ts
export default defineConfig({
  build: {
    sourcemap: true,  // ❌ Exposes source code in production
  },
});

<severity_table>

常见漏洞

问题	检查位置	严重性
VITE_* 机密信息	.env*、源文件	严重
define 中的机密信息	vite.config.ts	严重
生产环境中的源映射	vite.config.ts	中
开发服务器暴露	vite.config.ts server.host	中
仅在客户端进行身份验证	没有 API 身份验证的路由守卫	高
Bundle 中的 API 密钥	dist/ 目录	严重

</severity_table>

快速审计命令

# Find VITE_ secrets
grep -r "VITE_" . -g "*.env*"

# Find import.meta.env usage
rg 'import\.meta\.env' . -g "*.ts" -g "*.tsx" -g "*.vue"

# Check define in config
rg 'define:' vite.config.*

# Scan built bundle for secrets
rg -a "(sk_live|AKIA|ghp_|api[_-]?key['\"]?\s*[:=])" dist/

# Check for source maps
fd '\.map$' dist/

加固检查清单

• VITE_* 变量中没有机密信息
• .env.local 和 .env.*.local 已加入 .gitignore
• 生产构建中设置了 sourcemap: false
• server.host 不是 0.0.0.0 或 true（除非有意如此）
• 所有敏感 API 调用都经过后端（而非直接从浏览器发起）
• vite.config.ts 的 define 块中没有机密信息