Guía Completa de Seguridad Web: Content Security Policy (CSP), Cabeceras HTTP y Prevención XSS
La cabecera de seguridad Content Security Policy (CSP) es el mecanismo defensivo más potente implementado por los navegadores modernos para neutralizar ataques de Cross-Site Scripting (XSS), inyección de scripts no autorizados, robo de cookies de sesión y clickjacking.
Al definir una lista explícita de orígenes de confianza para la carga de JavaScript, hojas de estilo CSS, imágenes, fuentes y conexiones API, CSP garantiza que ningún recurso ajeno o inyectado pueda ejecutarse en los dispositivos de tus usuarios.
Estructura de Directivas Principales en CSP
Configura directivas especializadas para cada tipo de contenido:
- default-src: Actúa como política base por defecto para cualquier tipo de recurso no especificado.
- script-src: Controla los orígenes autorizados para ejecutar JavaScript, bloqueando código inyectado.
- style-src y font-src: Permite cargar fuentes y estilos desde CDNs legítimas (como Google Fonts o Cloudflare).
- img-src: Restringe la descarga de imágenes y el uso de esquemas en base64 (
data:).
Despliegue en Servidor (Nginx / Apache) vs Etiqueta HTML <meta>
La mejor práctica consiste en inyectar la cabecera directamente desde el servidor web Nginx o Apache mediante la directiva add_header Content-Security-Policy. En alojamientos estáticos o entornos donde no se tiene acceso a la configuración del servidor, la etiqueta <meta http-equiv="Content-Security-Policy"> proporciona una protección esencial.
Buenas Prácticas: Eliminación de 'unsafe-inline'
Aunque durante el desarrollo inicial se recurre habitualmente a 'unsafe-inline', en entornos de producción se recomienda aislar los scripts en archivos externos o proteger bloques inline mediante identificadores criptográficos únicos (nonces) o hashes SHA-256.
Ejemplo Práctico
Por Defecto: 'self' | Scripts: 'self' cdnjs.cloudflare.com | Estilos: 'self' fonts.googleapis.com | Fuentes: fonts.gstatic.com
default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;
Garantiza que solo se carguen recursos del propio dominio y de las CDNs de confianza especificadas.
Configuración dentro del bloque server {} de Nginx
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self';" always;
Añade la directiva de seguridad en todas las respuestas HTTP emitidas por el servidor web.