Cross-domain remote JSON in Javascript (without a proxy)

When I created Banter, I challenged myself to do the whole thing client-side, in the browser. Of course, that means it would all be done in Javascript.

The first problem I anticipated running into would be making remote queries to the Twitter API via AJAX. Since browsers enforce strict rules on what domains you can make remote requests to (you can only make requests to the same domain as the page running the javascript), I wouldn’t be able to get the JSON feed that way. This is a security limitation, so people can’t make malicious remote requests.

Normally what you do in a situation like this is to create a server-side proxy running on the same domain as your page, which makes the actual request to the remote domain, and returns the results. Since the proxy is on the same domain, the AJAX request is allowed and everything works fine. However, I had resolved not to use any server-side code to grab the Twitter feed, so that option was out.

After a little bit of research, I found about a slightly sneaky technique that people are using to load remote JSON without needing a server-side proxy. This is how it works:

If you add a <script> tag to the pages’s DOM, the browser will immediately run its contents. So, all you need to do is add a <script> tag to your page, with the URL of the remote JSON you want evaluated as the ’src’ attribute. Once the tag is added to the DOM, the browser fetches and evaluates the script.

Alone, this doesn’t do us much good. Sure, we can evaluate a bunch of JSON, but we can’t access that data from the other Javascript on the page since it wasn’t actually stored anywhere. Fortunately for us, most APIs that provide data in the JSON format also accept a ‘callback’ parameter. Provide that parameter, and the API will return your JSON, nicely wrapped in a function call to whatever you provided as your callback. Now, when that <script> tag gets evaluated, your callback function gets called with the data as its argument. Cross-domain JSON without anything done by us server-side!

Here is what it looks like in practice:

function remote_query() {
    url = 'http://api.twitter.com/1/statuses/user_timeline/kcbanner.json?callback=twitter';
    var script = document.createElement('script');
    script.src = url;
    document.body.appendChild(script);
}
 
function twitter(data) {
    // Do something with the results.
}

If you load that twitter url, you’ll see that it contains something like:

twitter([ A whole bunch of JSON ]);

So once the browser loads that script tag, it gets evaluated, and our twitter function gets called. No need for any XMLHttpRequests or server-side scripts.

Hopefully this was helpful!

Update: Apparently this is a well known technique called JSONP. I completely missed that in my googling. Thanks commenters!

-Casey