CSP: Content Security Policy
En este artículo vamos a hablar de CSP, una medida de protección que podemos activar en nuestros servidores y sitios web profesionales para conseguir una mayor protección ante ataques de inyección de código cruzado, conocidos generalmente por el nombre XSS o Cross Site Scripting. Veremos además algunos ejemplos típicos de aplicación de CSP para incrementar la seguridad de nuestro sitio web y cómo configurarlo en Nginx, Apache, o con simples etiquetas.
Qué es CSP
Content Security Policy es una cabecera de respuesta de las solicitudes HTTP que serán interpretadas por los navegadores y que permite especificar las fuentes autorizadas desde las que recibir contenido de diversos tipos, como imágenes o scripts JavaScript.
Actualmente, casi todos los navegadores del mercado soportan esta protección, por lo que su uso es muy recomendado. Aquellos navegadores antiguos que no soportan CSP simplemente ignorarán la cabecera HTTP, por lo que usarla no producirá ningún efecto en ellos.
Por qué es importante CSP
Uno de los ataques más comunes en la web es el llamado XSS o Cross Site Scripting. Este ataque consiste en inyectar código JavaScript en el sitio web que un usuario está visitando. Esta inyección se puede producir de diversos modos, generalmente aprovechando brechas de seguridad en la programación del sitio o por el uso de librerías, CMS o frameworks poco actualizados.
Si el atacante consigue inyectar código JavaScript podrá hacerse pasar por el usuario y robar información o ejecutar procesos en el sitio web atacado como si fuera un usuario autorizado.
Mediante CSP se consigue limitar las fuentes desde donde es posible recibir distintos tipos de contenido, por lo que las posibilidades de hacer ataques XSS se reducen bastante, o incluso totalmente.
Ejemplos habituales de configuraciones SCP
Vamos a conocer ahora algunos ejemplos de cabeceras HTTP con especificaciones diversas de Content Security Policy, que nos permitan configuraciones habituales. Luego veremos cómo insertar esas cabeceras en los servidores web o en las etiquetas META.
Configuración default-src
Esta configuración nos permite indicar las fuentes admitidas para todo tipo de contenido. Por ejemplo:
default-src 'self';
Indicará que solo se permite la recepción de contenido desde el mismo servidor. Esta configuración se aplicará a todos los tipos de contenido, que pueden ser diversos, desde scripts Javascript, hojas de estilo o imágenes.
Bloqueo de scripts JavaScript
Potencialmente los recursos más problemáticos son los scripts, pero en ocasiones deseamos usar imágenes o vídeos de otras fuentes, en este caso podemos usar la directiva script-src.
script-src 'self';
Esto permitirá scripts que provengan del mismo sitio web, pero permitirá usar imágenes u otros contenidos que vengan de otras fuentes.
Habilitar CDN o fuentes de confianza
Es habitual que los sitios web invoquen recursos que se encuentran en otros servidores, por ejemplo desde CDN. Así mismo, existen fuentes de confianza desde las que también queremos cargar contenido JavaScript, como Google Analytics.
script-src 'self' www.google-analytics.com cdnjs.com;
Este ejemplo permitirá que se carguen scripts desde el mismo sitio web, pero además desde el dominio de Google Analytics y desde el popular CDN de librerías JavaScript cdnjs.com.
Otro ejemplo típico de uso de CSP consiste en permitir el uso de fuentes cargadas de Google Fonts. Para ello, podemos permitir la activación de las etiquetas de estilos y fuentes de los sitios de Google, de este modo:
Content-Security-Policy: default-src 'self'; style-src 'self' fonts.googleapis.com; font-src fonts.gstatic.com
Como puedes ver, estamos definiendo que solamente se permitan recursos cargados del propio servidor, pero para el caso de fuentes y declaraciones de estilos, se permitan también los servidores de Google.
Cómo usar CSP
El uso de CSP para incrementar la seguridad de un sitio o aplicación web es tan sencillo como enviar una cabecera HTTP al navegador cliente, en la que se informa las fuentes en las que se confía y de las que por tanto se permite la recepción de información.
Para usar CSP tenemos dos posibilidades:
- En el caso que sea posible, se puede configurar el servidor web (Apache o Nginx) para que se envíe la cabecera HTTP en todas las respuestas a solicitudes. Esto se puede realizar cómodamente en la configuración del sitio donde se desee activar esta protección.
- En los casos en los que no es posible activar la protección mediante la configuración de las cabeceras de HTTP del servidor, se puede definir SCP mediante una etiqueta META.
Configuración de cabeceras CSP en Nginx
En Nginx se activa la protección CSP mediante el archivo de configuración del sitio que necesitemos proteger. Se abre el archivo de configuración y se localiza el bloque server {}. Allí se coloca el siguiente código para enviar las cabeceras HTTP:
add_header Content-Security-Policy 'default-src 'self';';
Por supuesto tendremos que configurar la regla de protección que nos resulte más adecuada para el sitio. Luego se debe reiniciar el servidor para que los cambios estén disponibles.
Configuración CSP en Apache
Si nuestro servidor web es Apache tendremos que realizar una tarea similar. Debemos localizar el archivo de configuración del sitio web y allí colocaremos la siguiente línea:
Header always set Content-Security-Policy 'default-src 'self';
Opcionalmente se puede activar CSP en sitios bajo el servidor Apache directamente en el archivo .htaccess, para lo cual podremos colocar el siguiente código:
Header set Content-Security-Policy 'default-src 'self''
Son importantes los bloques ifModule para asegurarnos que este código no da problemas si el módulo mod_headers no está activado en el servidor.
Configuración CSP mediante etiquetas META
Finalmente, tenemos la posibilidad de incluir una sencilla etiqueta en el código HTML del sitio, permitiendo la activación de CSP de una manera cómoda y sin la necesidad de configurar el servidor.
Para ello la etiqueta que tendremos que usar será parecida a esta:
<meta http-equiv='Content-Security-Policy' content='default-src 'self''>
Gracias a esa etiqueta meta y sin tener que lidiar con la configuración del servidor, estaremos aumentando la seguridad de las webs, evitando ataques XSS.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.