Friday, October 24th, 2008

CSSHttpRequest: cross-domain Ajax using CSS for transport.

Category: Ajax, CSS

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:


  1. CSSHttpRequest.get(
  2.         "",
  3.         function(response) { alert(response); }
  4.     );

Data is encoded on the server into URI-encoded 2KB chunks and serialized into CSS @import rules with a modified about: URI scheme. The response is decoded and returned to the callback function as a string:

  1. @import url(about:chr:Hello%20World!);

Got to love a good Friday hack. This is the second @import hack like this in the space of a few months.

Posted by Dion Almaer at 9:57 am

3.4 rating from 105 votes


Comments feed TrackBack URI

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…

Comment by ThomasHansen — October 24, 2008

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

Comment by blinkingmarquee — October 24, 2008

of the CANVAS tag the above should have said

Comment by blinkingmarquee — October 24, 2008

Hacks like this isn’t that future proof. But they are still interesting. :) But I think the approach is cleaner even though it is also a hack.

Comment by Spocke — October 24, 2008

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 :)

Comment by Hans Schmucker — October 24, 2008

VK on comp.lang.javascript did similar hacky things

I wouldn’t use this technique. Too hacky.

Comment by PeterMichaux — October 24, 2008

“…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’);”)}

Comment by Jordan — October 25, 2008

I could write CSS as JSON like here 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

Comment by Aimos — October 25, 2008

Checkout for an alternate implementation based on flash.

Comment by borisreitman — May 3, 2009

Leave a comment

You must be logged in to post a comment.