Security Headers

Los headers de seguridad HTTP protegen tu aplicación contra ataques comunes como XSS, clickjacking y MIME sniffing. Se configuran una vez y protegen toda tu app.

Configuración en next.config.ts

Agrega los headers en tu archivo next.config.ts:

next.config.ts

import type { NextConfig } from "next";

const securityHeaders = [
  {
    key: "Strict-Transport-Security",
    value: "max-age=63072000; includeSubDomains; preload",
  },
  {
    key: "X-Frame-Options",
    value: "DENY",
  },
  {
    key: "X-Content-Type-Options",
    value: "nosniff",
  },
  {
    key: "Referrer-Policy",
    value: "strict-origin-when-cross-origin",
  },
  {
    key: "X-DNS-Prefetch-Control",
    value: "on",
  },
  {
    key: "Permissions-Policy",
    value: "camera=(), microphone=(), geolocation=()",
  },
];

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: securityHeaders,
      },
    ];
  },
  // ... resto de tu configuración
};

export default nextConfig;

Que hace cada header

Strict-Transport-Security (HSTS)

Fuerza HTTPS en todas las conexiónes. El navegador rechaza cualquier conexión HTTP durante 2 anos.

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

max-age=63072000: 2 anos en segundos
includeSubDomains: aplica a todos los subdominios
preload: permite inclusion en la lista HSTS preload de los navegadores

X-Frame-Options

Previene clickjacking. Tu app no puede ser embebida en un iframe de otro sitio.

X-Frame-Options: DENY

X-Content-Type-Options

Evita que el navegador intente adivinar el tipo MIME de un archivo. Previene ataques de MIME sniffing.

X-Content-Type-Options: nosniff

Referrer-Policy

Controla cuanta información de referencia se envia al navegar a otros sitios.

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

Envia el origen completo en peticiones same-origin, solo el dominio en cross-origin, y nada al ir de HTTPS a HTTP.

Permissions-Policy

Deshabilita APIs del navegador que no necesitas.

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

Content-Security-Policy (avanzado)

Si quieres una capa extra de protección contra XSS, puedes agregar una Content-Security-Policy. Ten en cuenta que es mas compleja de configurar:

{
  key: "Content-Security-Policy",
  value: [
    "default-src 'self'",
    "script-src 'self' 'unsafe-eval' 'unsafe-inline' https://js.stripe.com",
    "style-src 'self' 'unsafe-inline'",
    "img-src 'self' data: https:",
    "font-src 'self'",
    "frame-src https://js.stripe.com https://hooks.stripe.com",
    "connect-src 'self' https://api.stripe.com https://api.resend.com",
  ].join("; "),
}

La CSP requiere ajustes segun los servicios que uses. Prueba a fondo despues de agregarla. Stripe, analytics y otros servicios externos necesitan dominios permitidos.

Verificar headers

Despues de hacer deploy, verifica tus headers:

# Verificar headers en tu sitio
curl -I https://tuapp.com

También puedes usar securityheaders.com para un analisis completo y una calificacion de A+ a F.

Security Headers

On this page