How to hide API keys when an AI builder writes your app
Patterns that keep OpenAI, Stripe, and other secrets out of the browser when you vibe-code.
AI builders optimize for "it works in the preview." That often means calling OpenAI or Stripe straight from the browser with a secret key. Veracode found 45% of AI-generated code samples contained security flaws across their tested tasks (Veracode).
Rules of thumb
- Browser: only publishable keys (
pk_, Supabaseanon, Firebase config). - Server / Edge Function:
sk_,service_role, AWS keys, webhook secrets. - Add a standing project rule so the AI does not "helpfully" undo this later.
Copy-paste into your AI builder
Never put secret API keys in frontend code. Create a server-side (or Supabase Edge) function for each paid API: OpenAI, Stripe, email. The browser calls my function only. Add a project rule: 'No secret keys in client code.'
Related: Cursor checklist · Security headers
Scan your app free
Paste your URL. ShipLatch checks for leaked keys, exposed /.env and /.git, and flags Supabase/Firebase so you know what to lock down.