What are security headers?

Security headers are HTTP response headers that tell browsers how to behave when handling your site's content. They control things like which scripts can run, whether your site can be framed, and whether the browser should enforce HTTPS.

How many security headers do I need?

At minimum, you should have Strict-Transport-Security, Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, and Referrer-Policy. That covers the most common attack vectors.

How do I test my security headers?

Use Mozilla Observatory (observatory.mozilla.org) or SecurityHeaders.com. They scan your site and grade your headers.

The Complete Guide to Security Headers

The short version

Security headers are HTTP response headers that instruct browsers to enable (or restrict) certain behaviors. They're your first line of defense against a bunch of common attacks: XSS, clickjacking, protocol downgrade, MIME sniffing, and more.

The best part? They're just configuration. No code changes needed. You add them to your server config, CDN settings, or framework middleware, and they protect every page on your site.

The essential headers

Strict-Transport-Security (HSTS)

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

Forces HTTPS. Prevents protocol downgrade attacks. Learn more about HSTS.

Content-Security-Policy (CSP)

Content-Security-Policy: default-src 'self'; script-src 'self'

Controls which resources can load on your page. Your strongest defense against XSS. Learn more about CSP.

X-Frame-Options

X-Frame-Options: DENY

Prevents your site from being embedded in iframes. Blocks clickjacking attacks.

X-Content-Type-Options

X-Content-Type-Options: nosniff

Stops browsers from guessing (sniffing) the content type of a response. Without this, a browser might interpret a JSON response as HTML and execute any scripts in it. MDN documentation.

Referrer-Policy

Referrer-Policy: strict-origin-when-cross-origin

Controls how much URL information is shared when navigating to other sites. Learn more about Referrer-Policy.

Permissions-Policy

Permissions-Policy: camera=(), microphone=(), geolocation=()

Controls which browser features your site can use. Setting camera=() means your site (and any embedded iframes) cannot access the camera. MDN documentation.

Headers that are less critical but still useful

Cross-Origin-Opener-Policy (COOP)

Cross-Origin-Opener-Policy: same-origin

Isolates your browsing context from cross-origin windows. Prevents attacks that exploit window.opener.

Cross-Origin-Resource-Policy (CORP)

Cross-Origin-Resource-Policy: same-origin

Prevents other sites from loading your resources (images, scripts, etc.) in certain contexts.

How to test your headers

Mozilla Observatory: Scores your site and gives specific recommendations. It's maintained by Mozilla and references their own security standards.

OWASP Secure Headers Project: A comprehensive reference for all security headers, including recommended values.

Browser DevTools: Open the Network tab, click on any request, and look at the Response Headers section.

How to add headers

Vercel (vercel.json):

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

Netlify (_headers):

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Strict-Transport-Security: max-age=31536000; includeSubDomains

Cloudflare: You can set headers via Transform Rules in the Cloudflare dashboard or in Workers.

The vibe coding gap

Most code generators and starter templates ship zero security headers. Your framework might handle some things at the code level (like React escaping output), but security headers are server configuration. If nobody configured them, they're not there.

Five minutes of configuration closes a whole category of attack vectors. There's no good reason to skip it.

Check your site

Want to know if your site has this issue? Scan it now and find out in 60 seconds.