The twitter callback feature is nice – it makes it extremely easy to to add a twitter feed to a page. But to get the most benefit out of it, you really need to understand what it’s doing.
We’re going to look at how AJAX security works, specifically the Same Origin Policy, how Twitter gets around it, and the type of callback that twitter uses.
Note: the callback that twitter uses is entirely different from callback in the sense of passing a javascript function around as a variable. We’ll look at that in a future article.
AJAX Security
The XMLHTTPRequest Object, which is the javascript object used to make AJAX requests, has a “Same Origin Policy” which basically means that javascript on site1.com cannot use AJAX to directly load data from site2.com. This is a security feature, as it makes XSS (Cross-Site Scripting) attacks more difficult.
Worth noting, if the website is at site1.com, no scripts can communicate with any other site, even if the script was loaded from site2.com.
Work Arounds
There are a number of workarounds including iframes, java applets, and flash, but here’s a couple of the more common methods.
Proxying Requests
The way proxying works is to have a file on your server that grabs the data from a remote server and passes it along. Then for javascript, the data appears to be coming from your server, even though it actually originated at a remote server. This is what the Fancy part of my twitter demo does.
We’ll look at using a proxy to get remote data in a future article.
Remotely hosted javascript files
Scripts stored on other websites can be included on a page. As long as the script doesn’t need to call home after the initial load, everything works great. This is how a basic twitter function works: you load a script from twitter’s website and it communicates with your site via the callback feature. This is what the Simple part of my twitter demo does.
Here is a very basic page that uses Twitter’s callback feature and a remotely loaded javascript file to show my twitter status – remote data – on my website, by interacting with local javascript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>Simple Twitter Status</title>
</head>
<body>
<h1>My Twitter Status:</h1>
<div id="twitter_status">Loading...</div>
<!-- Put scripts down here for speed -->
<!-- this must come before we load the twitter script -->
<script type="text/javascript">
function showStatus(json){
json = json[0]; // we only care about the most recent status;
var myDiv = document.getElementById('twitter_status');
myDiv.innerHTML = '<img src="'
+ json.user.profile_image_url
+ '" style="float:left; margin:5px 10px 10px 0">'
+ json.text;
}
</script>
<!-- now load the twitter file -->
<script type="text/javascript" src="https://twitter.com/statuses/user_timeline/nfriedly.json?count=1&callback=showStatus&random=<?php echo time(); ?>" /></script>
</body>
</html>
Digging into Twitter’s callback method
Below is a trimmed down example of what Twitter’s API sends back when we make the request in the example above.
showStatus([{"in_reply_to_screen_name":null,"text":" [ Lots of information that I'm omitting because it's not the point. ] "]);Now, don’t worry about the jazz in the middle, just look at that showStatus(); that’s wrapped around it. First of all, how does Twitter even know that we have a function named show status? Because we said so in the url to the file -see how we added &callback=showStatus? That’s where the magic is. (Ok, technically we said & not just &, but that was just to pass XHTML validation. )
Cross-domain!
There’s a second important thing going on here – javascript from two different domains are interacting with each other. This is allowed because of how the Same Origin Policy works – everything is restricted to the local domain, but that means that everything can work together on the same plane.
It’s a beautiful thing
I hope this gave you a little bit better understanding of how AJAX security works and how Twitter gets around it and is still able to interact with your site. In the future, I’ll have an article on how “traditional” callbacks work that will use jQuery and more AJAX to dive a bit deeper into the topic.
Javascript Ninja for Hire
I have extensive experience working with AJAX, Twitter, and related technologies. I’m just the man you need to make your next javascript development project shine!