Compressing JavaScript and CSS to PNG Images

[tedster]

This is one of those jaw-dropping ideas for me. You can compress js and css to png, and take advantage of the image compression algo. I wish the article compared the approach to gzip compression, but it's still very cool.

I wanted to share a technique that was invented by NIHILOGIC. The idea is to store the javascript code inside a PNG file to leverage the image compression and significantly reduce the size. And this technique can also be applied to CSS as well...

The build process for the application works like this: all JS and CSS files are merged and minified using YUICompressor, then the minified JS and CSS are concatenated into one string, separated by a unique delimiter. This long string is then encoded into a PNG image.

[alexle.net...]

[lammert]

Really nice find tedster!

PNG uses the deflate algorithm which is one of the oldest compression algorithms supported in gzip. With the wider choice of algorithms in modern gzip implementations the latter will probably perform better in most situations. But the idea of hiding your scripts inside image files: passing payload through firewalls, spam filters, virus filters and all kinds of other road blocks without any problem. Or sending compressed content via proxy servers which normally don't allow compressed content. The uses are unlimited.

[tedster]

Sounds like it could be a vector for some malware, too, doesn't it.

[Maurice]

@tedster that was my first thought a nasty way of hacking a site

[ergophobe]

Not exactly the same thing, but there are also various schemes for hiding textual data in JPEGs because JPEGs have all sorts of places to store text.

And you can compress a file as RAR and add it to a jpeg and the image will still display normally. Only the file size will suggest the jpeg has something fishy, but since some people save jpegs at 90 quality, they can be unusually large.

So you could easily roll a malicious executable into a jpeg and deliver it to the client browser. The tough part would be getting it extracted from the JPEG and executed client side. But I could put virtually anything on your computer that way.

[enigma1]

So you could easily roll a malicious executable into a jpeg and deliver it to the client browser.

you can do that anyways now with encoding something as part of the html (for example base64 anything). The browser will use its cache by default and store the content. It then depends on browser security and addons.

There are also the super cookies using flash that can store large sets of data, they don't expire, can't be deleted by the browser by default and track many things you do.

[Anyango]

Thats realy cool and smart

[Status_203]

Since IE9 supports Canvas, now is the time to whip out this trick.

I stopped reading there!