• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Recursos / Usar Content Security Policy (CSP) en WordPress

Usar Content Security Policy (CSP) en WordPress

Usar Content Security Policy  (CSP) en WordPress

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

seguridad

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:


CSP sintaxis

  • 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:  

     

    ¿Me ayudas a llegar a más gente?

    Twittear Compartir LinkedIn WhatsApp

    Artículos Relacionados

    • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
    • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
    • tipos de complementos de WordPress5 tipos de complementos de WordPress
    • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
    Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
    Cargando...

    Interacciones con los lectores

    Comentarios

    1. 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.

    Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

    *

    * Gravatar habilitado

    Barra lateral principal

    Presentación

    Curso Decodifica WordPress

    Únete a DecodeCMS

    Recibirás como regalo:

    Guia práctica con video:
    ¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

    Jooble
    Alojamiento Wordpress

    Niveles

    Básico Intermedio Avanzado

    Etiquetas

    accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

    Populares

    Ocultar categorías que no están activas en widget de categorías WooCommerce

    Ajax sin usar jQuery en WordPress

    Guía visual de Hooks para StoreFront y WooCommerce

    Campos personalizados en productos de WooCommerce

    © logo decode pie
    Política de Privacidad | Política de devoluciones
    Copyrigth 2023 Todos los derechos reservados