HTTPS & Security Headers

HTTPS and security headers are the foundation of web security. Without them, everything else is pointless.

HTTPS

HTTPS encrypts traffic between your users and your server. Without it, anyone on the same WiFi can read passwords, cookies, and personal data.

Security headers

Security headers tell the browser how to handle your site. They prevent common attacks by limiting what can happen on your page.

Essential headers

These headers should be on every site:

Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin

What they do:

• Strict-Transport-Security — forces HTTPS for a year
• X-Content-Type-Options — prevents browsers from guessing file types (prevents some attacks)
• X-Frame-Options — prevents your site from being embedded in iframes (prevents clickjacking)
• Referrer-Policy — controls what URL info is sent when clicking links

Content Security Policy (CSP)

CSP is the most powerful security header. It tells the browser exactly which scripts, styles, and resources are allowed to load.

A basic CSP:

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'

This says: "Only load resources from my own domain. Allow inline styles."

Where to add headers

Most hosting platforms let you add headers in configuration:

• Vercel: vercel.json headers section
• Netlify: _headers file or netlify.toml
• Next.js: next.config.ts headers function
• Cloudflare Pages: _headers file

Quick checklist