security/no-secrets-in-client-env

Why

Build tools copy every variable with these prefixes into the JavaScript sent to the browser, where anyone can read it in DevTools. A payment secret, database password or private API key with such a prefix is public the moment the site is deployed, and stays in old bundles and caches after you rotate it.

Fix

Rename the variable without the public prefix and use it only in server code (API routes, server actions, +server.js, server-only modules), then call that server code from the browser. Rotate any secret that was ever shipped. Keep only keys meant to be public (a publishable payment key, an analytics id) under the public prefix.

Examples

// bad: shipped to every visitor
fetch(url, { headers: { Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY}` } })
// good: server route reads STRIPE_SECRET_KEY; the browser calls /api/charges
fetch('/api/charges', { method: 'POST', body })

Sources

• Next.js, Environment variables (bundling for the browser)
• Vite, Env variables and modes (security notes)
• Astro, Environment variables

Read it in the terminal

npx github:dawidolko/frontend-skills explain security/no-secrets-in-client-env