Usar Content Security Policy (CSP) en WordPress

[ 8 agosto 2019 ] [ Autor: Jhon Marreros Guzmán ][ Recursos - Avanzado] [ ]

Content Security Policy (CSP) es un estándar de seguridad para prevenir ataques de inyección de contenido malicioso. CSP permite especificar a través del envío de cabeceras una lista blanca de sitio válidos con los que trabajará nuestro sitio web.

Generalidades

Básicamente a través de CSP indicamos, a través del envío de unas cabeceras al navegador del cliente, que contenido cargar y que contenido no. Actualmente la gran mayoría de navegadores tiene soporte para CSP.

Sintaxis para cabeceras CSP

En la siguiente imagen se puede ver la sintaxis para usar la cabecera de CSP:

La primera parte hace referencia a Content-Security-Policy
Luego vienen las directivas, que en el ejemplo es script-src y que permite restringir los scripts javascript
Finalmente se coloca la lista fuentes que generalmente son urls, en el ejemplo también se usa la palabra clave ‘self’ que hace referencia al propio dominio
Si se tiene más de una directiva se puede separa con ;

A continuación veremos algunos elementos que conforman la definición de las cabeceras de CSP:

– Directivas

Algunas de las directivas más usadas son:

default-src: Se cumplirá por defecto para las directivas que no están expresamente señaladas
script-src: Para contenido javascript
style-src: Para hojas de estilo
img-src: Para fuentes de imágenes
font-src: Para fuentes o tipos de letra
frame-src: Para contenido iframes
media-src: Para elementos de media video, audio que se incluyen en tags HTML
connect-src: define fuentes válidas para fetch, XMLHttpRequest, WebSocket y conecciones EventSource

– Palabras clave

Las palabras clave son fuentes especiales de contenido, por ejemplo:

‘none’: No hay URLs que coincidan.

‘self’: Se refiere a la misma url del dominio

‘unsafe-inline’: Permite el uso de código javascript alineado como parte del contenido

‘unsafe-eval’: Permite el uso de la función eval() para la creación de código desde strings

– Fuentes

Son básicamente un lista de urls separadas por espacio, es posible usar comodines, por ejemplo la url: *.midominio.com, representaría todos los subdominios de midominio.com

Añadir CSP a WordPress

Puedes usar un plugin como Content Security Policy Pro, sin embargo lo más práctico si quieres evitarte un plugin es añadir las cabeceras directamente en tu archivo .htaccess

Por ejemplo para un servidor que usa Apache podrías usar:

<IfModule mod_headers.c> 
Header set Content-Security-Policy "default-src 'self'; img-src 'self' http: https: *.amazon.com;" 
</IfModule>

No hay cabeceras que sirvan para todos los sitios web WordPress, depende mucho de los elementos que cargas y son muy particulares en cada sitio; es por ese motivo que debes personalizar las cabeceras CSP de acuerdo a las necesidades de tu Web

Si añades sólo estas cabeceras del código anterior en tu archivo .htaccess, es posible que obtengas errores en consola tal como se ve en la siguiente imagen, y tu sitio no funcione correctamente.

Errores de consola al agregar directiva CSP incompleta

Opción de sólo reportar

Debido a que el proceso de agregar cabeceras CSP puede causar errores, es recomendable implementar antes la opción de sólo reportar, es decir las cabeceras que agregues con la opción de sólo reportar no restringirán el contenido sin embargo te reportarán errores en la consola que puedes usar para ir depurando y agregando las fuentes o directivas faltantes.

Para usar CSP en modo reporte tienes que usar Content-Security-Policy-Report-Only, es decir tu código quedaría:

<IfModule mod_headers.c> 
Header set Content-Security-Policy-Report-Only "default-src 'self'; img-src 'self' http: https: *.amazon.com;" 
</IfModule>

Además puedes usarla con la directiva report-uri, en donde puedes especificar una url que reciba el post del reporte en formato json. Evidentemente tienes que tener un código que pueda interpretar los datos recibidos, puedes ver un ejemplo en este enlace.

Conclusión

Tal como hemos visto, podemos aumentar la seguridad de nuestro sitio web agregando cabeceras CSP, de esta manera protegeremos a nuestros usuarios de posibles ataques y además como administradores del sitio tendremos un mayor control de qué elementos carga nuestro sitio web.

¿Aún con dudas?, en el siguiente artículo se detallan los puntos anteriores

Suscríbete a DecodeCMS:

Comentarios

Matias

10 septiembre, 2020
Hola! Muy buen articulo.. descubri tarde esta cabecera que me resulta MUY importante para cuidar el usuario.
E visto por ahi que se pueden agregar cabeceras via functions.php, pude insertar algunas pero no funciono la cabecera de CSP… no se inserta adecuadamente….

Este es el codigo, ojala puedas comentarme
```
add_action( 'send_headers', 'add_header_seguridad' );
function add_header_seguridad() {
header( 'X-Content-Type-Options: nosniff' );
header( 'X-Frame-Options: SAMEORIGIN' );
header( 'X-XSS-Protection: 1;mode=block' );
header( 'Content-Security-Policy: default-src "self"  *.wordpress.org secure.gravatar.com w.org s.w.org;
 font-src "self" "unsafe-inline" data: *.googleapis.com fonts.gstatic.com;
 style-src "self" "unsafe-inline" data: *.googleapis.com assets-cdn.github.com;
 media-src "self" *.youtube-nocookie.com;
 frame-src "self" *.youtube-nocookie.com  *.google.com;
 frame-ancestors "none";
 script-src "self" "unsafe-inline" *.google-analytics.com *.googletagmanager.com;' );
}
```
- Jhon Marreros Guzmán
  
  11 septiembre, 2020
  
  Hola
  Posiblemente sea por los espacios o cambios de línea, prueba insertarlo directamente en el .htaccess.