Front End, Back End, and Keeping Keys Safe

“Full-stack”, “CORS”, “environment secrets” — the vocabulary is heavier than the idea. A web app has two halves, and keys belong on one side only. Ask an AI tool to call a provider on button-click without saying so, and it may paste your key into browser code where anyone can copy it.

The two halves

Front end — everything sent to the visitor’s browser and run there: HTML structure, CSS/Tailwind styling, JavaScript interaction. Frameworks like Astro (this site) keep it fast across devices.

Back end — code on your server or serverless function (Node.js, Python, edge): database queries, logins and sessions, calls to outside services. The browser asks your back end; the back end does the sensitive work and returns only the result.

Why browser keys leak instantly

Anything shipped to a browser can be read in it: View Source, DevTools, the bundled JS. So this:

// Visible to anyone who opens DevTools:
const apiKey = "sk-proj-123456789abcdef...";

is public the moment you deploy. Treat a key like a card number with no PIN — anyone holding it can bill you.

Three rules to put in every build prompt

1. Keys stay server-side

“No API keys, tokens, or secrets in client code, components, or public scripts. Outside calls run on back-end endpoints that return only the result to the browser.”

The flow: button click → browser posts to POST /api/summarize → server attaches the key from memory, calls the provider → browser gets back plain text.

2. Keys live in .env

“Secrets go in a local .env file, never hard-coded. Include a .env.example with placeholder values so others know what’s needed.”

# .env (private, never committed)
OPENAI_API_KEY=sk-proj-9876543210abcdef...
ANTHROPIC_API_KEY=sk-ant-api03-abcdef...

# .env.example (public template)
OPENAI_API_KEY=your_openai_api_key_here
ANTHROPIC_API_KEY=your_anthropic_api_key_here

The server reads them at startup (process.env.OPENAI_API_KEY); the browser bundle never sees them.

3. .env stays out of Git

“.gitignore must exclude .env, .env.local, .env.*.local, and key files before anything is staged or committed.”

.env
.env.local
.env.*.local
*.pem
*.key
dist/
.astro/

A secret once committed counts as exposed even if you delete it later — revoke it in the provider dashboard and issue a new one.

With these three lines in your prompts, an AI builder assembles the app while your keys and billing stay out of the browser.