Back to guides

Guide · Security

API Key Exposed in Frontend: What to Do Right Now

You just realized your API key is in client-side JavaScript. Here's how to contain the damage, rotate credentials, and fix the architecture so it never happens again.

In APRF terms this is a secrets failure—production keys must never ship in client bundles. Primary control: Secrets Management

Do this in order

Now (minutes): Revoke the exposed key in the provider console. Assume it is already scraped—bots watch public JS. Create a replacement only on the server. Turn on or tighten billing alerts and rate limits on that provider account.

Today: Find every call site. Frontend must talk to your API; your API holds the provider key. Ship a backend proxy (Node, Python, serverless—whatever you already run). Remove `NEXT_PUBLIC_` / `EXPO_PUBLIC_` / Vite `VITE_` secrets that touch paid APIs.

This week: Put the new key in a secrets manager or server-only env. Scan git history and old mobile builds. Rotate any sibling keys that shared the same pattern. Document "no provider keys in clients" as a release check.

Why "hide it in the bundle" fails

Anyone can view source, watch network traffic, or unpack an IPA/APK. Minification is not encryption. If the browser or app needs the key to call OpenAI/AWS directly, the key is public.

A Next.js "try Gemini" widget that called the model from the client put the key in a chunk; scrapers found it the same week. Moving the call to a server route with session quotas and rotating the key ended the bleed.

Architecture that passes Secrets Management

Browser / app  →  your authenticated API  →  secrets store + provider

IAM on the backend identity should be least privilege. Per-user quotas stop one account from becoming a denial-of-wallet. APRF Secrets Management is satisfied by server-side storage, rotation evidence, and no long-lived plaintext in repos or clients—not by clever variable names.

Next: Secrets Management

Open the related pillar specification for mandatory checks, artifacts, and pass conditions. Self-attest is optional.

View Secrets ManagementSelf-attest

Related

Frequently asked questions

What happens if API keys are exposed?
Exposed API keys can be used by anyone to make requests on your behalf. This leads to unauthorized usage, unexpected bills, data access, and potential compliance violations. Keys should be rotated immediately.
How do I secure API keys?
Never put API keys in frontend code. Use a backend server to hold keys and proxy requests. Store keys in a secrets manager (e.g., AWS Secrets Manager), use environment variables only on the server, and rotate keys regularly.
Can I hide an API key in JavaScript?
No. Any key in client-side JavaScript can be extracted by inspecting the app, viewing network requests, or decompiling the bundle. Obfuscation and minification do not provide security.