Por qué no es buena idea usar vectores SVG en WordPress

¿Por qué no se pueden subir archivos SVG en WordPress?

Si alguna vez has intentado subir un archivo en vectores SVG en WordPress te habrás llevado la sorpresa de que no lo permite, a pesar de lo populares que se están volviendo este tipo de archivos en su uso para iconos y logos, principalmente.

El motivo te lo dice el mismo WordPress, como puedes ver en esta captura…

subida de archivos svg en WordPress

El problema de seguridad con los archivos de vectores SVG

logo svg

Los archivos SVG son extremadamente inseguros.

El motivo, como reza el mensaje de error, es por seguridad, y te quedará muy claro si intentas abrir en tu ordenador un archivo con extensión .svg, pues si tienes instalado algún editor de código, algún IDE, se abrirá para mostrarte la cruda realidad, esta:

código xml de archivo svg

Efectivamente, un archivo SVG es un documento de código en XML, no un archivo de imagen como la mayoría de la gente cree y, como todo documento, es susceptible de sufrir inyecciones de código, fácilmente.

Un ejemplo

Por ejemplo, los archivos SVG permiten incrustar JavaScript y los lectores de SVG, y tu navegador lo es, pueden ejecutarlo. ¿Quieres verlo?

Abre tu editor de código favorito y pega este código:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="18.4" r="18.4" fill="#f00" />
<script>
 alert( '¡Uy, qué susto!' );
</script>
</svg>

El archivo básicamente es para mostrar un círculo rojo, pero tiene premio incluido.

Ahora guárdalo con el nombre que quieras, por ejemplo susto.svg. A continuación ábrelo con tu navegador y … ¡sorpresa!

javascript en archivo svg en WordPress

Tu navegador ejecutará el JavaScript antes incluso de mostrar el círculo rojo de marras.

En este caso el script es inofensivo, solo muestra una ventana emergente a aceptar antes de poder ver el círculo rojo, pero podría llevar cualquier otro comando no tan simpático, y ese es el problema.

Esta vulnerabilidad inherente a todos los archivos SVG se podría aprovechar para, por ejemplo, inyectar código en un ataque XSS.

¿Por qué son tan populares los archivos SVG?

flat icons

No son algo nuevo, ni de lejos, pero últimamente se han vuelto a popularizar por varios motivos:

  • El uso de iconos vectoriales SVG, entre ellos los famosos y ya cansinos flat icons, por multitud de temas avanzados para webs de venta y conversión.
  • El pequeño tamaño de los archivos SVG comparados con PNG y otros formatos que admiten fondos transparentes.
  • La enorme escalabilidad de los archivos SVG sin pérdida de calidad en pantallas grandes o de alta calidad, retina por ejemplo.
  • La fiebre por la optimización de carga o WPO, que nos anima a usar recursos gráficos lo más pequeños de tamaño posible, y los archivos SVG pesan poco y dan mucha calidad.

diferencias de escalabilidad entre svg y otros archivos

¿Por qué son tan inseguros los archivos SVG?

 

icono archivo svg

Hay expertos que han llegado a determinar lo siguiente:

Literalmente, por su propio diseño, los archivos SVG están diseñados para ser inseguros.

Ahí es nada.

De hecho, si WordPress permitiese archivos SVG, la biblioteca de saneado no solo tendría que funcionar bien, también tendría que ser revisada en profundidad, sobre todo en entornos de producción a gran escala.

Y, no olvidemos que WordPress está detrás de casi el 30% de la web, con lo que el potencial de inseguridad es inmenso.

La inseguridad de los archivos SVG no es un fallo desconocido o nuevo. Hay multitud, y bien conocidas, vulnerabilidades con los archivos SVG.

Como SVG está basado en XML, abre una enorme sobreabundancia de problemas, como vulnerabilidades XXE (XML External Entity), ataques XSS (Cross Site Scripting) y muchísimas más.

No es una teoría, o algo oculto o desconocido. Hay más de 8.000 bien conocidas vulnerabilidades relacionadas con todo tipo de vulnerabilidades de seguridad de todo tipo con los archivos SVG.

Otro ejemplo que recordarás

archivos infectados virus wannacry

¿Te acuerdas del famoso virus/ransomware WannaCry?

Pues los archivos SVG estaban en la lista de documentos que inyectaba y encriptaba código malicioso, con el que infectó millones de ordenadores en todo el mundo.

¿De verdad es tan grave? Si solo tengo unos iconos pequeños y ¡taaan monosss!

A ver, no es un cachorro.

Lo que en realidad tienes no son unos pequeños y bonitos, ¿cuántos? ¿6 iconos?, en realidad lo que tienes ahí, en la portada de tu web, son 6 preciosos documentos XML vulnerables, sin ningún código ni saneado que impida que tengas 6 bombas potenciales listas para estallar con el «estímulo» adecuado.  ,

Vale, todo muy interesante pero quiero usar archivos SVG

Bueno, tú mismo, pero recuerda la enorme vulnerabilidad que estás asumiendo. Y una vez dicho esto, como la información no hace daño a nadie, aquí tienes cómo permitir la subida de archivos SVG a WordPress.

