Web Security Headers

Introducción

Los HTTP security headers le dicen al browser cómo comportarse al manejar el contenido de tu sitio. Previene clickjacking, XSS, MIME-type sniffing, downgrade attacks e information leakage. A continuación: cada security header principal, cómo configurarlos y cómo testear que funcionen.

Content-Security-Policy (CSP)

CSP es el security header más efectivo. Restringe qué recursos el browser puede cargar — scripts, styles, images, fonts, frames y connections.

CSP básico

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-ancestors 'none';

CSP con CDN e inline scripts

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.jsdelivr.net 'nonce-abc123'; style-src 'self' https://fonts.googleapis.com 'unsafe-hashes' 'sha256-abc123'; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://api.example.com; frame-ancestors 'none'; base-uri 'self'; form-action 'self';

CSP con nonces (recomendado para contenido dinámico)

<!-- El server genera un nonce único por request -->
<script nonce="abc123">
  console.log("This inline script is allowed");
</script>

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

CSP con hashes (para inline scripts estáticos)

# Generar SHA256 hash del contenido del script
echo -n "console.log('hello');" | openssl dgst -sha256 -binary | openssl base64 -A

Content-Security-Policy: script-src 'self' 'sha256-abc123='

Report-only mode (testing antes de enforcear)

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

Referencia de directivas CSP

Directiva	Controla
default-src	Fallback para todos los resource types
script-src	Sources de JavaScript
style-src	Sources de CSS
img-src	Sources de images
font-src	Sources de fonts
connect-src	XHR, fetch, WebSocket, EventSource
frame-src	Sources de iframe
frame-ancestors	Quién puede embeber esta page (anti-clickjacking)
object-src	Flash, Java, PDF embeds
media-src	Sources de audio y video
manifest-src	Web app manifest
worker-src	Web Workers
base-uri	Restricción del elemento <base>
form-action	Targets de form submission
upgrade-insecure-requests	Auto-upgrade HTTP a HTTPS

Strict-Transport-Security (HSTS)

Fuerza al browser a usar HTTPS para todos los futuros requests a este dominio.

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

• max-age=31536000 — 1 año en segundos
• includeSubDomains — aplica a todos los subdominios
• preload — opt-in a las HSTS preload lists de los browsers

HSTS preload list

Submitir tu dominio en hstspreload.org para ser incluido en la preload list bundled de Chrome. Requisitos:

• Certificado HTTPS válido
• Redirect HTTP a HTTPS en el mismo dominio
• HSTS header con max-age >= 31536000, includeSubDomains y preload
• Todos los subdominios sirven HTTPS

X-Frame-Options

Previene clickjacking controlando quién puede embeber tu page en un iframe.

X-Frame-Options: DENY

X-Frame-Options: SAMEORIGIN

Nota: frame-ancestors en CSP reemplaza este header. Usar CSP frame-ancestors para browsers modernos, pero mantener X-Frame-Options para soporte legacy.

X-Content-Type-Options

Previene MIME-type sniffing — el browser respeta el Content-Type declarado.

X-Content-Type-Options: nosniff

Referrer-Policy

Controla cuánta referrer information se envía con los requests.

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

Valor	Referrer enviado
no-referrer	Ninguno
no-referrer-when-downgrade	Full URL en HTTPS→HTTPS, nada en HTTPS→HTTP
same-origin	Full URL solo para same-origin requests
origin	Solo origin (sin path)
strict-origin	Solo origin, nada en downgrade
origin-when-cross-origin	Full URL same-origin, solo origin cross-origin
strict-origin-when-cross-origin	Full URL same-origin, solo origin cross-origin, nada en downgrade
unsafe-url	Full URL siempre (no recomendado)

Permissions-Policy

Controla qué features y APIs del browser la page puede usar (anteriormente Feature-Policy).

Permissions-Policy: camera=(), microphone=(), geolocation=(), payment=(self "https://trusted.com"), usb=()

Features comunes

Permissions-Policy: accelerometer=(), autoplay=(), camera=(), display-capture=(), encrypted-media=(), fullscreen=(self), geolocation=(), gyroscope=(), microphone=(), midi=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=()

Cross-Origin Resource Sharing (CORS)

CORS no es un solo header sino un set de headers que controlan cross-origin requests.

CORS simple

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

CORS con credentials

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Authorization

Nota: No puedes usar Access-Control-Allow-Origin: * con Access-Control-Allow-Credentials: true. Debes especificar el origin exacto.

