← Back to Blog
Security 📅 14 Apr 2026 ⏱ 14 min read
🔒

HTTP Security Headers Every Web Developer Must Implement

CSP, HSTS, X-Content-Type-Options, Permissions-Policy, Referrer-Policy, and cache control — practical examples ready to deploy today.

Why Headers Are Your Fastest Security Win

HTTP security headers substantially improve your site's security posture with minimal effort — often just a few lines of server or CDN configuration. This guide covers every important header, what it protects against, and exact production values.

Content-Security-Policy

CSP is your primary defence against XSS. It tells browsers which sources are authorised to load resources. Resources from unlisted sources are blocked before execution.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-{random-per-request}';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' https://fonts.gstatic.com;
  frame-ancestors 'none';
  base-uri 'self';
  upgrade-insecure-requests;

Tip: Always deploy via Content-Security-Policy-Report-Only first to detect breakage before switching to enforcement mode.

Strict-Transport-Security

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

HSTS enforces HTTPS even if users type http:// — preventing SSL stripping attacks. The preload directive allows submission to browser preload lists, giving HTTPS enforcement to first-time visitors before they've received the header.

X-Content-Type-Options

X-Content-Type-Options: nosniff

Prevents MIME-type sniffing — browsers guessing file types from content rather than Content-Type. Without this, an uploaded file declared as text/plain but containing JavaScript could be executed. Set on every response.

Permissions-Policy

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

Restricts which powerful browser APIs your site and embedded third-party scripts can access. Even if XSS occurs, it cannot access the camera if Permissions-Policy has blocked it at the browser level.

Cache-Control Strategy

# Versioned static assets (hash in filename)
Cache-Control: public, max-age=31536000, immutable

# HTML — always revalidate
Cache-Control: no-cache

# Private authenticated responses
Cache-Control: private, no-store

# Public API with background refresh
Cache-Control: public, max-age=60, stale-while-revalidate=600

Referrer-Policy

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

Sends full URL as referrer for same-origin requests but only the bare origin cross-origin — preventing sensitive paths, query parameters, or session tokens from leaking to third-party services via the Referer header.

Testing

Run your site through securityheaders.com after deployment — it grades your headers A through F with specific remediation advice. Also check the Mozilla Observatory at observatory.mozilla.org.

Security headers are the highest-return security investment for most websites. An afternoon of server configuration provides protection equivalent to weeks of application-level security work.

Share: 𝕏 Twitter in LinkedIn
← Previous
Mastering CSS Flexbox: Every Property Explained
Next →
Git Workflow Best Practices for Professional Development Teams