Hector, the example URL below is just the JSONP Flickr feed URL. It's not a
complete example, so it doesn't show the cross-site JSON download in action.

Here are a couple of more complete examples that do a cross-site JSON
download of that feed:

http://mg.to/test/flickr/jsonp/static.html

http://mg.to/test/flickr/jsonp/dynamic.html

(Warning: These load an unedited Flickr feed and may contain offensive
images.)

The first one uses a static <script> tag to download the Flickr JSON data.
It will load a new set of images each time you reload the page.

The second one uses a dynamic script element. Click the Load Photos button
to load a set of images; click it again to load a new set.

These examples use straight JavaScript code with no libraries (not even
jQuery!) to make it clear exactly what the code is doing. They don't have
any error handling, and they also don't try to deal with a memory leak issue
described here:

http://mg.to/2006/01/25/json-for-jquery#comment-2254

When I get some time I'll post an example that fixes that problem, and also
one that uses jQuery and my JSON (JSON) plugin.

If you used Ajax to download the Flickr feed, you would need a server-side
proxy, because XMLHttpRequest will not load data from a different domain.
The JSONP method bypasses the cross-domain security, because script tags and
elements are not subject to that restriction. So you can use straight
JavaScript with no server code required.

There's no formal specification for JSONP, in fact many web services offer
it without calling it that (they just call it "JSON with a callback
function" or the like). There's not much to it, just JSON data wrapped
inside a callbackFunction(). Googling the term will show several articles
about it, including Bob Ippolito's original article describing the format.

-Mike

p.s. I need to get back to you on your other message - I didn't forget, but
I had to get some work done on my "day job". :-)

> From: Hector Santos
> 
> But Michael, please excuse my ignorance. I'm curious. I have 
> to ask because I still do not see this "JSONP XSS loophole."
> 
> Isn't this flickr example you showed below is selft 
> containing with the same site I/O? Where is the cross-site logic?
> 
> Do you have a link to some official or 'proposal' or draft 
> specification on JSONP?

> On Aug 13, 7:35 pm, "Michael Geary" <[EMAIL PROTECTED]> wrote:
> > No, you can load *scripts* cross-site with no problem.
> >
> > It's true, a server-side proxy is the only way to do a 
> > cross-site Ajax download. But if the information is available
> > in any kind of executable JavaScript format, you can use a
> > script tag or a dynamic script element to download it.
> >
> > That's what the JSONP (JSON with callback) format is all 
> > about - wrap a JSON object inside a callback function whose
> > name is given in the request URL. Here's an example:
> >
> >
http://www.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallb
ack=fotofeed
> >
> > That URL returns:
> >
> > fotofeed({
> >   "title": "Everyone's photos",
> >   "link": "http://www.flickr.com/photos/";,
> >   // more stuff here, including an array of photo links and info
> >
> > })
> >
> > If you create either a script tag or a dynamic script element with 
> > that URL in the src, it will call your "fotofeed" function (or any 
> > function you name in the jsoncallback= URL parameter) and 
> > pass it the JSON data.

Reply via email to