Política de seguridad de contenido para aplicaciones React

La política de seguridad de contenido (CSP) es una cabecera de respuesta HTTP que indica al navegador qué fuentes de contenido son de confianza. Al declarar exactamente qué scripts, estilos, imágenes y fuentes pueden cargarse, CSP evita que se ejecute contenido malicioso inyectado, incluso si una vulnerabilidad XSS permite al atacante inyectar HTML en la página.

default-src 'self' establece la base: todos los tipos de recursos (scripts, estilos, imágenes, fuentes y marcos) solo pueden cargarse desde el mismo origen. script-src 'self' restringe la carga de scripts al mismo origen y bloquea los scripts de CDN externas, a menos que se incluyan explícitamente. Estas dos directivas juntas forman la base de una CSP restrictiva.

eval() convierte una cadena en código ejecutable en tiempo de ejecución, justo lo que necesitan las cargas útiles de XSS. Una CSP con script-src 'self' (sin 'unsafe-eval') bloquea eval() y funciones relacionadas como new Function() y setTimeout(string). Esto elimina una clase importante de ejecución de cargas útiles XSS.

'strict-dynamic' en script-src concede confianza a los scripts cargados por scripts en los que ya se confía. Esto permite los patrones de carga dinámica de scripts que utilizan los bundlers sin tener que incluir en una lista de permitidos cada URL de CDN. Un script de confianza puede cargar scripts adicionales, y estos heredan la confianza.

Si su aplicación necesita un script inline específico (como un fragmento de inicialización de analíticas), puede calcular su hash SHA-256 y añadir 'sha256-base64hash' a script-src. Solo se permite ejecutar inline los scripts que coincidan exactamente con ese hash. Cualquier script inyectado por un atacante tendrá un hash diferente y se bloqueará.

Un nonce es un valor criptográficamente aleatorio que el servidor genera para cada solicitud. El servidor añade el nonce tanto a la etiqueta de script (<script nonce="abc123">) como a la cabecera CSP (script-src 'nonce-abc123'). Solo se ejecutan los scripts que contienen el nonce correcto. Los atacantes no pueden predecir el nonce, por lo que los scripts inyectados no pueden utilizarlo.

La CSP admite la generación de informes de infracciones mediante report-uri /csp-violation-endpoint o la directiva más reciente report-to. Cuando el navegador bloquea un recurso debido a la CSP, envía un informe JSON al endpoint. Supervisar estos informes le ayuda a identificar tanto problemas legítimos de configuración como intentos de ataque activos.

En Next.js, añada cabeceras CSP en el middleware: cree middleware.ts, genere un nonce, establezca la cabecera Content-Security-Policy y pase el nonce a la página mediante una cabecera de respuesta. El diseño de la página lee el nonce de la cabecera y lo aplica a todos los scripts inline y las etiquetas de estilo.

Content-Security-Policy-Report-Only es el modo de prueba: el navegador no aplica ninguna restricción, pero envía informes de infracciones sobre todo lo que se habría bloqueado. Impleméntelo primero en modo Report-Only, corrija todas las infracciones y, después, cambie a la cabecera Content-Security-Policy, que aplica la política, para evitar que la aplicación deje de funcionar.

Cuando la CSP bloquea un recurso, la consola de Chrome DevTools muestra un mensaje de error rojo que identifica la URL bloqueada y la directiva infringida. Estos mensajes son inestimables durante el desarrollo y las pruebas. Cada infracción debe resolverse corrigiendo la política, trasladando el recurso a un origen permitido o usando un nonce/hash.

Una CSP práctica para una SPA de React: default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'. La directiva frame-ancestors 'none' también evita el clickjacking al impedir que su aplicación se incruste en iframes.

¿Qué impide script-src 'self' en una política de seguridad de contenido?

CSP es una cabecera HTTP que declara fuentes de contenido de confianza. default-src 'self' y script-src 'self' bloquean los scripts externos y eval. Los scripts inline se permiten mediante hashes o nonces. 'strict-dynamic' permite la carga dinámica de scripts. Use Content-Security-Policy-Report-Only para probar antes de aplicar la política. Next.js implementa CSP mediante middleware. La consola de DevTools muestra las infracciones en tiempo real.