Simplemente añade el siguiente código a tu plugin de personalizaciones o al archivo functions.php del tema activo:

/* Permitir subir archivos .svg */
function add_svg_to_upload_mimes( $upload_mimes ) {
	$upload_mimes['svg'] = 'image/svg+xml';
	$upload_mimes['svgz'] = 'image/svg+xml';
	return $upload_mimes;
}
add_filter( 'upload_mimes', 'add_svg_to_upload_mimes', 10, 1 );

También, puedes añadir lo siguiente en el archivo .htaccess:

# Agregar SVG Mime Types
AddType image/svg+xml svg
AddType image/svg+xml svgz

O, si te gusta más, puedes hacerlo instalando el plugin SVG Support.

¿Puedo usar archivos de vectores SVG en WordPress con seguridad?

Mejor pregunta. Si crees que necesitas usar archivos SVG entonces puedes instalar el plugin Safe SVG que, una vez instalado, te permitirá subir archivos con extensión .svg en WordPress, pero antes aplicando una mínima medida de seguridad: no permitir que subas archivos SVG sin sanear.

Está basado en DOMPurify para sanear correctamente los archivos SVG.

De paso activa la vista previa de los archivos SVG en la biblioteca de medios.

¿Estoy totalmente seguro usando esto?

No. Vuelve a leer el artículo desde el principio para grabarte a fuego que no es seguro usar archivos SVG en WordPress, ni en ningún otro sistema dicho sea de paso.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(27 votos, promedio: 4.6)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

25 comentarios en “Por qué no es buena idea usar vectores SVG en WordPress”

  1. Todo el mundo como loco hablando sobre SVG y lo bonito que es y…tachán! Aquí viene Fernando a poner un poco de orden! Gracias por tan valiosa información!

  2. Me sorprende bastante este artículo en este blog.
    Un poco de rigor, por favor.
    El problema no es usar SVG, es no revisar los recursos que se usan.
    Es como decir que usar html o javascript es peligroso para WordPress. Si el autor de la página se dedica a copiar y pegar cualquier snipet encontrado por Internet le puede suceder lo mismo.

  3. Buenas Fernando. Genial artículo, justo hace unos dias intenté subir un SVG y me saltó ese error. Yo soy muy de hacerle caso a estas cosas, así que lo pasé a png. Mi pregunta es: ¿Esto pasa con todos los formatos Vectoriales? Obviamente el logo y alguna que otra cosa, cuando menos pese mejor que mejor (dicho por ti), y que mejor que hacerlo en vectorial.

  4. Bueno es como todo, si la persona que administra el sitio hace sus propios SVG es seguro al 100%, o mejor dicho, si el administrador y/o colaboradores saben lo que hacen, es 100% seguro, el problema es cuando se siguen tendencias sin saber lo que hay detrás ni saber lo que estas haciendo…

    Como ya lo han mencionado, es tan peligroso como dejar a una persona sin conocimientos ponerse a copiar y pegar códigos JavaScript sin ton ni son, y eso no convierte a JavaScript en un mal lenguaje de programación.

    Saludos!!

  5. Hola Fernando
    Gracias por el aporte, varias veces que escuchaba sobre este tipo de archivo, hasta que llegué a enterarme por tu artículo, yo diría que sabiendo quien crea o edita esos archivos ya sea tu mismo o tu equipo de trabajo no habría ningún inconvenente y además usarlo por que se necesite mismo no solo por que los demás lo hacen. Gracias por el artículo

  6. Me sorprende lo que acabo de leer. Es como decir que el HTML es peligroso y que mejor hagamos las webs en .txt y naveguemos con Lynx. O leer los periódicos en papel, no vaya a ser que nos salte un popup en Javascript.

  7. Joksan Suriel

    Yo buscando alguna manera de usar SVG porque mi WP no me lo permitía, ya que en png es muchísimo más pesada. En SVG vienen siendo 100kb, a diferencia de la PNG que son 869kb, y al final vengo topando con pared jajaja.
    Lastima que no vaya a poder utilizar mis ilustraciones, antes está la seguridad que otra cosa :/

  8. Eduardo Moran Al Mundial

    Yo ni soy experto… pero parece que pretenden decirnos… «ey lo svg son documentos xml que vienen contaminados por el simple hecho de ser código y no un simple jpg»… pero también las mismas páginas de wordpress son archivos html y no por eso se está gritando a los 4 vientos que son páginas potencialmente infecatables… tanto las páginas de wordpress como los svg son potencialmente contaminantes… si se contaminan claro está. El artículo es alarmista y confundiría a casi cualquier que como yo no sabemos nada de programación… parece dejar claro que esos archivos ya vienen con virus y cuanta porquería maliciosa, pero en realidad si son mis svg creados en illustrator ¿por qué habrían de ser peligrosos? ¿o qué… al subirlos al servidor en automático son rastreados por monstruos tecnológicos para inyectarles viruso? pero eso podría pasar con cualquier html de lo que sea que sea que subamos a un hosting…

  9. Pregunta de alguien que está empezando en wordpress: entiendo que incrustar un archivo svg es inseguro pero si se mete dentro de la web un código un path svg no habría problema no? es decir, que no sea un archivo externo al propio wordpress

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido