API Keys in Page Source

What is this?

When you embed an API key, database URL, or other secret directly in client-side code (JavaScript, HTML), it becomes part of your page's source - readable by any user who opens browser DevTools or views source. Automated scrapers continuously crawl the web extracting keys from page source.

Common ways this happens: pasting a key directly into a React component, accidentally using server-side env vars in a Vite build, or including a config object in a script tag.

Why it matters

• Keys are exploited within minutes of being indexed. GitHub and web scrapers actively monitor for leaked keys.
• Stripe secret keys → can issue refunds, transfer funds, access all customer data
• AWS access keys → can spin up infrastructure, access S3 buckets, incur massive charges
• Database URLs → direct read/write access to your entire database
• OpenAI keys → run up API charges, access your conversation history

How to fix it

1. Immediately revoke/rotate the exposed key - assume it's compromised
2. Move the key to a server-side environment variable
3. Use an API proxy: your frontend calls your own backend, which calls the third-party API using the server-side key

Providers & tools

Framework-specific env var rules:

Never put secret keys in the exposed-to-browser category. Only put things like a public analytics ID or a Stripe publishable key there.