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:
+en+WordPress/csp-ejemplo.png)
- 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:
– 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>
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.
+en+WordPress/errores-reportados-csp.png)
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>
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.
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
Hola
Posiblemente sea por los espacios o cambios de línea, prueba insertarlo directamente en el .htaccess.