For my recent
geolocation demo I wanted a web page hosted on
somebits.com to be all Web 2.0 and dynamically load data from
geonames.org. I’ve never really done AJAX before so I was surprised I couldn’t do this remote call because of security restrictions. And I was even more horrified at the workaround. I couldn’t find any place where all this is succinctly explained, so here’s some notes.
The same-origin policy is a rule web browsers enforce for security. Basically, Javascript code running on a webpage at somebits.com cannot access any resources from any other domains. No access to the DOM of other sites, no cookies, no frames. And, important for AJAX, no XMLHttpRequest to a remote domain. So much for mashups where you load data from multiple sites!
There’s a variety
of workarounds. The one I used is JSONP
which turns the declarative JSON
data you would load from a web service into imperative Javascript
code. Where a JSON reply from a web service might be
{"balance": "3942.12"}
A JSONP reply would include a function call:
callback({"balance" : "3942.12"})
Why wrap data in a
function call? Because the same-origin policy
does not apply to
scripts! A browser won’t let you load a few bytes from a remote
server as data but it will happily load those same few bytes as code
and execute it. And so you execute the remote JSONP in your page and
it calls your
callback() function to use the data. A kludge, but frameworks like
jQuery hide the mess.
At first blush this seems crazy. It’s insecure to let me load remote
data but it’s fine to let me run remote code? But I’d misunderstood
the purpose of the same origin policy. The reason
somebits.com can’t load stuff from geonames.org
isn’t to protect somebits, it’s to protect geonames!
Without this policy XSS
attacks would be trivial; any Javascript code in your browser
could steal cookies from other sites, inspect private data, etc. Apparently executable Javascript is considered not-private, so I’m allowed to execute anyone else’s code anywhere. (Terrible assumption, no doubt there’s already a class of XSS attacks against JSONP services.)
Frankly the whole thing
smells
rotten and shows just how complex and twisted the Javascript
security model is. There’s a couple of proposals for more cleanly enabling remote web service requests. Firefox 3.5 implements HTTP access control, a W3C standard where a website can say “go ahead and let anyone load this content remotely”. IE8 implements XDomainRequest, which is restricted to “anonymous” requests to limit security exposure. And so the squabble continues.
The Discovery of France tells the story
of the unification of France as one cultural identity stitched
together out of the zillion little villages, languages, cheeses that surround
the capital of Paris. It’s a cultural history
of France in the 18th and 19th centuries exploring life in the
country before it was truly unified by roads and telegraphs.
