How to check if your API keys are exposed in your JavaScript bundle
· 5 min read
Everything your front end needs is downloaded by every visitor: HTML, JavaScript, and any value baked into that JavaScript. If a secret API key is in there, it is public, even if no page ever shows it.
How secrets end up in the bundle
Apps built with AI tools usually leak keys in one of three ways:
- A public environment variable prefix. Frameworks copy variables with certain prefixes into the client code at build time:
NEXT_PUBLIC_in Next.js,VITE_in Vite,PUBLIC_in Astro and SvelteKit. When an AI agent hits "undefined" forOPENAI_API_KEYin the browser, the quick fix is to rename itNEXT_PUBLIC_OPENAI_API_KEY. It works, and the key is now public. - A key pasted straight into the code during a "just make it work" session.
- Calling a paid API directly from the browser (OpenAI, Anthropic, Stripe, Resend…) instead of through your own server route.
Find them yourself in 2 minutes
- Open your live site in Chrome or Firefox and open Developer Tools (F12).
- Go to the Sources (or Debugger) tab and search across all files with Ctrl+Shift+F (Cmd+Option+F on Mac).
- Search for prefixes of common secret keys:
sk-,sk_live,service_role,sb_secret_,re_(Resend),xoxb-(Slack),ghp_(GitHub),AKIA(AWS). - Also search for the names of your environment variables, like
SECRETorAPI_KEY.
Any secret you find is already public: assume someone has copied it.
If a key leaked
- Rotate it first. Create a new key in the provider's dashboard and revoke the old one. Removing it from the code is not enough: old builds and caches still have it.
- Move the call to the server. Create an API route or serverless function that reads the key from a server-only environment variable and calls the provider. The browser calls your route, never the provider.
- Add limits. Require login on that route and add rate limiting, so nobody can use your route to spend your credits.
- Check the bill and logs of the provider for usage you don't recognize.
Prompt for your coding agent
Find secrets exposed to the browser in this project:
1. List every environment variable with a public prefix (NEXT_PUBLIC_, VITE_, PUBLIC_) and
tell me which ones hold secrets.
2. Search the client code for hard-coded API keys.
3. For each secret, move the call into a server route that reads a server-only env var,
require authentication on it, and add rate limiting.
List every key I need to rotate.
A FixPrompt scan does this check on your live site automatically: it looks for 30+ secret key formats in your HTML and JavaScript, reports where each one was found, and never stores the key itself. More on this for Next.js in the Next.js security checklist.
Check your app in minutes
Paste your URL and get a plain-English report with prioritized risks and a fix prompt for your AI. Your first scan is free.
Scan my app free