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

HTTP security headers are your website's first line of defense against attacks. They tell browsers how to handle your content — which scripts can run, where your site can be embedded, and how data should be transmitted.

Most websites score D or F on security headers. This guide explains each header and how to fix your grade.

Check Your Current Grade

Start by running the Security Headers Grade tool. It evaluates six critical headers and gives you a letter grade from A+ to F.

The Six Essential Headers

1. Content-Security-Policy (CSP)

What it does: Prevents XSS attacks by specifying which sources can load scripts, styles, images, and other resources.

Why it matters: XSS is the #1 web attack vector. A strong CSP is the most effective defense.

Quick start:

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

2. Strict-Transport-Security (HSTS)

What it does: Forces all connections to use HTTPS, even if a user types http://.

Implementation:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

First verify your SSL certificate is valid before enabling HSTS.

3. X-Content-Type-Options

What it does: Prevents browsers from MIME-type sniffing, which can turn harmless files into executable content.

Implementation: X-Content-Type-Options: nosniff

4. X-Frame-Options

What it does: Prevents your site from being embedded in iframes, blocking clickjacking attacks.

Implementation: X-Frame-Options: DENY or X-Frame-Options: SAMEORIGIN

5. Referrer-Policy

What it does: Controls how much referrer information is sent with requests.

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

6. Permissions-Policy

What it does: Restricts which browser APIs (camera, microphone, geolocation) your site can access.

Implementation:

Permissions-Policy: camera=(), microphone=(), geolocation=()

How Security Headers Affect SEO

Google doesn't directly use security headers as a ranking factor. However:

• Hacked sites get demoted. Missing headers increase your attack surface.
• Chrome security warnings reduce click-through rates from search results.
• Core Web Vitals can be affected by CSP-related render blocking.
• Trust signals matter for E-E-A-T — a secure site demonstrates competence.

Implementation by Platform

• Cloudflare: Transform Rules → HTTP Response Headers
• Vercel/Next.js: next.config.js → headers() function
• Nginx: add_header directives in server block
• Apache: .htaccess → Header set directives
• AWS CloudFront: Response headers policy

After Implementation

Run the Security Headers Grade tool again to verify your grade improved. Aim for A or A+. Then check your full website security posture with a comprehensive audit.