← Lessons

quiz vs the machine

Silver1120

Frontend

Secrets In Frontend Bundles

Why anything shipped to the browser is public and how to keep real secrets on the server.

4 min read · intro · beat Silver to climb

What it is

A front end bundle is downloaded in full by every visitor. Any value baked into it, including environment variables inlined at build time, is readable by anyone who opens dev tools.

The core rule

  • Anything in client code is public. There is no hiding a key in JavaScript.
  • A so called secret in the bundle is only an inconvenience to an attacker, not protection.

Common mistakes

  • Inlining a private API key through a build variable.
  • Committing a token to a config that ends up bundled.
  • Assuming minification or obfuscation hides a value. It does not.

What to do instead

  • Keep real secrets on a server and call it from the client.
  • Use scoped, public keys that are safe to expose and rate limited.
  • Move privileged calls behind a backend proxy that holds the secret.

Key idea

Everything in a front end bundle is public; keep real secrets on the server and expose only safe scoped keys.

Check yourself

Answer to earn rating on the learn ladder.

1. Why is a secret in client JavaScript unsafe?

2. What is the right place for a privileged API key?