pwnmyvibecode_

Your Anthropic key leaked. Here's what to do

An Anthropic API key (it starts with sk-ant-) is never safe in front-end code: anyone who reads it can call Claude on your bill. If it leaked, delete it on the API keys page of the Anthropic developer console, create a new one, and review usage and cost for that workspace.

Updated

Check your live site now

Free, no signup, read only. A grade and plain fixes in seconds.

What an Anthropic key looks like

Standard API keys start with sk-ant-api followed by a version number and a long random string. Admin keys, used for managing an organisation through the API, also start with sk-ant- and are more powerful still. There's no public or publishable variant.

Every key belongs to a workspace in your organisation. Workspaces matter for cleanup: they carry their own spend limits and usage reports, so one workspace per app makes a leak easier to contain and easier to read.

How Claude keys end up in front ends

Anthropic puts two speed bumps in the way of browser use, and both are clear warning signs if you see them in your code:

  • The TypeScript SDK throws in a browser unless you pass dangerouslyAllowBrowser: true.
  • The API only accepts direct browser requests that send the anthropic-dangerous-direct-browser-access header.

If either is in your front end, your key is in your bundle. The other usual routes are a public env var name (VITE_ANTHROPIC_API_KEY, NEXT_PUBLIC_ANTHROPIC_API_KEY), a key compiled into a desktop or mobile app, a committed .env, and a key pasted into a coding agent's chat that ends up hardcoded in source.

What someone can do with a leaked Anthropic key

  • Send requests billed to your organisation until you revoke the key or hit your spend limit.
  • Eat your rate limits, so your real users start seeing errors.
  • Reach resources stored in that workspace through the API, such as uploaded files.

A spend limit on the workspace doesn't stop a leak, but it puts a ceiling on the bill. Set one before you need it.

How to revoke and replace a leaked Anthropic key

  1. Open the API keys page in the Anthropic developer console. Keys show a name and a short fragment, so you can match the leaked one.
  2. Delete the key. Anything using it fails immediately, which is what you want.
  3. Create a new key in the right workspace. A dedicated workspace per app keeps limits and reports separate.
  4. Store it in your server environment as ANTHROPIC_API_KEY, with no public prefix, and redeploy.
  5. Remove the old key from your code, committed env files and git history.
  6. Check the usage and cost pages for the period the key was exposed, and set or lower the workspace spend limit.
terminal
# 1. Put the leaked value in a file, one per line, mapped to a placeholder
echo 'PASTE_THE_LEAKED_KEY_HERE==>REMOVED' > replacements.txt

# 2. Rewrite every commit (work on a fresh clone, keep a backup)
git filter-repo --replace-text replacements.txt

# 3. Force push the rewritten branches, then delete replacements.txt
git push --force --all

GitHub secret scanning recognises Anthropic keys and push protection can stop you committing one. Neither checks the JavaScript your live site serves.

How to call Claude from your own server

app/api/claude/route.ts
import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic(); // reads ANTHROPIC_API_KEY from the server env

export async function POST(req: Request) {
  // Check the user is signed in and under their rate limit here.
  const { prompt } = await req.json();
  const msg = await client.messages.create({
    model: process.env.ANTHROPIC_MODEL!, // chosen on the server
    max_tokens: 1024,
    system: "You are the helper for our app.",
    messages: [{ role: "user", content: String(prompt).slice(0, 4000) }],
  });
  const text = msg.content.map((b) => (b.type === "text" ? b.text : "")).join("");
  return Response.json({ text });
}
  • Keep the model, system prompt, tools and max_tokens on the server. If the browser can choose them, a stranger can too.
  • Require sign-in and rate limit each user. A route that forwards any prompt to Claude for anyone lets strangers spend your credits.
  • On Lovable or Bolt with Supabase, put this in an Edge Function and set the key with supabase secrets set ANTHROPIC_API_KEY=... so it never touches the front end.

Our free scan checks your page HTML and your site's own JavaScript for sk-ant- keys. It doesn't look inside mobile apps or repositories.

Questions

Is it safe to use my Anthropic API key in a React app?

No. Anything in a React bundle is readable by every visitor. Call Claude from a server route or Edge Function and have the React app call that.

Is my API key the same as my Claude subscription?

No. API usage through the developer console is billed separately from a Claude.ai plan. A leaked API key runs up API charges on the organisation that owns it.

Will deleting the key break my app?

Yes, until you deploy the new one. Create the replacement first if you can do it in a minute, but don't keep a leaked key alive to avoid a short outage.

How do I stop this happening again?

Keep the key in a server-only env var, add a pre-commit secret scanner or GitHub push protection, and grep your production build output for sk-ant- before you ship.