Home›Blog›HTTP Security Headers Every Developer Must Know

HTTP Security Headers Every Developer Must Know

A practical guide to CSP, HSTS, X-Frame-Options, and other HTTP headers that protect your site from common attacks.

2026-05-198 min readSecurity
HTTP Security Headers Every Developer Must Know

Why Security Headers Matter

TLS/HTTPS protects data in transit — but once a browser loads your site, additional headers determine whether JavaScript can be exploited, if your site can be embedded in iframes, and what resources the browser should trust. Security headers are your first line of defense.

The Essential Headers

Content-Security-Policy (CSP)

The most powerful. Controls what resources the browser will load and execute.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-rAnd0m123';
  style-src 'self' 'unsafe-inline';
  img-src 'self' https: data:;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';

Strict-Transport-Security (HSTS)

Forces browsers to use HTTPS for all future requests to your domain.

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

X-Frame-Options

Prevents clickjacking by controlling iframe embedding.

X-Frame-Options: DENY              # No framing at all
X-Frame-Options: SAMEORIGIN          # Only same origin allowed

X-Content-Type-Options

Stops browsers from MIME-sniffing a response away from the declared content-type.

X-Content-Type-Options: nosniff

Referrer-Policy

Controls how much referrer information is sent with outbound links.

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

Permissions-Policy

Controls browser features (camera, microphone, geolocation) that can be used.

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

Testing Your Headers

Use securityheaders.com to scan any URL and get a grade (A–F) with specific recommendations. Most sites can easily achieve an A rating.

Quick Win: Cloudflare

If you use Cloudflare, enable "Security Headers" in the Rules panel — adds all the major security headers automatically, no server config needed.

Common Mistakes

  • 'unsafe-inline' in CSP — defeats XSS protection
  • * in img-src or script-src — allows any origin
  • Missing frame-ancestors — allows clickjacking
  • Setting headers but not enforcing them server-side

Frequently Asked Questions

What's a good starter Content-Security-Policy?

Start strict and loosen as needed: Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'. Test in report-only mode first: Content-Security-Policy-Report-Only: ... — see violations without breaking the site.

Do I really need all these security headers?

The 5 essential ones are: Strict-Transport-Security, X-Content-Type-Options, X-Frame-Options (or CSP frame-ancestors), Referrer-Policy, and Content-Security-Policy. Together they block 80%+ of common web attacks. Use securityheaders.com to scan your site — anything below an A grade is leaving easy wins on the table.

How do I add security headers on Cloudflare Pages?

Create a _headers file in your project root with one header per line: /\n Strict-Transport-Security: max-age=31536000; includeSubDomains; preload\n X-Content-Type-Options: nosniff\n ... The wildcards and paths follow the same syntax as Netlify. Cloudflare Pages automatically applies these to all matching routes — no server config needed.

← Back to Blog
Copied!