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.

What is six headers, one job each?

Missing and misconfigured security headers are a well-documented attack surface. OWASP A05:2021 — Security Misconfiguration covers weak CORS policies, permissive header defaults, and other configuration gaps. Mozilla’s Content-Security-Policy reference documents the recommended header directives and syntax.

Launch Ready Code benchmark: most vibe-coded apps are missing at least one recommended HTTP security header at launch — Content-Security-Policy and X-Frame-Options are the two most frequently absent. — LRC scan data, 2026

Launch Ready Code has scanned 700+ applications. Most ship with at least one critical finding, and the average Launch Readiness Score is ~44 out of 100 — LRC scan data, 2026.

• 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.

What is 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.

What should you know about 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=()" }
      ]
    }
  ]
}

What should you know about 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=()

What should you know about 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

What should you know about 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 the AI-built apps average ~44/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.

What should you know about 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 the AI-built apps we've scanned, the average readiness score was ~44/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.