Pack arbitrary files into PNG and access them using JavaScript
1–10 of 31 posts
Re: Pack arbitrary files into PNG and access them using JavaScript
#2Any ideas why I would want to do this?
Re: Pack arbitrary files into PNG and access them using JavaScript
#3Any ideas why I would want to do this?
Getting around the same-origin policy for GET-ing binary resources?
Re: Pack arbitrary files into PNG and access them using JavaScript
#4Re: Pack arbitrary files into PNG and access them using JavaScript
#5I'm not sure what the use case for this is, but you can also add arbitrary data to PNG files by adding a custom chunk. As long as the chunk is marked as ancillary (the first letter of the chunk type is in lower case), it will not affect image decoding.
Re: Pack arbitrary files into PNG and access them using JavaScript
#6I guess this would be useful with Amazon's free unlimited cloud photo storage.
Re: Pack arbitrary files into PNG and access them using JavaScript
#7Earlier quoted context omitted.
Getting around the same-origin policy for GET-ing binary resources?
How would this get you around the same origin policy?
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?
Re: Pack arbitrary files into PNG and access them using JavaScript
#8Earlier quoted context omitted.
How would this get you around the same origin policy?
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.
Re: Pack arbitrary files into PNG and access them using JavaScript
#9Re: Pack arbitrary files into PNG and access them using JavaScript
#10I 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 ridiculously small file for a demo contest. He also put the JS loader (which is much smaller than the linked decoder) in a custom chunk on the PNG itself. By doing it that way, you can have a PNG that when renamed also contains a web page and/or more Javascript.
It's an interesting technique, for sure, but I've never been able to find a real use for it beyond the compression. With a content-type sniffing vulnerability or something, it could be an interesting way to deliver content to browsers, but otherwise it's really just a curiosity as best I can tell.