What are HTTP security headers and why do they matter

HTTP Security Headers

Security headers are HTTP response headers that instruct the browser to restrict dangerous behaviors. They are your first line of defense and take minutes to implement.

The Six Headers You Must Set

Content-Security-Policy (CSP) tells the browser which sources are allowed to load scripts, styles, and media. A strict CSP stops most XSS attacks even after an injection flaw exists in your code.

Strict-Transport-Security (HSTS) forces the browser to use HTTPS for your domain. Never include includeSubDomains without testing all subdomains first.

X-Frame-Options prevents your page from being embedded in an iframe, blocking clickjacking. Use DENY unless you need framing from a specific origin.

X-Content-Type-Options: nosniff stops browsers from MIME-sniffing a response. Without it, an attacker can serve a text file that the browser executes as JavaScript.

Referrer-Policy: strict-origin-when-cross-origin limits URL leakage in the Referer header to cross-origin requests.

Permissions-Policy disables browser features (camera, microphone, geolocation) your app does not need.

Quick Implementation with Helmet.js

const helmet = require('helmet');
app.use(helmet()); // Sets all six headers with secure defaults

// Override CSP for your specific needs
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'"],
    styleSrc: ["'self'", "'unsafe-inline'"]
  }
}));

Run your deployed app through securityheaders.com to verify configuration. Aim for an A or A+ score.