Environment Variable in Client Bundle

Why it matters

Build tools (Webpack, Vite, Next.js) replace process.env.X with the actual value at build time. If your client-side code references process.env.API_KEY, the key is embedded in the JavaScript bundle that gets served to every user's browser.

What it looks like

This is the shape of code that triggers the rule. AI tools produce it because it works, and nothing tells them it is unsafe.

const db = connect(process.env.DATABASE_URL);

The smallest fix

// Never reference secrets in client code.
// Create a server-side API route instead:
// Server: app.get('/api/config', (req, res) => { ... })
// Client: const config = await fetch('/api/config');

Let your AI tool fix it

When the scanner finds this in your project, it fills in the file and line for you. This is the prompt it gives you to paste into Claude Code, Cursor or whatever you use.

How to check the fix worked

1. Build the project and search dist/ for secret patterns
2. Verify no process.env.SECRET_* in client-side files
3. Check that server-side proxy handles the secret

Further reading

• https://cwe.mitre.org/data/definitions/200.html