security/no-secrets-in-client-env

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

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

Przeczytaj w terminalu

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