Autor: @RaulRenales
El pasado sábado publique en el blog de Honey un artículo
sobre la pérdida de privacidad originada por una vulnerabilidad
en mozilla, en un objeto que gestiona animaciones SVG.
A raíz del artículo hay mucha gente que me ha preguntado
sobre las imágenes vectoriales del formato SVG y las implicaciones en seguridad
que este tipo de formatos puede acarrear.
Primero de todo
repasemos que es una imagen SVG:
Gráficos Vectoriales Redimensionables o SVG es un formato de
gráficos
vectoriales bidimensionales, tanto estáticos como animados, en
formato XML, cuya especificación
es un estándar abierto desarrollado por el W3C
desde el año 1999.
Para crear una imagen, o un texto, o un degradado, etc... lo
único que debemos utilizar es un código como este:
Como se puede ver en el código, la primera etiqueta (svg)
define el espacio donde se pintara el círculo, y la etiqueta circle define el
área de la circunferencia, el contorno y el relleno del mismo. Fácil y
sencillo.
El código anterior está insertado directamente en una página
web, con lo que el código se puede leer tan solo con revisar el código fuente
de la página.
Si lo que buscamos es algo más privado, o al menos no tan
obvio, podemos empaquetar todo en un bonito archivo .SVG y lanzarlo como un
objeto embebido.
Para poder crear el archivo .SVG, lo único que necesitamos
es una herramienta de edición de textos como Notepad++ y escribir el siguiente
código:
Tan solo tenemos que guardar el archivo como Imagen.svg y ya tienes una imagen
vectorial lista para insertar en tu web mediante la siguiente etiqueta:
Al lio ... ¿Cómo
funcionan los Scripts en las imágenes SVG?
Una de las cosas más interesantes que tiene este formato, es
la capacidad que tiene para que podamos incorporar dentro de sus etiquetas
scripts que se ejecuten ligados a la imagen o a eventos relacionados con la
misma.
Un ejemplo sencillo:
Como se puede ver en el código anterior, hemos insertado un
pequeño script para saludar, el script tiene que estar dentro de las etiquetas
de para asociarlo con la carga de la imagen.
De la misma manera que hemos insertado el script en una porción
de código de la página, lo podemos empaquetar con la imagen y esconderlo en la extensión
.svg.
Como bien os podéis imaginar lo que pongáis en la parte del
Script es cosa vuestra, pero es relativamente fácil obtener información del
usuario, o bien, utilizarlo para hookear un navegador a un panel de control.
 |
| Navegadores hookeados por un script incluido en un SVG |
Bueno, hasta aquí el pequeño How To para insertar scripts en imágenes vectoriales SVG, esperando que os haya gustado me despido hasta un nuevo post en este blog.