Single Page Applications built with React, Next.js, Vue, or Vite bundle complex logic into client-side JavaScript assets served directly to the browser. A startling number of applications accidentally bake high-privilege backend secrets, private API tokens, and internal staging credentials into these public bundles.
How secrets leak into client bundles
Frontend bundling tools automatically embed environment variables based on specific naming conventions. Misunderstanding the boundary between build-time and runtime variables is the primary cause of leakage:
- Prefix confusion: prefixing secret keys with `NEXT_PUBLIC_` or `VITE_` forces bundlers to inline the secret directly into plain-text JavaScript files.
- Public production source maps: publishing `.js.map` files to production web servers allows anyone with browser DevTools to reconstruct original source code, internal comments, and test credentials.
- Hardcoded staging keys: leaving payment sandbox keys, internal staging JWT secrets, or administrative Firebase configuration objects in shared utility files.
Remediation and automated scanning
Disable production source map publishing (`productionBrowserSourceMaps: false` in Next.js). Audit environment variable prefixes rigorously, keeping all database passwords and backend API keys strictly in server-side runtime environments. Use BugSnaps MyPentest to automatically crawl and scan your client-side bundles for exposed secrets and tokens.
If an environment variable contains a secret, it must never carry a client-facing prefix and must never be referenced in browser-rendered code.