Security Headers Explained: What Each One Stops and How to Set It

TL;DR: Security headers are rules your server sends the browser. They say what to allow, what to block, and what to refuse to render. Six of them cover most of the risk. Each has one job. They live in host config, so AI builders never set them. 20 minutes of copy-paste closes the gap on Vercel, Netlify, Render, or Cloudflare. Grade your app now with our free security headers checker, then set what is missing with the configs below.

Headers are the easy layer of app security. They do not stop an attacker who already has your database keys. They stop the cheap stuff: a stray script tag, your login page inside someone else's hidden frame, a browser guessing a file type it should not. Cheap attacks are the common ones. This guide gets security headers explained in plain terms. One job per header. The exact config for your host.

The six headers, one job each

• Content-Security-Policy tells the browser which sources may run scripts on your page — the main brake on script injection.
• Strict-Transport-Security forces every visit over HTTPS, even when a user types the old http:// address.
• X-Frame-Options stops other sites from loading your pages inside a hidden iframe to steal clicks.
• X-Content-Type-Options stops the browser guessing file types, so a script cannot pose as an image.
• Referrer-Policy controls how much of your URL leaks to the next site a user clicks through to.
• Permissions-Policy locks down camera, mic, and location, so a third-party widget cannot ask for them in your name.

Missing headers do not crash anything. The app keeps working. You lose the browser-side wall. That wall keeps one injected script from turning into a full account takeover. So the gap stays unseen until someone abuses it.

The header reference table

Five of the six are safe to copy as-is. Content-Security-Policy is the exception. Paste a strict CSP blind and it can block your own scripts. Make it loose with 'unsafe-inline' and you hand most of the shield back. Start with the other five today. Add CSP once you know your script sources. Tighten it in stages.

How to set them on your host

Headers are host config, not app logic. That is good news. You do not touch your code. You cannot break a feature by adding them.

Vercel

Add a headers block to vercel.json at the project root:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "Strict-Transport-Security",
          "value": "max-age=63072000; includeSubDomains; preload" },
        { "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin" },
        { "key": "Permissions-Policy",
          "value": "camera=(), microphone=(), geolocation=()" }
      ]
    }
  ]
}

Netlify

Create a _headers file at your publish root (or use a [[headers]] block in netlify.toml):

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=()

Render

For a static site, set headers in render.yaml. For a Node server, set them in your framework instead — the helmet middleware does all six in two lines.

services:
  - type: web
    name: my-app
    headers:
      - path: /*
        name: X-Frame-Options
        value: DENY
      - path: /*
        name: X-Content-Type-Options
        value: nosniff
      - path: /*
        name: Referrer-Policy
        value: strict-origin-when-cross-origin

Cloudflare

Use a Transform Rule (Rules › Transform Rules › Modify Response Header) to add each header at the edge — no code at all. Or do it in a small Worker:

export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set("X-Frame-Options", "DENY");
    headers.set("X-Content-Type-Options", "nosniff");
    headers.set("Referrer-Policy", "strict-origin-when-cross-origin");
    return new Response(response.body, { status: response.status, headers });
  }
};

The Cloudflare route works even when your origin host sets nothing. It is the fastest patch for a build you cannot change with ease.

How to check your headers

One command shows you everything:

curl -I https://yourapp.com

Read the response. Each of the six headers should be there. Or skip the terminal: paste your URL into our free security headers checker and get an A-to-F grade with the exact lines to add. It takes about 15 seconds and needs no signup.

Why AI-built apps ship without them

The reason is simple. Lovable, Bolt, Cursor, and v0 write app code. Headers live one layer down, in host config. No prompt says "prevent clickjacking," so the layer never gets built.

The outside data says this is the norm, not the exception. Symbiotic Security scanned 1,072 AI-built apps: 98% had at least one flaw, and 16% had critical issues. CMU's SusVibes study found 61% of AI-written code carried at least one security flaw. Our own scans of 100 AI-built apps average 42/100. It is the same pattern our vibe coding security guide shows on every platform.

And a missing header layer rarely travels alone. The same builds tend to skip rate limits, leave CORS wide open, and park session tokens where scripts can read them. That last one is why a strong CSP matters if you store JWTs in localStorage. Headers are the easy 15%. Fix them first, then check the rest.

Headers are not compliance

A perfect header grade does not make you compliant. GDPR governs how you handle personal data. The EU AI Act adds AI disclosure duties under Article 50. Those apply from August 2, 2026. Fines for that tier run up to €15 million or 3% of turnover. Both are law, not browser rules. Our Compliance Wing checks that side separately, and our GDPR guide for vibe-coded apps covers the data duties in plain terms.

What a full check costs

The header checker is free. So is the full scan. It scores your live URL out of 100 in about a minute, across security, reliability, performance, and monitoring. The complete Launch Readiness Audit is $499 one time — a branded report, every finding ranked with time estimates, a benchmark against 200+ audited apps, and a senior review of each item. Monitoring plans start at $149/mo. Headers will likely be your fastest fix on the list. They will not be the only one.

FAQ

What are security headers?

Security headers are short rules your server sends the browser with every response. They tell the browser what to allow, what to block, and what to refuse to render. They live in your host config, not in your app code.

Which security headers matter most?

Six cover most of the risk: Content-Security-Policy, Strict-Transport-Security, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, and Permissions-Policy. Start with the last five. They are safe as-is. Then add CSP with care.

Do security headers slow down my site?

No. They are a few extra bytes on each response. The browser does the work. There is no speed cost worth measuring.

Why does my AI-built app have no security headers?

Headers live in host config, and AI builders write app code. Nothing in a Lovable, Bolt, or Cursor build sets them for you. Across 100 AI-built apps we scanned, the average readiness score was 42/100, and missing headers were a constant finding.

How do I check my security headers?

Run curl -I against your domain and read the response, or paste your URL into our free security headers checker. It grades your app and lists the exact headers to add. It takes about 15 seconds.

Are security headers enough for compliance?

No. Headers stop browser-level attacks. GDPR and the EU AI Act are legal duties about data and AI disclosure. An app can have a perfect header grade and still fail both. They need separate checks.

Headers are the rare security fix with no trade-off. Twenty minutes. Zero code changes. Zero speed cost. Set the five safe ones today. Stage in CSP this week. Then run the free scan to see what else your build skipped.