An API key in the frontend is not a secret – it's a public file. Yet Stripe, AWS, OpenAI and Anthropic keys constantly end up in the JavaScript bundle of shipped sites. Here's how it happens, how attackers find the keys, and how to check in ten seconds whether your site is affected.
How a key ends up in the bundle
In frameworks like Next.js, Vite or Create-React-App, everything referenced in client code is visible in the browser after the build. The most common mistake: using an environment variable with the NEXT_PUBLIC_ (or VITE_) prefix for a secret key. That very prefix inlines the value into the bundle. An AI assistant asked to „make the Stripe call work" happily suggests it – without knowing it's a secret key.
Which keys are especially dangerous
- Stripe secret key (
sk_live_…): full access to payments, refunds, customer data. - AWS access key: depending on permissions, access to S3 buckets, databases, whole infrastructure.
- OpenAI / Anthropic keys: others use your quota – you pay the bill.
- Database and SMTP credentials: direct data exfiltration or sending mail in your name.
Publishable keys (pk_live_…), by contrast, are deliberately public – those belong in the frontend. The distinction decides everything.
How an attacker finds the keys
No hacking required: open the dev tools, go to „Sources", search for sk_, AKIA or api_key. Automated crawlers and GitHub secret scanners do exactly this at scale – a leaked live key is often abused within minutes.
How to do it right
Secret keys belong on the server. The browser calls your own backend route (or serverless function) that uses the key server-side and returns only the result. This „backend-for-frontend" layer is the standard approach – it costs a few lines and closes the hole completely.
Check in 10 seconds
The Vibe Check loads your shipped bundle and looks specifically for exposed key patterns (Stripe, AWS, OpenAI, Anthropic and more) – with nothing to install or grant.
Scan your site in 10 seconds →