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

Hay docenas de tipos de archivos de imagen que puede utilizar para sus medios. 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 ningún soporte para imágenes vectoriales.

En el pasado, hemos hablado sobre cómo crear gráficos vectoriales escalables (SVG), así como sus beneficios. En 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

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 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 nuestra primera pieza sobre SVG):

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></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 componen una representación del logotipo de Adobe, con una pizca 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:

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

Técnicamente, hay tres formas de crear SVG. Podrías escribir el código tú mismo, lo cual no es práctico a menos que seas 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, existen dos inconvenientes en el uso de SVG. En primer lugar, no son prácticos para gráficos complejos. Por ejemplo, una fotografía normal requeriría millones de vectores para componer, lo que harí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 normalmente 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 información vectorial. En teoría, esto significa que implementar el soporte 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 el soporte de SVG para WordPress se haya debatido 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 existen varias herramientas que puede utilizar para garantizar que sus SVG sean seguros, llamadas '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 su sitio web vulnerable a posibles ataques.

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

Para esta sección, exploraremos un enfoque manual y basado en complementos para el uso seguro de SVG en WordPress. Luego 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 la compatibilidad con SVG modificando su archivo functions.php .
2. Restrinja los roles de usuario que desea para que no puedan cargar archivos .svg en WordPress.
3. Desinfecte todos los archivos SVG antes de cargarlos.

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 multimedia. Una vez que agregue el código, guarde los cambios en su archivo functions.php y ciérrelo.

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

1. Cree roles de usuario personalizados con acceso limitado o nulo a la biblioteca multimedia.
2. Utilice un complemento, como WP Upload Restriction, para limitar qué tipos de archivos puede cargar cada rol de usuario.

Ambos enfoques tienen sus defectos, lo cual es una de las razones aplicación SVG manual puede ser complicado. Sin embargo, una vez que usted coloque en un método para asegurar que nadie puede subir SVG malicioso, también hay que asegurarse de que no lo hace 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, se asegurará de que no incluya nada indebido y lo eliminará si lo hace. En última instancia, esto te deja con un archivo SVG limpio que finalmente puedes cargar en WordPress.

2. Utilice el complemento Safe SVG

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

En pocas palabras, este complemento se encarga de todos los problemas que enumeramos antes, incluidos:

• Permitiéndote cargar archivos SVG en primer lugar.
• Asegurándose de que pueda ver sus SVG dentro de 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 sencillo para la implementación segura de SVG en WordPress. Si tiene la intención de utilizar SVG, le recomendamos que lo pruebe.

Cómo animar SVG con CSS y complementos

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

1. Anime SVG manualmente con CSS como lo haría con cualquier otro elemento.
2. Use 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 agregar videos o GIF, particularmente 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 los 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 para 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. Utilice el complemento Safe SVG.

¿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