All posts
Internet Fundamentals

Which API Keys Are Safe in Your Frontend? A Field Guide for Apps Built Fast

By

October 26, 2026

6 min read

Everything in a browser bundle or mobile app is public, including any variable your framework inlines at build time. Which keys are designed to be public and what actually protects you when they are, which must never ship, and what to do in the first hour after one leaks.

Internet Fundamentals
Secrets
API Keys
Supabase
Security

Framework conventions make the line easy to cross. Vite exposes any variable prefixed VITE_ to client code and warns that these "should not contain sensitive information such as API keys". Next.js inlines NEXT_PUBLIC_ variables into the JavaScript bundle at build time. A secret behind either prefix is published to every visitor.

The field guide

Key

Safe in the client?

What actually protects you

Supabase publishable key (sb_publishable_) or legacy anon key

Yes, by design

Row-level security on every table in exposed schemas. Without it, the key reads and writes your data

Supabase secret key (sb_secret_) or legacy service_role key

Never

Nothing: it bypasses every row-level security policy

Firebase web config

Yes, by design

Security Rules, plus App Check to limit which apps can call

Stripe publishable key (pk_)

Yes

It only allows client-safe operations

Stripe secret or restricted key (sk_, rk_)

Never

Server only; restricted keys limit the damage there

OpenAI, Anthropic or other model API keys

Never

Call models from your backend, with per-user limits

Google Maps and similar browser keys

Yes, if restricted

Restrict the key to your domains and the APIs it needs

AWS access keys

Never

Temporary credentials (Cognito identity pools) or presigned URLs from your backend

Webhook secrets, database URLs, JWT signing keys

Never

Server-side secret storage

Want a second opinion on this for your system?

Book a free 30-minute call. You'll leave knowing what we'd do first and roughly what it costs, whether or not you hire us.

Check what you have shipped

  1. Build the app and search the output for key prefixes (sk_, sk-, sb_secret_, service_role, AKIA) and the names of your secret variables.

  2. Open the deployed site, look at the loaded JavaScript in developer tools, and search for the same strings.

  3. Search the repository history, not just current files. Deleted secrets live on in old commits, forks and clones.

  4. Turn on GitHub secret scanning and push protection. They are on by default for new public repositories owned by personal accounts; private and organization repositories need them switched on.

When a key leaks

  1. Rotate first: issue a new key, deploy it, revoke the old one. Investigate second.

  2. Check the provider's usage and billing for activity you did not cause. Leaked model keys tend to be used quickly.

  3. Remove it from the code. If the repository was public, rewriting history does not make the key secret again.

  4. Add a check so it cannot happen the same way twice: push protection, a CI step that scans the build output, or both.

hoolco Monthly Review

Once a month: what changed in tech that month and what it means for you, from cloud and AI to security and the tools you build with. Every item links to its source. No sales pitch, unsubscribe in one click.

As of October 26, 2026. Provided as is, for general information, and accurate to the best of our knowledge on the date shown. Not legal, compliance, tax, financial or other professional advice. Prices, limits and vendor services change; check current vendor documentation before relying on anything here. Terms of use.