Today's web is all about AJAX. Google Mail, Facebook, Twitter, and just about everyone else uses it these days thanks to the helping hand of libraries such as Microsoft AJAX, jQuery and others. At the base of all of this technology is the XMLHttpRequest object that performs background requests to provide asynchronous updates. While being the cornerstone of today's web, it has also spawned interest from the wrong kind of developers, and security became a concern.

In the older days, this problem was 'fixed' by browsers in different ways. But more recently, a new standard was adopted by W3C (the folks that set the web standards) called Cross-Origin Resource Sharing". It has been introduced in Firefox 3.5 and Safari 4.

This is why you'll have a hard time calling web services from JavaScript in these browsers, unless the service specifically implements the access control features described in the standard. And since most services that our outside of your domain are also outside your control, you can't change them to include support for this new standard.

Which is why I was having a hard time implementing my client-side proof of concept for a future version of our product. It took me a while to figure out that the problem came from this new implementation, since FireFox does not let your request fail, it simply strips out the content.

If you look in FireBug and see a response like this, you'll know why:

To your code, the request will have succeeded (unless you specified that the result was of the form 'xml' or 'json'), but there won't be any result to parse. This can be quite a nuisance if you're just trying something out in a local html document, and at least in FireFox 3.6, there is no way to turn this 'restriction' off.

However, I was able to trick it by using Fiddler. Fiddler is a web proxy used to diagnose HTTP requests and responses, but it can do much more than just inspecting. You can do all sorts of nifty things like changing requests and replies in flight.

I added a custom rule to Fiddler, using the following code:

1
2
3
4
5
6
7
8
9
10

 static function OnBeforeResponse(oSession: Session)
    {
        ...
        
  if (oSession.HostnameIs("services.aonaware.com")) {
   oSession.oResponse.headers["Access-Control-Allow-Origin"] = "*";
  }
  
  ...
    }

This rule adds the required header for FireFox to allow the result to be parsed by your client-side code:

Note that this doesn't work unless you have Fiddler with the custom rule running on the client machine, so you'll have to resort to other options when creating real applications, but to me it's fine for quick tinkering.