Qué es CSP y cómo usarlo para proteger WordPress

Publicado Por Fernando Tellado el 11 Oct, 2016

Últimamente seguramente habrás oído y leído acerca de unas siglas, CSP, de Content Security Policy (política de seguridad de contenidos), así que vamos a explicar qué significa y cómo aplicarla a WordPress.

Índice de contenidos

1 ¿Qué es CSP?
2 ¿Cómo añado CSP a mi web?
3 ¿Cómo añado cabeceras CSP en WordPress?
- 3.1 Headit
- 3.2 WP Content Security Policy
4 ¿Merece la pena añadir las cabeceras CSP?
- 4.1 Más información sobre CSP

¿Qué es CSP?

ataque-script-xss

La CSP es una serie de especificaciones para proteger sitios web contra ataques XSS (Cross Site Scripting).

La idea es añadir una serie de cabeceras HTTP que le dicen al navegador de tus visitantes qué puede ejecutar y qué puede bloquear, para evitar que se ejecuten scripts no autorizados o cualquier otro recurso propio o externo.

La inmensa mayoría de navegadores actuales reconocen y usan las cabeceras CSP.

navegadores-compatibles-con-csp

Es importante añadir CSP a tu web ya que protegerá a tus visitantes de ejecución en sus navegadores de scripts XSS, Spyware y Adware, ahí es nada.

Básicamente, y por resumir, indica al navegador desde el que visitan tu web qué cargar y qué no, en base a unas directrices que tu defines, las cabeceras CSP.

Algunas directivas que puedes incluir son estas:

base-uri restringe la URL que puede aparecer en el elemento <base> de una página.
child-src lista las URLs de conectores e incrustadores de contenidos. Por ejemplo: child-src https://youtube.com permitirá insertar vídeos de YouTube pero no de otras fuentes. Esta es la directiva que se usa actualmente en vez de la obsoleta frame-src.
connect-src limita las fuentes a las que te puedes conectar (vía XHR, WebSockets y EventSource).
font-src especifica las fuentes desde las que puedes servir fuentes web. Por ejemplo, para activar las fuentes web de Google lo harías con font-src https://themes.googleusercontent.com
form-action lista endpoints válidos para envíos desde etiquetas <form>.
frame-ancestors especifica la fuente que puede incrustar la página actual. Esta directiva se aplica a las etiquetas <frame>, <iframe>, <embed> y <applet>. Esta directiva puede usarse en las etiquetas <meta> y se aplica solamente a recursos que no sean HTML.
img-src define las fuentes desde las que pueden cargarse imágenes.
media-src restringe las fuentes que pueden servir vídeo y audio.
object-src permite controlar Flash y otros conectores.
plugin-types limita el tipo de conectores que puede invocar una página.
report-uri especifica la URL a la que enviará informes el navegador cuando se viola una política de seguridad de contenido. Esta directiva se puede usar en las etiquetas <meta>.
style-src es la contrapartida de script-src para las hojas de estilo.
upgrade-insecure-requests indica a los agentes de usuario que hagan rewrite de los esquemas de URL, cambiando de HTTP a HTTPS. Esta directiva es para webs con muchas URLs antiguas que hay que redirigir.

Y luego tenemos los elementos a incluir en las directivas, por ejemplo:

'none', como su nombre indica, que no coincida nada.
'self' que coincida con la fuente actual, normalmente tu web, pero no con sus subdominios.
'unsafe-inline' permite JavaScript y CSS incrustados de fuentes externas.
'unsafe-eval' permite mecanismos texto-a-JavaScript como eval.

Estas directivas son solo algunas, y CSP va incorporando nuevas, así como modificaciones, en cada nueva versión, así que te recomiendo que revises las últimas especificaciones en la web específica del W3C sobre CSP.

¿Cómo añado CSP a mi web?

Puedes añadir las reglas al archivo .htaccess, para lo que tu servidor debe tener activo el módulo de cabeceras. Este sería un ejemplo:

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

Header set Content-Security-Policy "default-src 'self'; img-src 'self' http: https: *.gravatar.com;"

</IfModule>

Como puedes ver en el código de arriba en este caso la CSP, mediante la aplicación de algunas de las directivas que hemos listado antes, permite la carga de todo lo que se cargue directamente desde la misma web (default-src 'self'), las imágenes de tu web (img-src 'self') así como desde gravatar.com, ya sea en http como en https. Fácil ¿eh?

El problema es que no hay reglas fijas para todos los sitios, sino que dependerá de cada web las reglas que debes añadir. En el ejemplo anterior, si por ejemplo cargas fuentes externas o scripts desde Google Analytics no se ejecutarían. Lo mismo podría pasar con plugins que usen scripts de carga remota.

Es por este motivo que debes personalizar las cabeceras CSP a las necesidades de tu web. Un modo interesante de probar qué pasaría es crear esta función para que se muestre tu sitio si activases ciertas directivas CSP:

<?php
    header("Content-Security-Policy-Report-Only: <aquí tus directivas a probar>");
?>

<?php

header("Content-Security-Policy-Report-Only: <aquí tus directivas a probar>");

Con este método le dices al navegador que no ejecute las directivas de bloqueo pero que te informe de lo que pasaría si las aplicases.

¿Cómo añado cabeceras CSP en WordPress?

En realidad lo suyo es que lo hagas como hemos visto antes, añadiendo tus reglas al archivo .htaccess, pero te puedes “ayudar” de algún plugin, por ejemplo:

Headit

Este plugin te ofrece una interfaz dentro del escritorio en la que añadir las reglas de cabeceras HTTP que quieras, no solo CSP. Eso sí, no hace nada por ti, las tienes que añadir tú mismo y debes saber lo que estás haciendo, igual que si lo hicieses directamente en tu archivo .htaccess.

WP Content Security Policy

En este caso es algo más explícito, pero de nuevo debes añadir manualmente las cabeceras. Al menos te ofrece cajas de introducción de texto por tipos de contenido para que introduzcas tus directivas, así como selectores desde los que especificar si quieres activar CSPs en modo de pruebas e incluso una página con el registro de mensajes.

Al final, claramente, debes aprender a añadir manualmente las cabeceras CSP, ningún plugin va a hacerlo por ti, eso tenlo claro.

¿Merece la pena añadir las cabeceras CSP?

csp-validator

En realidad sí, CSP es realmente importante para tus visitantes, ya que no tendrán que sufrir scripts no solicitados ni contenido o vulnerabilidades XSS de tu web. En definitiva, que les estás protegiendo.

En cuanto al avance más importante de CSP para los administradores web es la consciencia y responsabilidad, pues te reclama que controles y conozcas lo que hará tu web con los recursos que sirve y ejecuta.

De este modo, si estableces unas reglas estrictas para, por ejemplo, las fuentes de las imágenes, y un script trata de insertar una imagen en tu web desde una fuente no autorizada, esa imagen se bloqueará, y te enterarás al instante.

En lo que se refiere a los desarrolladores, por su parte, necesitan saber exactamente que hace su código en las webs, y CSP les ayudar a controlarlo. El desarrollador verá las partes de su código que requieren de recursos externos y las que no, lo que puede que les anime a evitar funciones y estilos incrustados de fuentes externas, por ejemplo, ayudándoles a ser más estrictos y cuidadosos.

Para desarrolladores hay un plugin para Sublime Text 2 muy interesante, CSP Validator, que comprueba si tu JavaScript, HTML y CSS tienes problemas potenciales de CSP.

Más información sobre CSP

Si te gusta este contenido prueba tambien a suscribirte al canal en YouTube.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.