How to Add Security Headers to Protect Your Website and Visitors
Security headers are a few lines of configuration that block clickjacking, MIME sniffing, and script injection. Here is which ones to add and how.
Reviewed by Jacob Rhinehart for Strelva's co-founder; products and operations lead responsibilities.
Security headers are instructions your server sends with every page that tell the browser how to behave safely. They cost nothing, take minutes to add, and close off whole categories of attack. Security scanners and search tools also read them as a signal that your site is well maintained.
The four that matter
- X-Content-Type-Options: nosniff stops the browser guessing file types, which blocks a malicious file disguised as an image from running. It is completely safe to add.
- X-Frame-Options: SAMEORIGIN stops other sites embedding yours in a hidden iframe to trick users into clicking (clickjacking). SAMEORIGIN still lets your own previews and widgets work.
- Referrer-Policy: strict-origin-when-cross-origin controls how much of your URL is shared when a visitor clicks out to another site. This is also the modern browser default.
- Content-Security-Policy (CSP) is the most powerful and the most delicate: it lists exactly which sources of scripts, styles, and images are allowed, blocking injected scripts.
Step by step
- Add the first three. Set X-Content-Type-Options, X-Frame-Options, and Referrer-Policy. These almost never break anything, so add them and move on.
- Find where headers live. On a server you control, that is the host config, a vercel.json, or a _headers file. On a locked-down site builder, you add them through a CDN such as Cloudflare sitting in front of the site.
- Introduce CSP in report-only mode first. Use Content-Security-Policy-Report-Only so violations are logged but nothing is blocked. Browse your whole site and watch the console.
- Whitelist what you actually use. Add the sources your real tools need, such as your analytics provider, web fonts, and any embedded video or maps.
- Switch CSP to enforcing. Once the console is clean in report-only mode, rename the header to Content-Security-Policy.
- Verify. Run your URL through a security-headers scanner and aim for at least a B (all four except a strict CSP) or an A with CSP.
A realistic standard
If CSP feels like too much, the other three headers alone are a meaningful upgrade and carry almost no risk. Never enforce a strict CSP on a live site without testing in report-only first; an over-tight policy will break your own scripts.
Frequently asked
What business owners ask next.
Will adding security headers break my site?
The first three (nosniff, X-Frame-Options SAMEORIGIN, Referrer-Policy) are safe in nearly every case. Content-Security-Policy can break things if set too tightly, which is why you always test it in report-only mode before enforcing.
My platform won't let me set custom headers. What are my options?
Some hosted builders do not expose header settings. The standard workaround is to route your domain through a CDN such as Cloudflare and add the headers there with response-header rules.
How do I know the headers are working?
Open the browser developer tools, go to the Network tab, click your page request, and read the Response Headers. Or run your URL through a free security-headers scanner for a letter grade.