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 (often thousands of dollars), 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.

API Key Exposed in Frontend? Here's What to Do | StackRail

What this problem means

An API key in frontend code—whether in a React app, vanilla JS, or a mobile app's bundled assets—is visible to anyone who inspects your app. Bots scrape these keys within hours. Once exposed, attackers can use your key to rack up bills, abuse your API, or access data your key was meant to protect.

Why this is dangerous

- Cost amplification: A single leaked OpenAI or AWS key can generate thousands in bills overnight.

- Data access: Keys with read permissions expose customer or internal data.

- Reputation: Breaches and unexpected bills damage trust with users and investors.

Real-world example

A startup embedded their OpenAI API key in a client-side app to call GPT for a chat feature. Within days, the key was scraped and used to generate $82,000 in API charges. The startup had no rate limits, no per-user quotas, and no alerts—they discovered the breach when the bill arrived.

How to fix it

1. Immediately: Rotate the exposed key. Revoke it in your provider's dashboard and create a new one.

2. Short-term: Move all external API calls to a backend. Your frontend should call your own API; your server calls OpenAI, AWS, etc.

3. Long-term: Use a secrets manager, never commit keys, and enforce IAM least privilege for backend services.

Tools and configurations

- Backend proxy: Node.js, Python, or any server that holds the key and forwards requests.

- AWS Secrets Manager / Parameter Store: Store keys server-side, rotate regularly.

- Environment variables: Only on the server, never in client bundles.

Common mistakes

- Assuming "obfuscation" or "minification" hides keys—it doesn't.

- Using a single key for dev and prod.

- Delaying rotation because "we'll fix it later."

Quick checklist

- [ ] Rotate the exposed key immediately

- [ ] Move API calls to a backend proxy

- [ ] Remove the key from all client code and git history

- [ ] Set up billing alerts and rate limits

- [ ] Document the new architecture for your team

Need help with production readiness? Get a free 30-minute audit.

Book Free 30-Min Production Audit

View our DevSecOps services

Check if your system has this risk

Take the 60-second production readiness assessment to identify gaps in your infrastructure.

Start Assessment

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 (often thousands of dollars), 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.