security-vite

Build-Time vs Runtime

Dangerous: Secrets in vite.config.ts

// CRITICAL: 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!

Safe Pattern

// 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)

Dev Server Security

Open to Network

// SHOULD NOT expose dev server to network without reason
export default defineConfig({
  server: {
    host: '0.0.0.0',  // or host: true
  },
});

This is dangerous on shared networks. MUST verify if intentional.

Proxy Misconfiguration

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

SPA Security Issues

Client-Side Auth Only

// "Protection" only in React Router - NOT actual security
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.

Secrets in Bundle

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

Source Maps in Production

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