Can you hide an API key in frontend code?

No. Any key in client-side JavaScript, HTML, or mobile app bundles can be extracted. Obfuscation and minification do not provide security. Always use a backend to hold and use API keys.

What happens if my API key is in the frontend?

The key is exposed to anyone who inspects your app. Bots scrape exposed keys and use them for abuse, data extraction, or cost amplification. Rotate the key immediately and move all API calls to a backend.

Where should API keys be stored?

Store API keys in a secrets manager (AWS Secrets Manager, HashiCorp Vault) or server-side environment variables. Never in frontend code, git repositories, or client-accessible config.

Why API Keys Should Not Be in Frontend | StackRail

What this problem means

Developers sometimes embed API keys (OpenAI, AWS, Stripe, etc.) in client-side code to simplify integration. But anything in the frontend is visible to anyone who inspects the app. Bots scrape these keys within hours of deployment.

Why this is dangerous

- Instant exposure: View source, DevTools, or a simple curl can extract the key.

- No revocation by user: Unlike passwords, users can't change an API key. You must rotate it.

- Full access: The key has whatever permissions you gave it—billing, data, everything.

Real-world example

A startup used an OpenAI key in a React app for a chat feature. The key was in the bundled JavaScript. A security researcher found it in minutes and reported it. Before the team could rotate, a bot had already scraped it and run up $40,000 in API charges.

How to fix it

1. Backend proxy: Your frontend calls your API. Your server holds the key and calls the external service.

2. Secrets manager: Store keys in AWS Secrets Manager, Vault, or similar. Never in code or env files committed to git.

3. Scoped keys: If you must use client-side keys (e.g., Stripe publishable), use keys with minimal permissions. Never use secret keys in the frontend.

Tools and configurations

- Backend: Node.js, Python, or any server that proxies requests.

- AWS Secrets Manager / Parameter Store: Server-side secret storage.

- Stripe: Use publishable keys in frontend, secret keys only on server.

Common mistakes

- We'll add a backend later.

- Assuming obfuscation or minification hides keys.

- Using the same key for dev and prod.

Quick checklist

- [ ] Remove all API keys from frontend code

- [ ] Move external API calls to a backend

- [ ] Store keys in a secrets manager

- [ ] Rotate any keys that were ever in client code

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

Can you hide an API key in frontend code?: No. Any key in client-side JavaScript, HTML, or mobile app bundles can be extracted. Obfuscation and minification do not provide security. Always use a backend to hold and use API keys.
What happens if my API key is in the frontend?: The key is exposed to anyone who inspects your app. Bots scrape exposed keys and use them for abuse, data extraction, or cost amplification. Rotate the key immediately and move all API calls to a backend.
Where should API keys be stored?: Store API keys in a secrets manager (AWS Secrets Manager, HashiCorp Vault) or server-side environment variables. Never in frontend code, git repositories, or client-accessible config.