Índice de contenidos
¿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…
El problema de seguridad con los archivos de vectores 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:
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!
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?
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.
¿Por qué son tan inseguros los archivos 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
¿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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
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!
jaja, a veces me da el día malote
Un abrazo.
Excelente información.
Muchas gracias.
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.
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.
Más que pasar es que es fácil que pase
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!!
¿Entonces si hago mis propias SVG en ilustrator una vez subidos a la pagina no pueden ser inyectados?
Todo archivo de texto puede ser inyectado
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
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.
Sí, también lo puedes ver así, claro, aunque no es eso lo que digo
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 :/
Bueno, siempre puedes subir tus SVG y luego capar WordPress para evitar cargar otros que no tengas total seguridad de que son tuyos y limpios.
Ah, es fantástico saber eso.
¡Muchas gracias por la información, Fernando! :0
Hola Fernando, a que te refieres con capar wordpress? y como se hace? yo cree mi logotipo con formato svg, pensé en instalar el pluggin svg support para poder subirlo, eso si es seguro? o también corro algún riesgo?
Ea…. pues ya me ha explotado el cerebro >__<
No me queda claro si existe algún riesgo subiendo SVG hechos por mí. Saludos.
No me queda claro si existe algún riesgo subiendo SVG hechos por mí. Gracias.
Hechos por ti en principio no llevan código malicioso (supongo) así que no
Me alegra leer eso, porque yo mismo los hago, que suerte.
Gracias por la info
el formato webp tambien ocurre lo mismo cuando se intenta subir a wordpress
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…
Usar SVG es una necesidad hoy en día en cualquier página web. Decir de uno usarlo por problemas de seguridad es una chorrada.
Básicamente lo que insiste este articulo.
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
Usar SVG es esencial hoy en día para mejorar el rendimiento de la web y más aun con los core web vitals, el problema es en la calidad en pasar un png a svg, la imagen pierde visualmente, lo del tema de la seguridad si la imagen la sube el propio administrador, no le veo problema.
Un saludo.