Learning on Web Dev Open is free for all.

Build First > Meet your AI toolsKeys and secrets
Phase 00Meet your AI tools14 of 434

Keys and secrets

The mistake in this phase that can cost real money. It takes only a few minutes to understand, but it is easy to keep making if nobody points it out.

Concept14 minAI adversary

An API key is a password that spends money. Treat it like one.

API, simply

Zomato-style restaurant example

Your website asks another service for restaurant data.

1 · your website

Find biryani in Pune

city: Pune
cuisine: biryani

2 · API

bridge

Ask for restaurant data

GET /restaurants

city=pune

q=biryani

keyproves who is asking

3 · data comes back

Spice Route

Biryani · 4.4

Pune Tandoor

North Indian · 4.2

Nawab Kitchen

Biryani · 4.5

Find an API

Start with the official docs.

Search for the service name plus “API docs” or “developer API”. A public API should explain what you can request, how to authenticate and what the limits are.

1. Search: “service name API docs”

2. Look for a developer portal

3. Check endpoints, auth and limits

Simple rule: an API lets software talk to software. A public API is documented for developers. A private API is internal. An API key controls access, so keep it secret.

API 101.

The problem is that nothing on screen shows it travelling. The file looks private. The site looks finished. The key is in both, and in two of the four common setups it is readable by anyone on the internet.

Trace all four below before you read on.

Where the key actually ends up

Put the key somewhere
const key = "sk_live_4Kd91m…";
fetch(url, { headers: { Authorization: key } });
Where it travels
  • Your machinewhere you type

    ·

  • The repogit, locally

    ·

  • GitHubpublic, forever

    ·

  • The deployed sitethe server

    ·

  • A visitor's browseranyone at all

    ·

Pick a placement and press Trace it. Two of these four end with the key readable by anyone on the internet.

Place the key four ways and trace it. Two of the four end in a stranger’s browser.

Two rules come out of this. Anything secret goes in .env, and .env goes in .gitignore. People often remember the first part and forget the second, but .env on its own protects nothing. For a deployed site, keep the key in your host’s environment settings, never in the repository.

One more thing matters here: a leaked key cannot be made secret again. Deleting the file does not remove it from Git history, and even a briefly public repository may already have been scanned automatically.

So if it has happened: rotate the key. Issue a new one, revoke the old one, today. Rotating the key is the action that matters. Do it as soon as you notice the leak.

You should now be able to

  • Say where an API key ends up for each way of storing it
  • Set up .env and .gitignore correctly
  • Know what to do when a key has already leaked
Ask the community

Loading…