Security headers are HTTP response headers that tell browsers how to behave when handling your site's content. They're one of the easiest ways to protect your site from common attacks, yet most websites are missing several of them.

The headers every site needs

1. Content-Security-Policy (CSP)

CSP controls which resources (scripts, styles, images) the browser is allowed to load. It's the most powerful defense against cross-site scripting (XSS).

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'

Start restrictive and loosen as needed. default-src 'self' only allows resources from your own domain.

2. X-Content-Type-Options

Prevents browsers from guessing (MIME sniffing) the content type of a file. Without it, a browser might execute a text file as JavaScript.

X-Content-Type-Options: nosniff

3. X-Frame-Options

Prevents your site from being embedded in an iframe on another domain. This blocks clickjacking attacks where an attacker overlays your site with invisible elements.

X-Frame-Options: DENY

4. Strict-Transport-Security (HSTS)

Forces browsers to only connect over HTTPS. Prevents SSL stripping attacks.

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

See our detailed HSTS guide for implementation steps.

5. Referrer-Policy

Controls how much URL information is sent when users navigate away from your site. strict-origin-when-cross-origin is a good default — it sends the origin (domain) but not the full path to other sites.

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

6. Permissions-Policy

Controls which browser features (camera, microphone, geolocation) your site can use. Disable features you don't need:

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

How to add security headers

Nginx

server {
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-Frame-Options "DENY" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
}

Vercel (next.config.ts)

const nextConfig = {
  async headers() {
    return [{
      source: "/(.*)",
      headers: [
        { key: "X-Content-Type-Options", value: "nosniff" },
        { key: "X-Frame-Options", value: "DENY" },
        { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
      ],
    }];
  },
};

Check your security headers

PageGrader checks for all of these headers as part of its 11 security checks. Scan your site to see which headers you're missing and how to add them.