Seguridad Web : Usar Content Security Policy (CSP)

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.

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.

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

Añadir CSP a WordPress

•  data: → Hace referencia a archivos SVG inscrustados en la web.
• 'unsafe-inline'  → Existe codigo javascript como parte del HTML.

Puedes usar un plugin como Content Security Policy Pro o tambien puedes implemnetar el codigo dentro del archivo htaccess  o usando las etiquetas meta en la cabecera de nuestro tema pero sinceramente  las etiqueta meta se me fue imposible que sea reconocido.

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 "img-src 'self' data: https://secure.gravatar.com/;
  script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://cdn.jsdelivr.net/; 
  style-src 'unsafe-inline' 'self' https://fonts.googleapis.com;
  base-uri 'self';" 
</IfModule>

Añadir las cabeceras en el archivo header de tu tema con la etiqueta meta

<meta http-equiv="Content-Security-Policy"  content=" img-src 'self' data: https://secure.gravatar.com/; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://cdn.jsdelivr.net/; style-src 'unsafe-inline' 'self' https://fonts.googleapis.com;  base-uri 'self';" >

Herramientas Online para probar Content Security Policy (CSP)

→  Security Headers

→ CSP (Content-Security-Policy) Header Test 

Referencia

https://decodecms.com/usar-content-security-policy-csp-en-wordpress/

Usar Content Security Policy (CSP) en WordPress