Normally, AJAX is limited to retrieving data on the same domain that served the page. This is a limitation of the XMLHttpRequest, done mostly for security purposes. There are several ways to get around this limitation, of course, using a variety of methods and techniques. This is one of the stranger that I’ve come across – CSSHttpRequest.

Essentially, this small JavaScript library exploits the fact that CSS stylesheets are not subject to the same domain policy, which enables cross-domain POST requests for .css files. This allows you to pull CSS rules from remote domains – rules that contain name-value pairs embedded in valid CSS styles. The particular technique used is to return name-value pairs in background url fields for fake style rules, as such:

#c0 { background: url(data:,Hello%20World!); }

The client-side applies these style rules when they return from the remote domain, then JavaScript is used to read the property values and turn them into essentially JSON data ready for client consumption.

Of course, there’s a reason that the same origin policy is enforced. Normally, resources on the same domain are considered trusted, while external resources are not. With a library like this, essentially, if you’re vulnerable to JavaScript injection, there’s not much you can do to keep someone from embedding CSSHttpRequest on your page then using it to pull content from a remote domain. Nasty trick, but it’s totally possible and even trivial to some extent.

There are certainly legitimate reasons to need cross-domain AJAX. However, I wouldn’t think to use such a technique on a public site – it has the feel of a hack since (AJAX isn’t supposed to cross domains, after all), and the potential erosion of public trust is not worth the benefits. As an exercise of an interesting technique, it’s very cool, though.