How to add security headers to your Lovable, Bolt, or Cursor app

97% of the live vibe-coded apps we checked were missing basic security headers. Here's what they are, how to check yours in one minute, and the prompt that adds them.

When we checked 76 live vibe-coded apps, one problem showed up more than any other: 97% of them were missing basic security headers. Only 3 of the 76 apps got an A.

The good news is that this is one of the easiest things to fix before you launch. You don't need to understand code. You need about ten minutes and one prompt.

What security headers are, in plain English

Every time someone opens your app, your site sends the browser a few hidden notes along with the page. Security headers are notes like:

"Only talk to me over a secure connection." (Strict-Transport-Security)
"Don't let other websites put my pages inside a frame." (frame-ancestors, or X-Frame-Options)
"Only run scripts from places I trust." (Content-Security-Policy)
"Don't guess what kind of file this is." (X-Content-Type-Options)
"Don't hand my full page address to other sites." (Referrer-Policy)

Visitors never see them. But they shut the door on whole kinds of attacks, like someone loading your login page inside their own site to trick people into typing a password. Builder tools usually don't add them for you, which is why almost every app we checked was missing them.

Check your app in one minute

The quickest way is to run a free scan on your live address. It checks for all six common security headers and tells you which ones are missing, in plain English.

If you'd rather look yourself:

Open your live app in Chrome (your real address, not a preview link).
Right-click the page and choose Inspect, then click the Network tab.
Reload the page and click the first row (your page's address).
Under Response Headers, look for the names in the list above.

If you can't find them, they aren't there.

Where the fix goes depends on your host

Headers are set by whatever serves your site, not by the app's code. So the first question is: where does your app live?

Netlify (including many Bolt apps). Netlify reads a small file called _headers. For a typical Bolt or Vite project it goes in the public folder so it ends up in the published site.

Vercel (common for Cursor and v0 apps). Vercel reads a headers section in a file called vercel.json at the top of your project. Next.js apps can also set headers in next.config.

Lovable's built-in publishing. As far as we can tell, Lovable's own hosting doesn't give you a setting for custom headers yet. You have two options. You can connect your project to GitHub and publish it on Netlify or Vercel, which both let you set headers. Or you can ask Lovable to add a Content-Security-Policy as a meta tag in index.html. That covers the script rule, but a meta tag can't stop other sites from framing your pages, so it's only a partial fix.

Not sure where your app is hosted? Ask your builder tool: "Where is this app deployed, and which file controls its response headers?"

The prompt

Paste this into your builder tool:

Add standard security headers to every page of my live site using my hosting platform's headers config (for example public/_headers on Netlify or vercel.json on Vercel). Add: Strict-Transport-Security: max-age=31536000; includeSubDomains, X-Content-Type-Options: nosniff, Referrer-Policy: strict-origin-when-cross-origin, X-Frame-Options: DENY, Permissions-Policy that turns off camera, microphone and location unless my app uses them, and a Content-Security-Policy. Build the Content-Security-Policy from what my app actually loads: list every outside service it uses (for example Supabase, Stripe, fonts, analytics) and allow only those. Include frame-ancestors 'none'. Start the Content-Security-Policy in Report-Only mode, then tell me in plain English what each header does and how to switch it to enforce once nothing breaks.

Test before and after

The one header that can break things is Content-Security-Policy. If it forgets a service your app uses, that part of the app stops working: a login button that does nothing, images that don't load, or a payment form that never shows up.

That's why the prompt starts it in "Report-Only" mode, which warns instead of blocking. After you publish:

Click through your whole app: sign up, log in, the main feature, and checkout if you have one.
In Chrome, right-click, choose Inspect, and open the Console tab. Copy any red messages that mention "Content Security Policy" back to your builder tool and ask it to allow those services.
Once a full click-through shows no warnings, ask your builder tool to switch it from Report-Only to the real header.
Run the scan again to confirm everything is in place.

The short version

Almost every vibe-coded app we checked was missing these headers. It's an easy fix, not a sign your app is broken.
Headers live in your host's settings: _headers on Netlify, vercel.json on Vercel.
Start Content-Security-Policy in Report-Only mode and click through your app before you enforce it.
Re-check after every big change, because a new service can need a new line.

For the rest of the pre-launch basics, see our launch checklist or the builder-specific checks. Want to know exactly which headers your app is missing? Throttle Bird has a free scan, with paid reports for deeper fixes.