Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
05 Oct

Cross Domain Ajax using CSSHttpRequest

  • Framework
  • Leave a Comment

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

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Stylize Web 10 Best Cross Browsers CSS Hacks

Stylize Web 10 Best Cross Browsers CSS Hacks

Easy To Use Image Placeholder jQuery Plugin

Easy To Use Image Placeholder jQuery Plugin

Paragraph, Word & Character Counting with Countable.js

Paragraph, Word & Character Counting with Countable.js

A Useful String Manipulation Extension for JavaScript

A Useful String Manipulation Extension for JavaScript

Website-Ready Color Schemes for Color Schemers

Website-Ready Color Schemes for Color Schemers

Security of Mashup Applications for Enterprises Part II

Security of Mashup Applications for Enterprises Part II

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.

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • How to Create Realtime Multi-player Games in HTML5
  • A True Responsive jQuery Lightbox Plugin for Free
  • Create an Amazon-like Navigation Menu with jQuery
  • Super Smooth CSS Transitions for jQuery
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
  • How to Use Web Workers for Image Manipulation
  • Free Responsive HTML5 + CSS3 Site Templates
  • How to Make FullScreen Page Transitions with CSS
  • Ghost: A Revolutionary Open Source Blogging Platform
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu87
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes25
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code55
  • eCommerce24
  • Framework215
  • Hosting13
  • Information240
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools294
  • Webmail14
Licesnes
  • BSD License67
  • CC License123
  • GPL License224
  • LGPL License40
  • License Free740
  • MIT License411
Sponsors
Advertise Here
Partners
MaxCDN