Security Headers Every Web App Needs (CSP, HSTS, and Friends)
Security headers are instructions your server sends with every response telling the browser how to behave safely. They won't fix a real bug, but they shrink the blast radius when something goes wrong — and most are a few lines of config that AI assistants forget to add.
Content-Security-Policy (CSP)
The most powerful and the most finicky. CSP tells the browser which sources of scripts, styles, and images to trust, which is your strongest defense against cross-site scripting (XSS). Start in report-only mode so you can see what it would block before you enforce it, then tighten from there.
Strict-Transport-Security (HSTS)
HSTS forces browsers to use HTTPS for your domain, even if a user types `http://`. It closes the window where a network attacker could downgrade the connection. A sensible start is `max-age=31536000; includeSubDomains`. Only add `preload` once you're sure every subdomain is HTTPS.
X-Frame-Options / frame-ancestors
These stop other sites from embedding yours in an invisible iframe to trick users into clicking (clickjacking). Set `X-Frame-Options: DENY`, or better, use CSP's `frame-ancestors 'none'` (or a specific allow-list).
The quick wins
X-Content-Type-Options: nosniff stops the browser from guessing (and mis-running) content types. Referrer-Policy: strict-origin-when-cross-origin stops leaking full URLs to other sites. Permissions-Policy lets you switch off APIs you don't use, like camera or geolocation.
Most frameworks let you set all of these in one config block — `next.config.js` headers, a `vercel.json`, or your reverse proxy. A scan of your live URL will tell you which are missing.