Hardcoded API Key in Client Code

Why it matters

Anyone who can view your code — whether through browser DevTools, a public GitHub repo, or your built JavaScript bundle — can steal this key. Attackers automate scanning for exposed keys and can use them within minutes to access your APIs, steal data, or run up charges on your account.

What it looks like

This is the shape of code that triggers the rule. AI tools produce it because it works, and nothing tells them it is unsafe.

const apiKey = "sk-proj-abc123def456ghi789jkl012mno345";

The smallest fix

// Move the secret to an environment variable:
// 1. Create/edit .env file:
//    API_KEY=your-key-here
// 2. Replace the hardcoded value:
const apiKey = process.env.API_KEY;
// 3. Add .env to .gitignore

The better fix

If you have a few more minutes, this is the approach that holds up as the app grows.

// For client-side apps, create a server-side proxy:
export async function handler(req, res) {
  const apiKey = process.env.API_KEY;
  const response = await fetch('https://api.example.com', {
    headers: { Authorization: `Bearer ${apiKey}` }
  });
  return res.json(await response.json());
}

Let your AI tool fix it

When the scanner finds this in your project, it fills in the file and line for you. This is the prompt it gives you to paste into Claude Code, Cursor or whatever you use.

How to check the fix worked

1. grep -r "sk-\|api_key\|apiKey\|secret" --include="*.ts" --include="*.js" src/
2. Check .gitignore includes .env
3. Build the project and search dist/ for any key patterns

Further reading

• https://cwe.mitre.org/data/definitions/798.html
• https://owasp.org/Top10/A02_2021-Cryptographic_Failures/