← Blog

Security Headers Guide: HSTS, CSP, and X-Frame-Options Explained

3 min read
#security#headers#hsts#csp

HTTP security headers are a subset of HTTP response headers that tell a browser how to behave when handling your website's content. By implementing just a few lines of configuration, you can protect your users from 90% of common client-side vulnerabilities like Cross-Site Scripting (XSS), Clickjacking, and Protocol Downgrades.

Security headers are the "invisible shield" of your website. They cost nothing to implement but provide immense value in protecting your data and your users.

Headers are 2 of the 8 checks in the website security checklist, next to the HTTPS redirect, the certificate and DNSSEC.

1. Strict-Transport-Security (HSTS)

HSTS tells the browser that the website should only be accessed using HTTPS. Even if a user types http://, the browser will automatically convert it to https:// before the request ever leaves the user's computer.

Why it matters

It prevents "Man-in-the-Middle" attacks where an attacker intercepts an unencrypted HTTP connection.

How to implement (Nginx)

nginx
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

2. Content-Security-Policy (CSP)

CSP is the most powerful security header. It allows you to define an "allowlist" of trusted sources for scripts, styles, and images.

Why it matters

It effectively kills most Cross-Site Scripting (XSS) attacks by refusing to execute any script that doesn't come from a trusted source.

The same header carries upgrade-insecure-requests, which rewrites every http:// resource request on an HTTPS page before it leaves the browser. The walkthrough to fix mixed content warnings covers that directive and the 2 methods that reach what it cannot.

Example Policy

Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.google.com; img-src 'self' data:;

3. X-Frame-Options

This header tells the browser whether it is allowed to render your page in a <frame>, <iframe>, or <object>.

Why it matters

It prevents Clickjacking attacks, where an attacker tricks a user into clicking something on your site by overlaying it with a transparent layer.

X-Frame-Options: DENY

4. X-Content-Type-Options

This header stops the browser from "sniffing" the content type of a file and trying to guess what it is.

Why it matters

It prevents an attacker from uploading a malicious script disguised as an image and having the browser execute it.

X-Content-Type-Options: nosniff

5. Referrer-Policy

This header controls how much information the browser includes in the Referer header when a user clicks a link that leaves your site.

Why it matters

It prevents leaking sensitive information (like session IDs in the URL) to third-party websites.

Referrer-Policy: strict-origin-when-cross-origin

How to Verify Your Headers

You can check your website's security header score instantly using our free tool.

Audit your security headers now

Conclusion

Implementing security headers is one of the highest-ROI tasks a developer can perform. It takes less than 10 minutes to configure but significantly hardens your website against modern web attacks.