Security Misconfiguration (Headers)

Telling the browser how to protect your users.

The idea

Modern web browsers have a suite of built-in security features designed to prevent Clickjacking, Cross-Site Scripting (XSS), and Man-in-the-Middle attacks. However, these features are often disabled by default to maintain backwards compatibility with the 1990s web. You have to explicitly instruct the browser to activate them by sending specific HTTP Response Headers.

Failing to include headers like `Content-Security-Policy` (CSP) or `X-Frame-Options` leaves your users vulnerable to attacks that the browser could have easily stopped.

Step 1: The attacker embeds a banking site inside an invisible iframe on their malicious site.

How it works (Helmet)

Applying security headers manually can be tedious. In modern frameworks, you should use middleware libraries (like `helmet` for Express/Node.js or `django.middleware.security.SecurityMiddleware`) to automatically inject sensible defaults into every response.

# VULNERABLE: Node.js Express without Helmet
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    // Missing X-Frame-Options allows clickjacking
    // Missing Strict-Transport-Security allows HTTPS downgrade
    res.send('Welcome to my secure bank');
});

# SECURE: Using Helmet middleware
const express = require('express');
const helmet = require('helmet');
const app = express();

# Automatically adds 11 different security headers
app.use(helmet()); 

app.get('/', (req, res) => {
    res.send('Welcome to my secure bank');
});

Watch out for