Inyección de ficheros en código HTML

     Desde HTML 4.01 se hace referencia al esquema "Data: URL", el cual permite embeber código en base 64 dentro de una definición de ruta para acceder a él como si tratara de una referencia externa (1, 2, 3). Esta versatilidad permite la creación de documentos html compatibles con los navegadores actuales que puedan hacer uso de hojas de estilo, clases de javascript o de cualquier otro recurso externo sin necesidad de emplear más de un documento.

No obstante, es una táctica sólo recomendada para ficheros ligeros, puesto que este mecanismo de inyección de recursos realmente vuelca el contenido del fichero como una URL a resolver y determinados navegadores como Opera truncan las URL que poseen más de 4.000 carácteres (lo que vendría siendo un fichero de texto plano de 4KB)... además de que resulta poco práctico porque siempre que queramos modificar el recurso tendremos que reconvertirlo a base 64 y editar manualmente el html.

Para hacer uso de este esquema símplemente debemos convertir nuestro fichero en una cadena de texto base 64. Esto puede hacerse en Unix a través del binario base64. Ejemplo:

sebas@MacBookPro:~$ echo "hola qué tal?" > hola.txt 

sebas@MacBookPro:~$ cat hola.txt
hola qué tal? 

sebas@MacBookPro:~$ base64 hola.txt
aG9sYSBxdcOpIHRhbD8K

Ahora bien, esto no se limita a cadenas de texto. También nos sirve cualquier clase de archivo que queramos. En el siguiente ejemplo convierto en base 64 un código QR almacenado en una imagen de formato PNG de 0,6KB:

sebas@MacBookPro:~$ ls -lh Ubuntu\ One/QR/blog.png
-rw-r--r-- 1 sebas sebas 655 ene  9 20:16 Ubuntu One/QR/blog.png 

sebas@MacBookPro:~$ base64 Ubuntu\ One/QR/blog.png
iVBORw0KGgoAAAANSUhEUgAAAGMAAABjCAIAAAAAWSnCAAAAA3NCSVQICAjb4U/gAAAACXBIWXMA
AAsSAAALEgHS3X78AAACMklEQVR4nO2bS27DMAwF66L3v3K6UxZCieHHcgPMLBNFEh74Qou0rtfr
9SWA76c38DGoFEWlKCpFUSmKSlFUiqJSFJWiqBRFpSg/ZNB1XZ011tFyzRN8si9KTqZTOwwwpigq
RUHuW6RKNLsjdtORtVKebe4wwJiiqBQl575FELep+Cd+JKa7b4cLY4qiUpSi+8a5z4ZTGFMUlaI8
477ANc0D4H0YUxSVohTdN26E4JBYW2t8h8YURaUoOfc1S4ukfrIvcbL4GWBMUVSKgtx34JGvZszF
gR0aUxSVoly1hBI4ItXLC0h1HGpnw9SvjCmKSlGQ+96j//baPiaY+UD7PjUPwZiiqBQl5773z4Ye
C4mdyeBmCjb3TaJSlLE3zZ59H4z8CTRXN6YoKkUpPnmmkk7wFRm8rx7gue95VIqSy32pBLc7q1Zs
IYPJNshXAcYURaUoxZrnTjOL1dJis6wa7HDHmKKoFGX+jkMqH6XSIlmr6esAY4qiUpTuHYdm0tkh
Zhl/5YZgTFFUilLsOBQXO9gl99z3GCpFGTv3BTRrNfs8tdfS7PcdQqUoR++2B2OavbwDV5aMKYpK
UY7ebU+92TLVQJ+6HmhMUVSK8l/utjf7+Dsp8/rkOYlKUY66b+oAGMy810Vr/YUdY4qiUpSjd9vJ
k2etpXjfpdqFMUVRKcrRu+3BhEH1MlU2SQ22234LKkU52u/7aIwpikpRVIqiUhSVoqgURaUoKkVR
KYpKUVSK8gskWJXNsyhgrgAAAABJRU5ErkJggg==

Una vez tengamos el contenido en base 64 haremos uso de la etiqueta HTML correspondiente a nuestro recurso ("img" para imágenes, "a" para realizar una descarga, "audio" para reproducir un sonido, etcétera). Después definiremos en la url (ojo, dependiendo la etiqueta esto se hace en href o src)  el tipo de fichero (precedido por la cabecera "data:"), el tipo de decodificación (en este caso ";base64,") y todo el contenido que hemos calculado anteriormente.

Por ejemplo, la definición del PNG que contiene mi código QR quedaría así:

<img border="0" height="97" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABjCAIAAAAAWSnCAAAAA3NCSVQICAjb4U/gAAAACXBIWXMA
AAsSAAALEgHS3X78AAACMklEQVR4nO2bS27DMAwF66L3v3K6UxZCieHHcgPMLBNFEh74Qou0rtfr

9SWA76c38DGoFEWlKCpFUSmKSlFUiqJSFJWiqBRFpSg/ZNB1XZ011tFyzRN8si9KTqZTOwwwpigq

RUHuW6RKNLsjdtORtVKebe4wwJiiqBQl575FELep+Cd+JKa7b4cLY4qiUpSi+8a5z4ZTGFMUlaI8

477ANc0D4H0YUxSVohTdN26E4JBYW2t8h8YURaUoOfc1S4ukfrIvcbL4GWBMUVSKgtx34JGvZszF

gR0aUxSVoly1hBI4ItXLC0h1HGpnw9SvjCmKSlGQ+96j//baPiaY+UD7PjUPwZiiqBQl5773z4Ye

C4mdyeBmCjb3TaJSlLE3zZ59H4z8CTRXN6YoKkUpPnmmkk7wFRm8rx7gue95VIqSy32pBLc7q1Zs

IYPJNshXAcYURaUoxZrnTjOL1dJis6wa7HDHmKKoFGX+jkMqH6XSIlmr6esAY4qiUpTuHYdm0tkh

Zhl/5YZgTFFUilLsOBQXO9gl99z3GCpFGTv3BTRrNfs8tdfS7PcdQqUoR++2B2OavbwDV5aMKYpK

UY7ebU+92TLVQJ+6HmhMUVSK8l/utjf7+Dsp8/rkOYlKUY66b+oAGMy810Vr/YUdY4qiUpSjd9vJ

k2etpXjfpdqFMUVRKcrRu+3BhEH1MlU2SQ22234LKkU52u/7aIwpikpRVIqiUhSVoqgURaUoKkVR

KYpKUVSK8gskWJXNsyhgrgAAAABJRU5ErkJggg==" width="97" />

Y se visualiza así: