This is pretty great. I also built something similar a while back that would let you post torrents to message boards as images:
https://github.com/mnutt/hid.im/blob/master/public/firefox-e...
Pack arbitrary files into PNG and access them using JavaScript
11–20 of 31 posts
Re: Pack arbitrary files into PNG and access them using JavaScript
#12Earlier quoted context omitted.
Instead of doing $.get([remoteScript]), you inject img tags that point to prebuilt PNGs on a different server and decode them after they load. I could be wrong, but doesn't that work?
It doesn't. You can load the img tag, but the browser will not let you access the image itself from javascript, unless you have the proper CORS headers.
Quite right - it will complain that the canvas is "tainted" and won't let you do useful things like calling `getImageData`.
Re: Pack arbitrary files into PNG and access them using JavaScript
#13Any ideas why I would want to do this?
Circumventing censorship; need to move arbitrary data, but only convenient transport is image format.
Re: Pack arbitrary files into PNG and access them using JavaScript
#14I first learned about this technique from Cody Brocious' post ( http://daeken.com/superpacking-js-demos ) about his WebGL demo 'Magister' ( http://demoseen.com/windowpane/magister.html ). That file has a .html extension, but it's also a valid PNG. In his post, he discusses this technique as well as others. Cody's goal was to compress already minified WebGL code and achieve some pretty impressive results from a ridicu…
This is really clever. Unfortunately, the linked page doesn't seem to have the bootstrap code that has the magic of getting from a PNG to a web page. Is this around somewhere? (I could download the demo PNG and extract it myself, but I'm hoping not to have to do that...)
Re: Pack arbitrary files into PNG and access them using JavaScript
#15The only use I see for this is for compressing files uploaded to a hosting where you can't enable gzip encoding. I already use static gzip encoding in all my deployments and I got less problems with cross-origin requests from custom-coded binary files than from images.
Re: Pack arbitrary files into PNG and access them using JavaScript
#16Earlier quoted context omitted.
It doesn't. You can load the img tag, but the browser will not let you access the image itself from javascript, unless you have the proper CORS headers.
Quite right - it will complain that the canvas is "tainted" and won't let you do useful things like calling `getImageData`.
Ah -- useful to know. Thanks for the corrections, folks.
Re: Pack arbitrary files into PNG and access them using JavaScript
#17I guess this would be useful with Amazon's free unlimited cloud photo storage.
Only if they leave the photo as a losslessly compressed png. They might convert to a lossy JPEG on upload, which means your data is toast.
Re: Pack arbitrary files into PNG and access them using JavaScript
#18I guess this would be useful with Amazon's free unlimited cloud photo storage.
Only if they leave the photo as a losslessly compressed png. They might convert to a lossy JPEG on upload, which means your data is toast.
Two can play at that game. You can store data in JPEG that can even survive recompression with lower quality. If it's worth it to you to go to all that trouble, that is.
Re: Pack arbitrary files into PNG and access them using JavaScript
#19The only use I see for this is for compressing files uploaded to a hosting where you can't enable gzip encoding. I already use static gzip encoding in all my deployments and I got less problems with cross-origin requests from custom-coded binary files than from images.
Most people won't find any real-world use for this, but it's cool/clever enough by itself that it's worth the author's time and effort.
Re: Pack arbitrary files into PNG and access them using JavaScript
#20Earlier quoted context omitted.
Only if they leave the photo as a losslessly compressed png. They might convert to a lossy JPEG on upload, which means your data is toast.
Two can play at that game. You can store data in JPEG that can even survive recompression with lower quality. If it's worth it to you to go to all that trouble, that is.
Interesting paper: Bypassing Cloud Providers’ Data Validation
to Store Arbitrary Data [1]
>JPG & PNG Steganography Encoder (JPG-PNGStega). The purpose of this encoder is to inject data (hiding it) in JPG and PNG files. It takes a File Format Sample (JPG or PNG) and, for each pixel, it injects 3 bits of data in the LSBs (Least Significant Bit). There are more sophisticated image steganography methods already widely discussed. However, the use of this encoder shows that even basic meth- ods of JPG and PNG steganography are possible in SaaS applications, and the exploitation of such method may bring impacts