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. Fuera de la caja, WordPress admite la mayoría de los tipos de archivos de imagen más populares, incluidos .jpeg, .png, .gif, y más. Sin embargo, no incluye ningún soporte para imágenes vectoriales.

En el pasado, hemos hablado de 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 la manera incorrecta puede ser inseguro y cómo implementarlos realmente sin comprometer su sitio web.

¡Pongámonos a trabajar!

(incrustar) https://www.youtube.com/watch?v=pB-JiR2_ll0 (/ incrustar)

Suscríbase a nuestro canal de Youtube

Una introducción a los SVG

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

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

El logo de Adobe.

Los SVG son únicos porque conservan su calidad en cualquier tamaño (es decir, escalable) 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:

  • Logotipos que a menudo querrás reutilizar en diferentes plataformas.
  • Iconos que querrá escalar según el contexto.
  • Imágenes que querrás animar con 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 software como Ilustrador o Bosquejo para exportarlo como 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, una fotografía normal tomaría millones de vectores para componer, lo que crearía un gigantesco archivo SVG. El segundo inconveniente del uso de 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 preciso llamarlos "documentos". Después de todo, puede abrir, leer y modificar fácilmente un archivo SVG utilizando 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 del vector. Teóricamente, esto significa que implementar el soporte SVG en su sitio web podría abrirlo a ataques si alguien carga un archivo que contiene código malicioso.

Es una preocupación tan considerable que el soporte SVG para WordPress ha sido objeto de debate durante encima seis años:

Un boleto de Trac de hace seis años.

Si bien no tiene que pasar por todo el ticket, lo esencial es hasta que haya una manera de asegurarse de que el código SVG que cargue en WordPress sea seguro, la implementación de la función puede causar más problemas que beneficios.

En este momento, ya hay varias herramientas que puede usar para garantizar que sus SVG estén seguros, llamados ‘Desinfectantes’. Sin embargo, aparentemente no hay buenas maneras 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 tanto un enfoque manual como un complemento para el uso seguro de SVG en WordPress. Entonces podrá elegir la mejor opción para sus necesidades. ¡Hagámoslo!

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

Puede agregar soporte 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:

  1. Habilite el soporte SVG modificando su funciones.php expediente.
  2. Restrinja las funciones de usuario que desea para poder cargar .svg archivos a WordPress.
  3. Desinfecte todos los archivos SVG antes de cargarlos.

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

// 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 '';
}
add_action( 'admin_head', 'fix_svg' );

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

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

  1. Crear roles de usuario personalizados con acceso limitado o sin acceso a la Biblioteca de medios.
  2. Usa un complemento, como la restricción de carga de WP, para limitar qué tipos de archivos puede cargar cada rol de usuario.

Ambos enfoques hacer tienen sus defectos, que es una de las razones por las que la implementación manual de SVG puede ser complicada. Sin embargo, una vez que establezca un método para asegurarse de que nadie pueda cargar SVG malicioso, también debe asegurarse no lo hagas por error también.

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, asegúrese de que no incluya nada desfavorable y elimínelo si lo hace. En última instancia, esto te deja con un archivo SVG limpio que finalmente puedes subir a WordPress.

2. Use el complemento Safe SVG

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

El complemento Safe SVG.

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

  • Le permite cargar SVG en primer lugar.
  • Asegurándose de que puede ver sus SVG en la Biblioteca de medios.
  • 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 directo 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 SVG usando CSS y complementos

Si pasa por todos los problemas (dependiendo del} 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 de llevar a cabo el proceso, que hemos cubierto en el pasado:

  1. Animar SVG manualmente con CSS como lo haría con cualquier otro elemento.
  2. Usa herramientas como SVGator para ayudarlo a generar y animar 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 decir, agregar videos o GIF, particularmente para dispositivos móviles.

Conclusión

Los SVG son una opción fantástica para muchas situaciones. Para dar un ejemplo, son la opción perfecta para logotipos 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:

  1. Agregue soporte SVG manualmente y desinfecte su código.
  2. Utilizar el SVG seguro enchufar.

¿Tiene alguna pregunta sobre cómo usar 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