Web Security Headers: CSP, HSTS, CORS, and More

Content-Security-Policy (CSP)

CSP tells browsers which sources of content are allowed. It's the strongest defence against XSS.

# Content-Security-Policy controls:
# - Scripts: where JS can be loaded from
# - Styles: where CSS can be loaded from
# - Images, fonts, media, frames, etc.

# Example CSP header:
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.googleapis.com;
    frame-ancestors 'none';

# Key directives:
# default-src: fallback for unspecified directives
# script-src: allowed JS sources
# 'self': only from same origin
# 'none': block completely
# 'unsafe-inline': allow inline scripts (weakens XSS protection)
# 'nonce-abc123': allow specific inline script with matching nonce

HSTS and X-Frame-Options

HSTS forces HTTPS. X-Frame-Options prevents clickjacking.

# HTTP Strict Transport Security (HSTS):
# Forces browser to only use HTTPS, even if user types http://
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

# max-age: seconds browser caches the HSTS policy
# includeSubDomains: applies to all subdomains
# preload: included in browser's built-in HSTS list

# X-Frame-Options (prevents clickjacking):
X-Frame-Options: DENY          # page can't be in ANY frame
X-Frame-Options: SAMEORIGIN    # only frames from same origin

# Modern replacement (CSP):
Content-Security-Policy: frame-ancestors 'none';
# or: frame-ancestors 'self';

CORS (Cross-Origin Resource Sharing)

CORS controls which origins can make cross-site requests to your API.

# Same-origin policy: browsers block cross-origin requests by default
# CORS: server opts in to allow specific origins

# Simple CORS (GET, HEAD, POST with specific content types):
# Browser sends request, server responds with CORS headers
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Origin: *  # allow all (risky for authenticated requests)

# Preflight (for complex requests: PUT, DELETE, custom headers):
# Browser sends OPTIONS request first
# Server responds with what's allowed

Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true  # needed for cookies/auth

# NEVER use * with credentials=true — browser blocks it

X-Content-Type-Options and other headers

A few more headers that should be on every production site.

# X-Content-Type-Options:
# Prevents browsers from MIME-sniffing content types
X-Content-Type-Options: nosniff
# Without this, browser might execute a text file as JavaScript

# Referrer-Policy:
# Controls what's in the Referer header
Referrer-Policy: strict-origin-when-cross-origin
# Full URL for same-origin, origin only for cross-origin

# Permissions-Policy (formerly Feature-Policy):
# Restrict browser features
Permissions-Policy: geolocation=(), microphone=(), camera=()

# Cache-Control for sensitive pages:
Cache-Control: no-store, max-age=0
# Prevents caching of sensitive responses (banking, admin pages)

# Security header grade check: securityheaders.com

Exam tip

The most important security headers in order: HSTS (force HTTPS), CSP (prevent XSS), X-Frame-Options (prevent clickjacking), X-Content-Type-Options (prevent MIME sniffing). Every security exam has at least one "which header prevents X?" question.