How to Securely Handle API Keys in Your Frontend Apps

A user recently emailed us: "I inspected your YouTube thumbnail downloader and I can't see your API key. How?" That question deserves a public answer, because it's a pattern every frontend developer should know.

The Problem with Browser‑Exposed Keys

If you embed a Google API key directly in your JavaScript, it's visible to anyone who opens DevTools. Worse, if you haven't restricted it to specific HTTP referrers, someone can burn through your quota in hours. We learned this the hard way in 2024.

The Proxy Pattern

All our tools that need external APIs use a thin server‑side proxy. The browser calls /api/proxy/youtube on our Next.js backend, and that server‑side route attaches the secret API key. The key never reaches the client. It's an extra network hop, but the latency is negligible (under 50ms on our edge functions).

Rate Limiting the Proxy

A malicious user could still spam your proxy endpoint. We apply a generous but firm rate limit of 10 requests per second per IP, and we monitor for abuse patterns. If a single IP hits the thumbnail downloader 500 times in a minute, our proxy returns a 429 and alerts the team.

Environment Variables Are Not Enough

Even with a proxy, you must never hardcode secrets. Use environment variables (in Vercel, Netlify, or your own server) and never commit.env files. We also rotate all third‑party keys quarterly—a practice that once saved us when a former contractor's machine was compromised.

TL;DR: Browser ↔ Your Server (with secret) ↔ External API. The client never touches the key. It's the simplest, most effective way to keep credentials safe in 2026.