explainers
Web security basics for vibe coders
The few ideas that decide whether an app you shipped with AI is safe to put in front of people. Each one is a short answer here, with a longer explainer or fix where you need it.
In depth
- Supabase RLS: what it is and how to turn it on properlyRow level security (RLS) is a Postgres feature that decides, row by row, who can read or change data in a table. In Supabase the anon key ships inside your front end, so RLS policies are the only thing stopping anyone who copies that key from reading or editing every row.
- Public env variables: what ends up in the browserAny environment variable with a public prefix (NEXT_PUBLIC_ in Next.js, VITE_ in Vite, PUBLIC_ in SvelteKit and Astro, REACT_APP_ in Create React App, EXPO_PUBLIC_ in Expo) is copied into the JavaScript your visitors download. Publishable keys are fine there. Secret keys must stay unprefixed, be read only in server code, and be rotated if they ever shipped.
- Firebase security rules: the part that actually protects your dataYour Firebase apiKey only identifies your project, and it ships to every visitor. Firestore, Realtime Database and Cloud Storage security rules decide who can read and write each document or file, so rules that allow everything (if true, or an expired test mode rule replaced with if true) leave your data open to anyone.
- Build your own security checks into your repoMost of the checks that matter can run on every pull request with free tools: gitleaks for committed secrets, Dependabot and npm audit for vulnerable packages, a short script for secrets in your browser bundle, a daily check of your live headers and cookies, and a test that private Supabase tables stay private. Each one below is a file you copy into your repo.
The basics in one page
What is HTTPS and HSTS?
HTTPS encrypts traffic between the browser and your site. HSTS is a response header that tells the browser to only ever use HTTPS for your domain, so nobody can quietly downgrade a visit to plain HTTP.
What are security headers?
Response headers that switch on browser protections: Content Security Policy, frame protection, nosniff and Referrer Policy. They cost nothing to send and each one closes a common gap.
What is a Content Security Policy?
A header that lists where your page may load scripts, styles and other resources from. If someone gets a script into your page, a strict policy stops the browser from running it.
What is CORS?
Cross origin resource sharing: the headers that decide which other websites may read responses from your API in a visitor's browser. Echoing back whatever site asks while also allowing credentials lets other sites read your logged in users' data.
What makes a cookie safe?
A login cookie should be Secure, so it only travels over HTTPS, and HttpOnly, so scripts on the page can't read it. Without HttpOnly, one injected script can steal a session.
What is a .env file?
A file of environment variables, usually API keys and database passwords, that your app reads at startup. It belongs on the server only. If it's served from your site or bundled into browser code, anyone can read it.
Which API keys are safe in the browser?
Publishable keys, like a Stripe publishable key, a Supabase anon or publishable key or a Firebase web config, are made to be public. Secret keys, like a Stripe secret key or an OpenAI key, must stay on the server.
What is row level security?
A Postgres feature Supabase relies on: rules on each table that decide which rows a user may read or change. With RLS off, or a policy that allows everyone, your public anon key can read the whole table.
What are Firebase security rules?
The rules that decide who can read and write your Firestore, Realtime Database and Storage data. Test mode rules let anyone read and write your data while they last.
Why is a public .git folder a problem?
If your .git folder is served from your site, anyone can download your source code and its history, including any key that was ever committed.
Check your own site
The quick check grades your HTTPS, headers and cookies in seconds. The full check adds leaked keys, public files, CORS and your Supabase or Firebase config. For the whole picture, read the vibe coding security checklist.