Cómo usar imágenes vectoriales de forma segura con WordPress

Hay docenas de tipos de archivos de imagen que puede usar para sus medios. Desde el primer momento, WordPress es compatible con la mayoría de los tipos de archivos de imagen más populares, incluidos .jpeg , .png , .gif y más. Sin embargo, no incluye soporte para imágenes vectoriales.

En el pasado, hemos hablado sobre cómo crear gráficos vectoriales escalables (SVG) , así como sus beneficios. Para este artículo, repasaremos el concepto de SVG una vez más, por qué usarlos de manera incorrecta puede ser inseguro y cómo implementarlos sin comprometer su sitio web.

¡Pongámonos a trabajar!

Suscríbete a nuestro canal de Youtube

Una introducción a los SVG

Los SVG no son imágenes basadas en píxeles, sino en vectores, como habrás adivinado por el nombre. Si intenta abrir un archivo de imagen normal con un editor de texto, verá un galimatías relativo. Sin embargo, si intentó abrir un SVG en su lugar, es probable que vea un código como el siguiente (tomado de nuestro primer artículo sobre SVG ):

<svg viewBox='0 0 105 93' ></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>
</svg>

Esos, en pocas palabras, son una serie de vectores que conforman una representación del logotipo de Adobe, con un toque de color:

Los SVG son únicos porque conservan su calidad en cualquier tamaño (es decir, escalables) y aún se verán perfectos independientemente de las dimensiones utilizadas. Esto lo convierte en un tipo de archivo ideal para algunos casos de uso específicos:

Logos que a menudo querrás reutilizar en diferentes plataformas.
Iconos que querrá escalar según el contexto.
Imágenes que querrás animar usando hojas de estilo en cascada (CSS).

Técnicamente, hay tres formas de crear SVG. Puede escribir el código usted mismo, lo cual no es práctico a menos que sea una máquina. Las otras rutas serían dibujar un SVG desde cero, o tomar una imagen existente y usar un software como Illustrator o Sketch para exportarlo como un SVG.

A pesar de los aspectos positivos, hay dos inconvenientes en el uso de SVG. En primer lugar, no son prácticos para gráficos complejos. Por ejemplo, se necesitarían millones de vectores para componer una fotografía normal, lo que daría lugar a un archivo SVG gigantesco . El segundo inconveniente de usar SVG está relacionado con la seguridad, y lo discutiremos en la siguiente sección.

Por qué el uso de SVG puede afectar la seguridad de su sitio web

Aunque generalmente nos referimos a los SVG como archivos de imagen, sería más exacto llamarlos «documentos». Después de todo, puede abrir, leer y modificar fácilmente un archivo SVG con un editor de texto, que es similar a un documento normal.

El problema está en la capacidad de agregar JavaScript junto con la información vectorial. Teóricamente, esto significa que implementar la compatibilidad con SVG en su sitio web podría exponerlo a ataques si alguien carga un archivo que contiene código malicioso.

Es una preocupación tan considerable que la compatibilidad con SVG para WordPress haya estado en discusión durante más de seis años :

Si bien no tiene que pasar por todo el ticket, la esencia es hasta que haya una manera de garantizar que el código SVG que cargue en WordPress sea seguro, implementar la función podría causar más problemas que beneficios.

En este momento, ya hay varias herramientas que puede usar para asegurarse de que sus archivos SVG estén seguros, llamados «desinfectantes» . Sin embargo, aparentemente no hay buenas formas de implementar su funcionalidad en WordPress actualmente.

En general, agregar soporte SVG a WordPress es relativamente simple en la práctica. La verdadera dificultad radica en hacerlo de una manera que no deje a su sitio web vulnerable a posibles ataques.

2 formas de usar imágenes vectoriales de forma segura con WordPress

Para esta sección, exploraremos un enfoque tanto manual como basado en complementos para el uso seguro de SVG en WordPress. A continuación, podrá elegir la mejor opción para sus necesidades. ¡Hagámoslo!

1. Agregue soporte SVG manualmente y desinfecte su código

Puede agregar compatibilidad con SVG a WordPress en cuestión de minutos con un fragmento de código. Sin embargo, esto lo dejaría abierto a los posibles problemas de seguridad que discutimos antes. El enfoque más seguro para la implementación de SVG implica los siguientes pasos:

