Security Headers and CSP

Security Headers: Telling the Browser How to Protect Your Application

Security headers are HTTP response headers that instruct the browser to enforce specific security policies. They provide a second layer of defense — even if an application has an XSS or clickjacking vulnerability, the browser may block the attack based on the header policies.

Content Security Policy (CSP)

CSP is the most powerful security header. It restricts which resources (scripts, styles, images, fonts, connections) the browser will load and execute for a given page. CSP is the most effective defense-in-depth against XSS.

Basic CSP:

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'

This policy:

• default-src 'self': Only load resources from the same origin by default
• script-src 'self': Only execute scripts from the same origin (blocks all inline scripts and external scripts)
• style-src 'self': Only load stylesheets from the same origin
• img-src 'self': Only load images from the same origin
• connect-src 'self': Only make AJAX/fetch requests to the same origin
• frame-ancestors 'none': Prevent the page from being embedded in frames (clickjacking protection)
• base-uri 'self': Restrict the base URL for relative links
• form-action 'self': Only submit forms to the same origin

CSP Directives:

Nonce-Based CSP:

To allow specific inline scripts while blocking all others, use a nonce (number used once):

Content-Security-Policy: script-src 'nonce-abc123'

<script nonce="abc123">
  // This script is allowed because it has the correct nonce
  console.log('trusted inline script');
</script>

<script>
  // This script is blocked — no nonce
  alert('injected script');
</script>

The nonce must be cryptographically random and regenerated on every request.

CSP Reporting:

CSP can report violations to a specified endpoint without blocking (report-only mode):

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /api/csp-report

This is useful for testing a CSP policy before enforcing it.

X-Frame-Options and frame-ancestors

Clickjacking is an attack where an attacker embeds a vulnerable page in a transparent iframe and tricks the user into clicking elements they cannot see.

X-Frame-Options:

X-Frame-Options: DENY

• DENY: The page cannot be embedded in any frame
• SAMEORIGIN: The page can only be embedded in frames from the same origin

frame-ancestors (CSP, modern replacement):

Content-Security-Policy: frame-ancestors 'none'

• 'none': No page can embed this page
• 'self': Only same-origin pages can embed
• https://example.com: Only the specified origin can embed

frame-ancestors is more flexible than X-Frame-Options and supports multiple origins. Use both for backward compatibility.

HTTP Strict Transport Security (HSTS)

HSTS forces the browser to upgrade every future request to HTTPS for a specified duration, preventing SSL stripping attacks:

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

• max-age=31536000: Remember the policy for one year (in seconds)
• includeSubDomains: Apply to all subdomains
• preload: Include in the browser's built-in HSTS list (requires submission to hstspreload.org)

Why HSTS matters: Without HSTS, an attacker on the same network can intercept the initial HTTP request and prevent the upgrade to HTTPS (SSL stripping). With HSTS, the browser automatically upgrades to HTTPS before any network request is made.

Other Important Security Headers

X-Content-Type-Options:

X-Content-Type-Options: nosniff

Prevents MIME type sniffing — the browser will not guess the content type, blocking attacks that rely on the browser interpreting a file as a different type.

Referrer-Policy:

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

Controls how much referrer information is included with requests. strict-origin-when-cross-origin sends the full URL for same-origin requests, only the origin for cross-origin requests, and no referrer for HTTPS-to-HTTP requests.

Permissions-Policy:

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

Restricts which browser features (camera, microphone, geolocation) the page can access.

Configuring Security Headers Across the Stack

Security headers can be set at multiple levels: the web server, the application framework, or a reverse proxy. The best practice is to set them at the outermost layer (reverse proxy or CDN) so they apply to all responses, including static files and error pages.

Setting Headers in Express.js

const express = require('express');
const helmet = require('helmet');
const app = express();

// Helmet sets multiple security headers by default
app.use(helmet());

// Customize CSP
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", (req, res) => `'nonce-${res.locals.nonce}'`],
    styleSrc: ["'self'", "'unsafe-inline'"], // unsafe-inline for styles is generally acceptable
    imgSrc: ["'self'", 'data:'],
    connectSrc: ["'self'"],
    frameAncestors: ["'none'"],
    baseUri: ["'self'"],
    formAction: ["'self'"]
  }
}));

// HSTS
app.use(helmet.hsts({
  maxAge: 31536000,
  includeSubDomains: true,
  preload: true
}));

// Generate nonce for each request
app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString('base64');
  next();
});

Setting Headers in Nginx

server {
    listen 443 ssl;
    server_name example.com;

    # CSP
    add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'none'; base-uri 'self'; form-action 'self'" always;

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

    # Clickjacking protection
    add_header X-Frame-Options "DENY" always;

    # MIME sniffing protection
    add_header X-Content-Type-Options "nosniff" always;

    # Referrer policy
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;

    # Remove server version header
    server_tokens off;
}

Setting Headers in Flask

from flask import Flask, render_template_string
from flask_talisman import Talisman

app = Flask(__name__)

# Talisman sets security headers
Talisman(app,
    content_security_policy={
        'default-src': "'self'",
        'script-src': "'self'",
        'style-src': ["'self'", "'unsafe-inline'"],
        'img-src': ["'self'", 'data:'],
        'frame-ancestors': "'none'",
    },
    force_https=True,
    strict_transport_security=True,
    strict_transport_security_max_age=31536000,
    strict_transport_security_include_subdomains=True,
    x_frame_options='DENY',
    x_content_type_options='nosniff',
)

Testing Security Headers

Use these tools to verify your security headers:

# Check headers with curl
curl -I https://example.com

# Online scanner
# https://securityheaders.com/

# Command-line tool
npx lighthouse https://example.com --view

Practice: Write a CSP Policy

Write a CSP policy for a web application that:

• Loads scripts only from its own CDN (cdn.example.com)
• Allows inline styles but not inline scripts
• Loads images from its own domain and data URIs
• Prevents the page from being embedded in frames
• Makes API calls only to api.example.com