Featured

Yahoo Pipes and JQuery : Goodbye Same Origin Policy

I was chatting yesterday with my friend Simon about my somewhat late discovery of Yahoo! Pipes. I knew about it, I’d just never played with it. Pipes is ideal if you’re looking to create a mash-up from RSS feeds. Simon asked if Pipes were constrained by the Same Origin Policy whereby XHR requests are restricted to the domain serving the original page. I said I’d look into it.

And so I did. And the answer is No. It is indeed possible to mash-up content from a variety of RSS feeds all within the client Javascript. Whilst there are a number of ways to work around the Same Origin Policy (using a server-side proxy; dynamically creating a script tag), the beauty of Pipes is that it can return a JSONP response. By providing a callback function as an input argument, it is possible to perform cross-domain requests. So, Yahoo! Pipes acts as a conduit between a normal RSS feed (or any other content) and a JSONP response.

Getting to grips with Yahoo! Pipes is easy, so I won’t go into details. One great feature is that it is possible to pass arguments to the pipe. So, I’ve set up a simple pipe that receives an RSS feed url as an input argument and returns the output.

My pipe url read as follows:

http://pipes.yahoo.com/pipes/pipe.run?_id=Lh5grVhL3RG9artmMlrX_Q&url=

I simply need to add the feed url to the parameter and I’m away. To fetch my Twitter feed as a pipe the url now reads:

http://pipes.yahoo.com/pipes/pipe.run?_id=Lh5grVhL3RG9artmMlrX_Q&url=http://twitter.com/statuses/user_timeline/3435901.rss

Put it in your browser and give it a try.

Next step is to to tell Pipes to return the content as JSON by appending the url with the parameter _render=json, and also the name of the calback method by supplying the parameter _callback=?. The question mark is used by JQuery which supplies a dynamically generated method name, but a concrete method name can be supplied too.

JQuery makes it really easy to consume JSON. Here’s how it works:

 
$.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=Lh5grVhL3RG9artmMlrX_Q   >>
                  &url=http://twitter.com/statuses/user_timeline/3435901.rss&_render=json&_callback=?",
	function(json) {
		// do something with json response
	}
);
 

Now it’s simply a case of iterating over the JSON response and extracting each feed item. Here’s an example web page that will retrieve any feed you supply the url for.