Preflight requests

# El browser envía OPTIONS request primero
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

Cross-Origin Opener Policy (COOP)

Aísla tu page de otros origins para prevenir Spectre-style attacks.

Cross-Origin-Opener-Policy: same-origin

Cross-Origin Embedder Policy (COEP)

Controla qué cross-origin resources pueden ser cargados.

Cross-Origin-Embedder-Policy: require-corp

Cross-Origin Resource Policy (CORP)

Restringe quién puede embeber un resource.

Cross-Origin-Resource-Policy: same-origin

Configuración de Server

Nginx

server {
    listen 443 ssl http2;
    server_name example.com;

    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
    add_header X-Frame-Options "DENY" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
    add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'" always;
}

Apache

<IfModule mod_headers.c>
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
    Header always set X-Frame-Options "DENY"
    Header always set X-Content-Type-Options "nosniff"
    Header always set Referrer-Policy "strict-origin-when-cross-origin"
    Header always set Permissions-Policy "camera=(), microphone=(), geolocation=()"
    Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'"
</IfModule>

Express.js

const helmet = require("helmet");

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "https://cdn.jsdelivr.net"],
      styleSrc: ["'self'", "https://fonts.googleapis.com"],
      fontSrc: ["'self'", "https://fonts.gstatic.com"],
      imgSrc: ["'self'", "data:", "https:"],
      connectSrc: ["'self'", "https://api.example.com"],
      frameAncestors: ["'none'"],
      baseUri: ["'self'"],
      formAction: ["'self'"],
    },
  },
  strictTransportSecurity: {
    maxAge: 31536000,
    includeSubDomains: true,
    preload: true,
  },
}));

Testing

Scanners online

• securityheaders.com — califica de A+ a F
• observatory.mozilla.org — scanner de Mozilla
• csp-evaluator.withgoogle.com — evaluador de CSP

Browser DevTools

# Chrome DevTools → Security tab
# Muestra: TLS connection, security headers, insecure content warnings

# Chrome DevTools → Network tab → Response Headers
# Inspeccionar cada header en cualquier response

CSP violation reporting

// Server endpoint para recibir CSP violation reports
app.post("/csp-report", express.json({ type: "application/csp-report" }), (req, res) => {
  console.log("CSP violation:", req.body);
  res.status(204).end();
});

Pautas

• Empezar con CSP report-only — identificar violations antes de enforcear
• Usar nonces sobre hashes para contenido dinámico — hashes rompen cuando el contenido cambia
• Setear frame-ancestors 'none' — protección más fuerte contra clickjacking
• Siempre incluir upgrade-insecure-requests — auto-upgrade HTTP resources
• Usar strict-origin-when-cross-origin referrer policy — buen default de privacy
• Preload HSTS — proteger contra downgrade attacks en primera visita
• Testear con securityheaders.com — apuntar a rating A+
• Setear headers en todas las responses — usar always en Nginx/Apache para incluir error responses
• Restringir Permissions-Policy agresivamente — deshabilitar features que no usas
• Usar Helmet para Node.js — defaults sensatos con customización fácil
• Reviewar CSP mensualmente — nuevos third-party scripts pueden romper bajo strict CSP
• Separar CORS por ruta — no setear global Access-Control-Allow-Origin: *

Errores Comunes

• Usar unsafe-inline en CSP — derrota la protección XSS enteramente
• Setear Access-Control-Allow-Origin: * con credentials — los browsers rechazan esto
• No incluir always en Nginx add_header — las error pages pierden security headers
• Usar HSTS preload sin testear — no se puede deshacer fácilmente (toma meses)
• Setear X-Frame-Options: ALLOW-FROM — deprecado, usar CSP frame-ancestors en su lugar
• No testear CSP antes de enforcear — rompe pages de producción silenciosamente
• Olvidar object-src 'none' — permite Flash/Java embeds
• No setear headers en API responses — las APIs necesitan security headers también
• Usar unsafe-eval en CSP — requerido por algunos frameworks pero debilita security
• No monitorear CSP reports — las violations pasan desapercibidas en producción

See Also

• Content Security Policy: CSP Headers, Nonces, Hashes
• CORS Security: Origins, Headers, Preflight, Credentials
• OWASP Top 10: Explained with Mitigations
• Complete Guide to API Security
• Complete Guide to GraphQL Security