WebAppers

/ best free open source web resources /

Shopify

Cross Domain Ajax using CSSHttpRequest

Posted · Category: Framework

CSSHttpRequest is cross-domain Ajax using CSS. Like JavaScript includes, this works because CSS is not subject to the same-origin policy that affects XMLHttpRequest. CSSHttpRequest functions similarly to JSONP, and is limited to making GET requests. Unlike JSONP, untrusted third-party JavaScript cannot execute in the context of the calling page.

  CSSHttpRequest.get(
        "http://www.nb.io/hacks/csshttprequest/hello-world/",
        function(response) { alert(response); }
    );

Data is encoded on the server into URI-encoded 2KB chunks and serialized into CSS rules with a modified data: URI scheme. The selector should be in the form #c<N>, where N is an integer index in [0,]. The response is decoded and returned to the callback function as a string:

    #c0 { background: url(data:,Hello%20World!); }
    #c1 { background: url(data:,I’m%20text%20encoded%20in%20CSS!); }
    #c2 { background: url(data:,I%20like%20arts%20and%20crafts.); }

CSSHttpRequest is open source under an Apache License (Version 2.0).

Requirements: IE6+, Firefox 2+, Safari 3+, iPhone
Demo: http://nb.io/hacks/csshttprequest
License: Apache License

8 Comments
  • Staxx

    Bah! What a truly nasty way of cross domain ajax. This is not the way!

  • sander

    how semantic :)

  • mrLami

    Singing along with the choir…

    Whats the use or point of this again?

  • http://www.scottradcliff.com Scott Radcliff

    I have to say I agree with the others. I see no point. This seems to be a classic case of reinventing the wheel, and even then I can’t think of a case where I would need it.

    Do you have any examples of useful cases where this has been used?

  • Nate

    don’t do it!

  • http://www.steinhaug.com/ Kim Steinhaug

    Hmm, as proof of conecpt it is nice however what is better is to create a simple proxyserver. Not many lines of code needed, and you do not need to do much different either…

  • http://stupidassfuck.com John

    I almost jizzed my pants when I saw this but then saw that it is only limited to .get()

    if only POST is supported.

  • Gregory Magarshak

    It’s interesting. I’m sure the idea was to make the code “safe”, i.e. it won’t run any javascript on your page. But it could still mess up your css.

    I would suggest if you do use this technique, LOAD IT FROM ANOTHER FRAME. That way it can’t mess up the CSS.

    Otherwise it seems to me to be a cool cross-domain technique. It solves the “trust the provider” problem. However it still does not solve the “authenticated user” problem. A superior solution (at least until browsers tighten security) is the cross-domain communication iframe technique.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons