web development

The Greeks sure were fond of super-hero team titles.  There was Jason, commander of the Argo and her crew of the best of the best, pitted against irresistible forces beyond moral man’s endurance.   What does this have to do with JSON, the JavaScript Object Notation standard used by the web 2.0’s best of the best of overcome an accent foe called Same Origin Policy?  Can’t think of a thing, I just really liked the title.

A funny thing happened on the way to the Mashup. I’m sure someone somewhere, maybe even here, told you that RSS feeds were going to revolutionize the way we distribute information.  We were all so right in so many ways because RSS, or ATOM if you prefer, has opened up the world to the unimagined possibilities available online.  Think of some way that you want to consume information.  Go ahead, I’ll wait.  Ok, you are all right you can consume information that way. Oh, heh, I mean almost all of you are right.  That guy in the back with the Helvetica shirt in Metalica font, I’m sorry but we can’t help you with your idea.  Thing is, as much as you may want to have a single page that can then pull and update XML based RSS feeds from any site in the world from within the browser without refreshing, you’re not allowed.  It is for your own protection actually.  We call it the Same Origin Policy.

Here is the idea.  When your web browser pulls down a web page’s code from a modern site, it is usually pulling down a collection of HTML, Stylesheets, Javascript.  That HTML tells the page what content goes where and what images to place by the content.  The Stylesheet (CSS) tells the browser how to make that content look and how to make it act on the page.  Then the Javascript is there to give the page life, make it interact with events, make it do impressive things that we have come to love and cherrish.  In the AJAX world, those impressive things involve grabbing information from the server and updating the page without screen refresh.  Javascript is nye omnipotent in the browser, and yet there are some quantum limitations built into the works.  Beyond the sandboxing of JS, there is one little design decision from Netscape 2.0 that has totally altered the web 2.0 landscape.  Netscape decided that a browser would only allow scripts to interact with domains that the page came from.  If a page is loaded from www.bobsdiscountlasers.com then AJAX calls are limited to bobsdiscountlasers.com.  The grand illumination of mashups, where data flows from many different locations onto one page in a relevant way, almost never happened because of this.

Web browsers weren’t designed with mashups in mind, and ‘the warts have been there from day one’, [David Boloker, cofounder of the OpenAjax Alliance and IBM’s CTO of Emerging Internet Technologies] says. Browsers contain a security feature called the same-origin policy that’s meant to keep malicious code hosted on one site from grabbing data, such as stored credentials, off another site. The same-origin policy prevents websites from one domain from requesting data belonging to another domain. ~ Security services and Mashups

But, of course, Mashups do exist.  We see Google Maps on thousands of pages not under the google.com domain.  How is it done?  We’ll get to the hero of the day in a second, for now lets look at other popular workarounds

• Mashup at the Server Side:  Since the JS limitation is browser based, you could do all of your mashups at the server.  The server could serve as the collector of the different sources of information, combine them intellegently and cache the results.  At best this idea is inconvenient because it adds layers where they need not normally be.  At worst this does not scale when you have a single location for distributed information
• Flash/Flex:  The Flash VM doesn’t have the Cross Domain limitation that plagues JavaScript.  A file on the server gives a list of permitted sites that the Flex app can pull data from.  I have talked with Adobe Evangalists about this option and they seemed to hint that this design decision was intented to hit javascript where it was weakest.
• AJAX Proxy.  Similar to the first method, a proxy allows the client to pull the information through it.  It isn’t stored on the proxy, though it can be cached, and no combination is done.  Again, this is a scaling issue

Stop passing code, start passing data. What all of these work arounds do is bypass the security concern with Same Origin Policy (SOP).  SOP was originally intended to combat early attempts at Cross Site Scripting (XSS).  Modern XSS has a nasty list of exploits that I don’t have time for here, but one way to think about it is this:  If you let Javascript pull code from untrustworthy places you are inviting problems.  One possible approach to this issue was to stop the push and pull of code but to allow the pushing and pulling raw data.  That is what JSON is, a way to encode data to be pushed and pulled using AJAX calls.  Though the X in AJAX stands for XML, AJAX really is more often using JSON because SOP will allow it to be used cross-domain.  So with JSON you can pull in Google Maps and that list of Micro Brewerys right in the browser, Mash them up using Javascript, and asyncroniously keep the data refreshed, the app reactive, and your buzz in good spirits (You are walking to these pubs, right?)

My prediction; RSS feeds are going to move away from XML and on to JSON in the future.  Or at minimum, support both.  John Resig, the creator of jQuery, even has a converter to get us all started.

Photo attributed to jasonr611

Technorati tags: software, json, javascript, javascript object notation, rss, atom, xml, mashup, web development, code