Implementación de Content Security Policy (CSP) en Next.js

La seguridad de una aplicación web no termina cuando el código compila sin errores. En producción, tu sitio está expuesto a ataques de inyección de código como Cross-Site Scripting (XSS), donde atacantes intentan inyectar scripts maliciosos en los navegadores de tus usuarios. Una Content Security Policy (CSP) es una cabecera HTTP de seguridad que le indica al navegador exactamente qué orígenes de scripts, imágenes, estilos y conexiones son de confianza, bloqueando de forma inmediata cualquier código no autorizado.

¿Cómo funciona una CSP?

Cuando configuras una directiva de CSP, restringes las fuentes de recursos que el navegador tiene permitido descargar y ejecutar. Por ejemplo, al definir script-src 'self', le indicas al navegador que solo ejecute scripts que provengan del mismo dominio que la página, bloqueando scripts externos no autorizados de forma nativa.

Sin embargo, las aplicaciones de React y Next.js a menudo requieren ejecutar ciertos scripts inline o descargar recursos de fuentes de terceros (como fuentes de Google Fonts o analíticas de Vercel). Configurar una directiva muy estricta sin planificar puede romper las fuentes o estilos del sitio.

Implementación limpia en Next.js

En Next.js, la mejor manera de implementar una CSP robusta es configurando cabeceras de respuesta HTTP dentro de tu archivo next.config.ts o utilizando un Middleware si necesitas generar valores dinámicos (como nonces) por petición.

Para la mayoría de portfolios y sitios estáticos, una configuración declarativa en next.config.ts es suficiente. Declaramos directivas claras como default-src 'self', indicando que por defecto todo recurso viene de nuestro origen; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com, para permitir estilos inline (necesarios para la hidratación rápida de estilos en Next.js) y las fuentes de Google; y img-src 'self' data: https:, que permite cargar imágenes locales y de repositorios remotos seguros. Configurar estas cabeceras garantiza que tu sitio web sea resistente a inyecciones de código malicioso en producción.