API Bouncer

Buy me a coffee

API Security Best Practices for Frontend Developers

Using APIs is easy. Using them securely takes a bit more thought. If you're building apps that call third-party APIs, here's what you need to know to avoid leaking keys, exposing user data, or getting your accounts banned.

Rule #1: Never put API keys in client-side code

This is the most common mistake developers make. If your API key appears anywhere in your HTML, JavaScript, or browser network requests, it's public. Anyone can view-source your page, open DevTools, or inspect network traffic to steal your key.

// WRONG — key is visible in browser fetch('https://api.example.com/data?key=sk_live_abc123') // RIGHT — call your own backend, which has the key fetch('/api/data')

Your backend (Node.js, Python, etc.) makes the API call with the key stored in an environment variable. Your frontend only talks to your backend.

Store keys in environment variables

Never hardcode API keys in your source files. Use environment variables instead:

// .env file (add to .gitignore!) WEATHER_API_KEY=abc123def456 // server.js const apiKey = process.env.WEATHER_API_KEY;

And always add .env to your .gitignore. If you've already committed a key to Git, rotate it immediately — the key is in your Git history forever, even if you delete the file.

Validate and sanitize all input

If your app takes user input and passes it to an API, validate it first. Never pass raw user input to API requests without checking it.

// WRONG — user could inject malicious values const city = req.query.city; // RIGHT — validate and encode const city = req.query.city; if (!city || typeof city !== 'string' || city.length > 100) { return res.status(400).json({ error: 'Invalid city name' }); } const encoded = encodeURIComponent(city);

Implement rate limiting on your proxy

If you're proxying API requests through your backend, add rate limiting. Without it, someone could use your proxy to exhaust your API quota:

// Simple in-memory rate limiter const requests = new Map(); function rateLimit(req, res, next) { const ip = req.ip; const now = Date.now(); const windowMs = 60 * 1000; // 1 minute const maxRequests = 30; const userRequests = (requests.get(ip) || []) .filter(t => now - t < windowMs); if (userRequests.length >= maxRequests) { return res.status(429).json({ error: 'Too many requests' }); } userRequests.push(now); requests.set(ip, userRequests); next(); }

Use HTTPS everywhere

Always use HTTPS for API requests. HTTP requests send data (including API keys and user data) in plain text that anyone on the network can read. Most modern APIs require HTTPS anyway, but double-check — if an API offers both http:// and https:// endpoints, always use https://.

Limit API key permissions

Many API providers let you restrict what your key can do:

The principle of least privilege applies: give your API key the minimum permissions it needs to function.

Handle API responses carefully

Security checklist

Security isn't a feature you add at the end — it's a habit you build from the start. Following these practices costs minimal extra effort and prevents serious problems down the road.

More Guides