Codificación de CSS y JavaScript en imágenes PNG

Los últimos meses he andado más liado aún que de costumbre, así que se me están acumulando las cosas para publicar. Este post por ejemplo lo tenía en cola desde principios de septiembre, cuando me llegó la newsletter de SitePoint a la que estoy suscrito. Básicamente, se trata de codificar los archivos CSS y JavaScript de una página web como una imagen PNG. La idea inicialmente se ha utilizado como herramienta para comprimir estos datos con el fin de conseguir aplicaciones web funcionales en menos de 10 KB. Sí, la verdad es que hay gente que se aburre mucho.

La idea es sencilla. Tras comprimir el CSS y el JavaScript para reducir el espacio que ocupa, se realiza una codificación del texto de los archivos en un formato binario. Puede utilizarse por ejemplo el formato PNG ya que soporta compresión zlib y es un formato sin pérdidas. Cal Henderson ha publicado una explicación de cómo generar esta codificación, así como el código PHP/Perl que realiza esta codificación, aunque es posible utilizar cualquier codificación que se nos ocurra. En esta URL puede verse por ejemplo la librería jQuery codificada.

Una vez codificado el CSS y el JavaScript, es necesario cargar la imagen en la página y decodificarla. Esto puede hacerse cargando la imagen en un elemento Canvas usando drawImage, y obtener los pixels con getImageData, convirtiendo la codificación a un string que se evalúa con eval o se añade al DOM.

Este hack fue pensado inicialmente como una técnica de compresión, en la que se pueden conseguir ratios de hasta el 75%, sin embargo tiene otras aplicaciones interesantes, por ejemplo en el campo de la esteganografía, o en la criptografía. Sin embargo, tiene también otras aplicaciones que pueden resultar más peligrosas, y es que podría utilizarse como un vector de ataque interesante con el que distribuir código malicioso.