homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Hardware and OS Related Technologies / Website Technology Issues
Forum Library, Charter, Moderators: phranque

Website Technology Issues Forum

Compressing JavaScript and CSS to PNG Images

 8:37 pm on Aug 23, 2010 (gmt 0)

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.




 9:23 pm on Aug 23, 2010 (gmt 0)

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.


 10:38 pm on Aug 23, 2010 (gmt 0)

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


 12:11 pm on Aug 24, 2010 (gmt 0)

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


 3:18 pm on Aug 24, 2010 (gmt 0)

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.


 10:02 am on Sep 25, 2010 (gmt 0)

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.


 4:39 am on Oct 11, 2010 (gmt 0)

Thats realy cool and smart


 8:54 am on Oct 11, 2010 (gmt 0)

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

I stopped reading there!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Hardware and OS Related Technologies / Website Technology Issues
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved