blog :: web development :: rest :: json callback parameter

Using A JSON Callback To Defeat The Same Origin Policy In AJAX

Posted on 12 Mar 2009 by - Permanent link Trackback this post Subscribe to this post Comment on this post -   

So you’re writing a cool AJAXified mashup, grabbing data from various APIs and munging it together in the browser? If you’re seeing this Firefox error in Firebug, you want to read the rest of the article:

uncaught exception: Access to restricted URI denied (NS_ERROR_DOM_BAD_URI)

You’ll see similar errors in Opera and Safari, whilst Internet Explorer will happily service the request.

What Causes NS_ERROR_DOM_BAD_URI?

The exception gets raised when you send a HTTP GET requested to a different domain via an XMLHttpRequest object.

If you load some javascript into your page from http://www.mydomain.com/code.js you can only make AJAX calls to URLs on the server at www.mydomain.com. Yes, subdomains count as different domains to!

This restriction is called the Same Origin Policy and it’s generally a very good thingTM as it makes our browsers much more secure. It does cause headaches for those of us working with JSON over XMLHttpRequest but don’t worry, help is at hand.

How To Fix NS_ERROR_DOM_BAD_URI?

You can install a proxy at www.mydomain.com to get the data and send it on to your page but this is an incredibly bad idea:

  • The security implications are manifold
  • It slows down data load
  • It increases server bandwidth

A much better solution is to programmatically add a new <script> tag into the page’s header to load your data.

You can do this with a bit of code like this:


var script = document.createElement('script');
script.setAttribute('src', 'http://www.anotherdomain/api/stuff.json');
document.getElementsByTagName('head')[0].appendChild(script); 

Or you could use jQuery’s JSONP to do the hard work for you.

In both cases you need to supply a javascript callback function that will be executed when the request completes and the data is returned. This will only work for JSON APIs that include a callback parameter (in some cases it’s called json_callback). Thankfully there are a lot of APIs that do this.

JSON APIs That Support Callbacks

Pretty much every Yahoo API supports the callback parameter (that includes Flickr and del.icio.us too).

Google’s Javascript APIs tend to use wrappers to work around the problem (and constrain how you manipluate the results) so there’s little for you to do here. One exception to this is the YouTube JSON API, which dies include a callback.

Music mashup authors will be pleased to note that Last.fm definitely provides callback support.

There are lots more APIs that support JSON callbacks, have a loook through the excellent documentation at Programmable Web to get some ideas.

API Providers, Please Support Callbacks

JSON callbacks are fast becoming standard practice, so if you’re writing an API that supports JSON, I recommend adding callback support. It’s not a difficult thing to add but it can make a massive difference to mashup authors.


Creative Common licensed photo by Dmitry Baranovskiy.

0 Trackbacks

Trackbacks are closed for this story.

2 Comments

 Kyle Simpson said at 2009-04-17 16:16

Better cross-domain Ajax, with flXHR

I understand why JSONP is such a popular solution to the cross-domain Ajax problem. And there are definitely good things about it. But I would personally prefer to use a solution like flXHR (http://flxhr.flensed.com) which is a Javascript+(invisible)Flash solution for cross-domain Ajax. The unique part of flXHR compared to other similar solutions, and even JSONP or iframe proxies, is that flXHR implements an identical API to the native XHR object.

This means that flXHR can easily be dropped into any existing page, even/especially those with Javascript frameworks that already do Ajax for you, and no other code has to change, but you immediately get full cross-domain Ajax ability. No more being restricted to returning only JSON/JSONP, now you can return text, xml, JSON, even binary, all cross-domain. And all you need is flXHR and the server to publish a simple crossdomain.xml policy file (per Adobe's security model) to opt-in to allowing the communication.

flXHR aims to make cross-domain Ajax not only drop-dead easy, but also fully compatible cross-browser and cross-platform, by implementing the solution inside of the already standard API for Ajax. Ajax with flXHR is more direct, more secure, and more compatiable and future-proof, than any other cross-domain Ajax hack currently available.

 MMMeeja said at 2009-04-17 17:15

Thanks, Kyle

flXHR looks like an interesting solution, I'll definitely look into that. Thanks for leaving a comment pointing it out.

Comments are closed for this story.

 

Sitemap

Copyright © 2006-2009 MMMeeja Pty. Ltd. All rights reserved.