Friday, October 24th, 2008
CSSHttpRequest: cross-domain Ajax using CSS for transport.
<p>XHR is so 1997. Now it is time for some CSSHttpRequest action, a device that allows you to run cross domain Ajax requests thanks to a CSS hack:Similar to JavaScript, this works because CSS is not subject to the same-origin policy that affects XMLHttpRequest. Like JSONP, CSSHttpRequest is limited to making GET requests. Unlike JSONP, untrusted third-party JavaScript cannot execute in the context of the calling page.
A request is invoked using the
CSSHttpRequest.get(url, callback)function:JAVASCRIPT:
Data is encoded on the server into URI-encoded 2KB chunks and serialized into CSS
@importrules with a modifiedabout:URI scheme. The response is decoded and returned to the callback function as a string:CSS:
Got to love a good Friday hack. This is the second @import hack like this in the space of a few months.
Related Content:
3.4 rating from 99 votes
Funny, unfortunately probably not anything more than funny though … ;)
My guess is that this will only work until most browser vendors figures it’s actually a security hole or something…
Does not work in Opera 9.6 unfortunately.
Could an exploit of the tag’s getPixel() allow similar data passing cross domain from picture files? Seems like this has already been thought of in Opera 9.x
of the CANVAS tag the above should have said
Hacks like this isn’t that future proof. But they are still interesting. :) But I think the window.name approach is cleaner even though it is also a hack.
Whenever a non local image is drawn onto a canvas it becomes “tainted” and won’t allow for pixel level manipulation anymore. They thought of that :)
VK on comp.lang.javascript did similar hacky things
http://jsnet.sourceforge.net/
I wouldn’t use this technique. Too hacky.
“…untrusted third-party JavaScript cannot execute in the context of the calling page.”
What about loading a CSS file with:
body {width:expression(“alert(‘code’);”)}
I could write CSS as JSON like here http://www.featureblend.com/css-json.html and ajax it with jquery onReady and attach like so all css at the end. CSS these days gets very huge. The only problem would be the caching of the actual css file. If it would be possible to do that and at the end attach via jquery an external css file to the dom and the browser caches that file. It could be fast. May be … no idea :D
Checkout http://code.google.com/p/crossxhr/ for an alternate implementation based on flash.