HTTP Security Headers: Complete Configuration Guide & Best Practices

Modern web security relies heavily on defense-in-depth. While clean application code and robust server authentication are crucial, HTTP Security Headers provide an essential browser-enforced security barrier. With just a few lines in your Nginx, Cloudflare, Apache, or Next.js configuration, you can neutralize Cross-Site Scripting (XSS), Clickjacking, code injection, and insecure protocol downgrades.

This comprehensive guide details the essential HTTP security headers, explains how each one operates inside client browsers, and provides copy-paste production configurations to achieve an A+ Security Rating.

The Essential HTTP Security Headers Explained

1. Strict-Transport-Security (HSTS)

HSTS forces modern web browsers to communicate exclusively over encrypted HTTPS connections, completely preventing SSL stripping and protocol downgrade attacks.

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

• max-age=63072000 — Caches the policy in the browser for two years (in seconds).
• includeSubDomains — Enforces HTTPS across all existing and future subdomains.
• preload — Consents to submission into the global browser HSTS preload list (Chrome, Firefox, Safari, Edge).

2. Content-Security-Policy (CSP)

CSP is the single most powerful defense against Cross-Site Scripting (XSS) and data exfiltration. It defines an explicit allowlist of origins from which scripts, stylesheets, images, and network connections can be loaded.

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; frame-ancestors 'none';

You can evaluate and refine your CSP syntax using our CSP Evaluator.

3. X-Content-Type-Options

Prevents browsers from MIME-sniffing a response away from the declared Content-Type. This stops malicious user uploads (e.g. an image containing executable JavaScript) from being executed in the browser context.

X-Content-Type-Options: nosniff

4. X-Frame-Options

Controls whether your website can be embedded in an <iframe>, <frame>, or <object>. This stops Clickjacking attacks where attackers place transparent layers over your UI to trick users into unauthorized actions.

X-Frame-Options: DENY

Use DENY to prevent all embedding, or SAMEORIGIN to permit embedding only on your own domain.

5. Referrer-Policy

Governs how much referrer information (URL paths, query strings, authentication tokens) is sent in the Referer header when navigating to external websites.

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

6. Permissions-Policy (Formerly Feature-Policy)

Allows domain administrators to restrict browser features and hardware APIs like camera, microphone, geolocation, and payment gateways.

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

Production Server Configuration Snippets

Nginx Configuration (nginx.conf)

# Add security headers inside the server block
server {
    listen 443 ssl http2;
    server_name example.com;

    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
    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;
    add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), payment=()" always;
    add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;" always;
}

Apache Configuration (.htaccess or httpd.conf)

<IfModule mod_headers.c>
    Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"
    Header always set X-Content-Type-Options "nosniff"
    Header always set X-Frame-Options "DENY"
    Header always set Referrer-Policy "strict-origin-when-cross-origin"
    Header always set Permissions-Policy "camera=(), microphone=(), geolocation=(), payment=()"
    Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';"
</IfModule>

Next.js (next.config.js / next.config.mjs)

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

Cloudflare Transform Rules

If you use Cloudflare as your reverse proxy or CDN, you can add HTTP Response Headers at the edge without touching server code:

1. Navigate to Rules > Transform Rules > Modify Response Header in your Cloudflare dashboard.
2. Create a rule matching all incoming traffic (ssl == true).
3. Set the static headers: Strict-Transport-Security, X-Content-Type-Options, and X-Frame-Options.

How to Audit Your Website

Once you apply these configurations, test your live domain with our Security Headers Analyzer and verify SSL certificate health with our SSL Checker. You will receive an instant grade and itemized breakdown of any missing directives.