Consuming RSS Cross-Domain in jQuery and MVC

AJAX is a powerful tool for making asynchronous requests from the client. Unfortunately, this is often limited to same domain requests due to security restrictions put in place to prevent cross site scripting. This also makes it difficult to consume external data such as RSS feeds if a security policy hasn't been put in place to allow cross domain callers with javascript. In these cases it's necessary to use your server to proxy the data back to your page.

Fortunately this is very simple. For brevity, I'm going to pass the feed URL as a parameter directly to my controller and return the feed. In practice, you should verify the source of the request and accept some sort of identifier, storing your feed urls server side to prevent others from exploiting your site. I'm going to use a random feed from Feedburner.

Creating the Proxy

We're going to start by creating an extremely simple controller action. This actually simply downloads the contents of the feed and returns the raw text back to your script. You can put this action into any controller you wish. I'm going to put it in my Home controller so the path to access the action will be "/home/getfeed" and it will take a parameter called feedUrl which will be a URL Encoded value. Since we're passing the url as an encoded querystring parameter, we have to disable input vaidation. Here is the controller action:

[ValidateInput(false)]
[HttpGet]
        public string GetFeed(string feedUrl)
        {
            using (var c = new System.Net.WebClient())
            {
                return c.DownloadString(Server.UrlDecode(feedUrl));               
            }

        }

Looking at the code above you can see that the GetFeed action method simply downloads the contents of the target URL and returns it to the client. Now let's look at the javascript. I'm using jQuery and jFeed to process the RSS and display in on the page. If you don't have jFeed you can download it here. To start with, download jquery.jfeed.pack.js and save it into your scripts folder. If you already have a jQuery reference, you can just add a link to the jFeed script to your <head> section, otherwise add both of the following:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/jquery.jfeed.pack.js"></script>

Next, add a container to your page to hold the RSS Content:

<div id="feedItems"></div>

And finally, just before your closing body tag, add the javascript to access your feed data. For this example, we're going to output a link to the article:

<script type="text/javascript">
    	$().ready(function () {
    	    //Use feedItems to see if an error was thrown.
            $('#feedItems').ajaxError(function (event, request, settings, thrownError) {
                $(this).text('There was a problem downloading the feed. ' + thrownError);
            });

            //Get the feed and output the links
            var feedUrl = "http://feeds2.feedburner.com/PolymorphicPodcast";
            var getUrl = '/home/getfeed/?feedUrl=' + encodeURIComponent(feedUrl);
            var container = $('#feedItems');

            $.getFeed({
            url: getUrl,
            success: function (feed) {
               	$(feed.items).each(function () {
               			$('<p/>')
						.append($('<a/>')
								.attr('href', this.link)
								.text(this.title))
						.appendTo(container);
               		});
				}
            });        
        }); 
</script>

Dustin Horne