Short answer: security headers are instructions your server sends with every page that tell the browser to block common attacks. Six of them do most of the work.
| Header | What it does | Safe starting value |
|---|---|---|
| Strict-Transport-Security | Forces HTTPS on future visits | max-age=31536000; includeSubDomains |
| Content-Security-Policy | Limits where scripts, styles and images can load from | Start with default-src 'self' and add the domains you use |
| X-Content-Type-Options | Stops the browser from guessing file types | nosniff |
| Referrer-Policy | Limits what URL details are sent to other sites | strict-origin-when-cross-origin |
| Permissions-Policy | Turns off browser features you don't use | camera=(), microphone=(), geolocation=() |
| Frame protection | Stops other sites from embedding yours in a frame | frame-ancestors 'self' in your CSP, or X-Frame-Options: DENY |
How to add them
Where you set headers depends on your hosting: a config file such as vercel.json or netlify.toml, your framework's middleware, or your CDN's settings. Ask your AI coding tool: "Add these security headers to every response," then paste the table above.
Test it
Run our free security header check before and after. Content-Security-Policy is the one most likely to break something, so add it last and test your app's pages after each change.
Headers are one layer
Good headers don't fix open database rules or leaked keys. Use our 10-minute checklist for the rest.