Habilite la compatibilidad con SVG modificando su archivo functions.php .
Restrinja los roles de usuario que desea para que no puedan cargar archivos .svg en WordPress.
Desinfecte cada archivo SVG antes de cargarlo.

En general, los pasos uno y dos no son difíciles de lograr. La primera tarea es acceder a su sitio web a través del Protocolo de transferencia de archivos (FTP) y navegar a su carpeta raíz de WordPress. En el interior, busque su archivo functions.php , ábralo y agregue el siguiente código ( cortesía de Chris Coyier de CodePen y CSS Tricks ):

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
 
  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }
 
  $filetype = wp_check_filetype( $filename, $mimes );
 
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];
 
}, 10, 4 );
 
function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
 
function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

Esto cumple dos funciones: le permite cargar archivos SVG en WordPress y visualizarlos dentro de su biblioteca de medios. Una vez que agregue el código, guarde los cambios en su archivo functions.php y ciérrelo.

Las cosas ahora se vuelven un poco más complicadas, ya que debemos evitar que los usuarios en los que no confiamos carguen archivos SVG dañados. Por ejemplo, puede confiar en sus editores y autores para cargar los archivos correctos, pero no en sus colaboradores. Hay dos formas de hacerlo:

Cree funciones de usuario personalizadas con acceso limitado o sin acceso a la biblioteca multimedia.
Use un complemento, como Restricción de carga de WP , para limitar qué tipos de archivos puede cargar cada función de usuario.

Ambos enfoques tienen sus fallas, que es una de las razones por las que la implementación manual de SVG puede ser complicada. Sin embargo, una vez que se decide por un método para asegurarse de que nadie pueda cargar archivos SVG maliciosos, también debe asegurarse de no hacerlo por error.

Idealmente, ejecutará cada SVG que cargue en su sitio web a través de una herramienta de desinfección antes de hacerlo. Esto tomará su archivo, se asegurará de que no incluya nada adverso y lo eliminará si lo incluye. En última instancia, esto te deja con un archivo SVG limpio que finalmente puedes cargar en WordPress.

2. Use el complemento SVG seguro

Con el enfoque anterior, queríamos mostrarle cuán compleja puede ser la implementación segura de SVG. Esto es para que pueda apreciar correctamente lo que hace el complemento Safe SVG .

En pocas palabras, este complemento se ocupa de todos los problemas que enumeramos anteriormente, incluidos:

Permitiéndole cargar archivos SVG en primer lugar.
Asegurándose de que puede ver sus SVG dentro de la Biblioteca multimedia.
Desinfectar el código de cada SVG que cargue para evitar problemas de seguridad.

Este es más o menos un tipo de complemento plug-and-play y definitivamente es el enfoque más sencillo para la implementación segura de SVG en WordPress. Si tiene la intención de usar SVG, le recomendamos que lo pruebe.

Cómo animar archivos SVG usando CSS y complementos

Si pasa por todos los problemas (según el método } que use) de implementar SVG en WordPress, probablemente querrá sacar el máximo provecho de su inversión. Esto significa usar CSS para animar tus SVG si la situación lo requiere. Hay dos formas en que puede realizar el proceso, que hemos cubierto en el pasado:

Anima los SVG manualmente con CSS como lo harías con cualquier otro elemento.
Utilice herramientas como SVGator para generar y animar archivos SVG.

Si está dispuesto a experimentar un poco, algunas animaciones aquí y allá realmente pueden mejorar la experiencia del usuario de su sitio. Más importante aún, usar SVG y CSS para lograr esto es mucho mejor que, por ejemplo, agregar videos o GIF, especialmente para dispositivos móviles.

Conclusión

Los SVG son una opción fantástica para muchas situaciones. Por poner un ejemplo, son la opción perfecta para logos de sitios web debido a su escalabilidad. En general, el uso de SVG puede ayudarlo a diseñar un sitio web más receptivo, lo que siempre es bueno en lo que respecta a sus usuarios.

Sin embargo, si planea agregar soporte SVG a WordPress, debe asegurarse de utilizar un enfoque que mantenga su sitio seguro. Hay dos métodos para recomendar:

Agregue compatibilidad con SVG manualmente y desinfecte su código.
Use el complemento Safe SVG .

¿Tiene alguna pregunta sobre cómo usar archivos SVG de forma segura en WordPress? ¡Hablemos de ellos en la sección de comentarios a continuación!

Imagen en miniatura del artículo: microtic / shutterstock.com