Todas las guías
Severidad AltaEncabezados de seguridad

Content-Security-Policy (CSP): qué es y cómo agregarla

Content-Security-Policy (CSP) es un encabezado de respuesta HTTP que le dice al navegador qué fuentes de scripts, estilos y otros contenidos puede cargar y ejecutar. Una buena CSP es una de las defensas más fuertes contra el cross-site scripting (XSS).

Qué es

La CSP es una lista de permitidos que aplica el navegador. Cuando tu servidor envía un encabezado Content-Security-Policy, el navegador se niega a cargar o ejecutar cualquier cosa que la política no permita explícitamente: scripts inline, dominios de terceros, eval(), etc.

Una política es una lista de directivas. Por ejemplo, script-src 'self' significa "solo ejecuta JavaScript servido desde mi propio origen", mientras que object-src 'none' bloquea por completo los plugins heredados.

Por qué importa

Sin CSP, cualquier bug de inyección de HTML o XSS le permite a un atacante ejecutar JavaScript arbitrario en los navegadores de tus usuarios: robar sesiones, reescribir la página o exfiltrar datos.

Una CSP débil es casi tan mala como no tener ninguna. 'unsafe-inline' vuelve a permitir los scripts inline de los que dependen los atacantes, y un origen con comodín como script-src * deja cargar scripts desde cualquier parte, anulando su propósito.

Cómo solucionarlo

Agrega una política base en Next.js

Define el encabezado en next.config.js para que se aplique a todas las respuestas. Empieza estricto y afloja solo donde haga falta.

// next.config.js
const csp = [
  "default-src 'self'",
  "script-src 'self'",
  "style-src 'self' 'unsafe-inline'",
  "img-src 'self' data:",
  "base-uri 'none'",
  "frame-ancestors 'none'",
  "object-src 'none'",
].join("; ");

module.exports = {
  async headers() {
    return [{ source: "/:path*", headers: [{ key: "Content-Security-Policy", value: csp }] }];
  },
};
Reemplaza unsafe-inline con nonces

Si necesitas scripts inline, genera un nonce por solicitud y agrégalo tanto a la etiqueta script como a la política (script-src 'self' 'nonce-<value>') en lugar de usar 'unsafe-inline'.

Define siempre las directivas de refuerzo

base-uri 'none', frame-ancestors 'none' y object-src 'none' cierran elusiones comunes (inyección de etiqueta base, clickjacking e incrustación de plugins) y son valores predeterminados seguros para la mayoría de las apps.

Preguntas frecuentes

¿Una CSP hace más lento mi sitio?

No. La CSP es solo un encabezado que el navegador evalúa; no agrega latencia medible. El costo real es el trabajo de ingeniería para eliminar los scripts inline.

¿Cuál es la diferencia entre Content-Security-Policy y X-Frame-Options?

X-Frame-Options solo controla el enmarcado (clickjacking). La directiva frame-ancestors de la CSP lo reemplaza, y la CSP además gobierna scripts, estilos, imágenes y más.

¿Tu app está afectada?

AppSafe verifica este y docenas de problemas más en un solo escaneo gratis.

Escanear mi app gratis

Guías relacionadas

HTTP Strict Transport Security (HSTS) explicado

Obliga a que cada conexión use HTTPS, incluso la primera.

Las marcas de cookies Secure, HttpOnly y SameSite

Tres marcas que evitan que te roben las cookies de sesión.

Por qué tu sitio necesita una redirección de HTTP a HTTPS

No dejes abierta la puerta insegura.