Windows Live Quantum Mechanics : cross domain

Cross-Domain Communication Using Domain Lowering

dthorpe — Fri, 28 Sep 2007 08:52:28 GMT

More than a few blog posts ago I stated my intent to publish a series of articles on cross-domain communication techniques. More time has passed than I had intended, but at last here is the start of that series of articles. The series will explore progressively more advanced cross-domain techniques as well as their strengths and weaknesses, culminating in an announcement about stuff we've been working on that I think you'll find interesting.

Cross-domain communication is usually discussed in the context of a browser client communicating to a web server that is different than the domain of the web page currently shown in the browser. The browser client displays a page from server foo.com, and that page tries to access data on server bar.com. This is forbidden by the same-origin browser security policy because bar.com isn't foo.com.

Server Side Proxy

One relatively simple way to resolve this is to have the browser page request data from the page's web server, and have the web server relay that request to the actual third party server. The browser displays a page from foo.com, and that page makes a data request to foo.com which foo.com relays to bar.com. Bar.com replies to foo.com, and foo.com forwards that response on to the browser client page to complete the circuit.

While this solution is simple and quite widespread today, it has some significant problems:

Scalability and Network costs: The request and response travel across your server's network twice. Request in, request out, response in, response out. Traffic on your server network grows four times faster than growth of your application use. That means you'll reach network saturation four times sooner than with other techniques, and you'll pay four times more (in server network traffic costs) for the privilege.
Impersonating the user: When your foo.com server makes a request to bar.com seeking data for the user, you're essentially impersonating the end user. If the data on bar.com requires any sort of user identification or authorization, your server side proxy suddenly jumps from super simple to super difficult. It's easy enough to ask the user to log in to bar.com, but your foo.com can't see anything that goes on in bar.com. In particular, foo.com cannot see whatever browser cookies that bar.com sets to indicate logged in state. Thus, it will be next to impossible for foo.com to present the appropriate cookies or credentials in its http request to bar.com to make bar.com believe that the request is coming from the legitimate user. And this should be difficult - this is nothing short of a man-in-the-middle attack on bar.com's security!

So, server side proxies are a quick and dirty way to toss anonymous data around, but they don't scale well and they hit a wall when the data requires authentication.

Web Sites With Subdomains

Web sites and web applications generally start out as simple beasts running on a single web domain (www.foo.com). As the site grows in functionality and complexity, the incentives to break that site up into subdomains (downloads.foo.com, feedback.food.com, images.foo.com) grows as well. Perhaps your web site has a download area that needs to be optimized for large file transfers. That would probably be easier to fine tune as a server or cluster dedicated to that function than to try to tune the entire web site for large file downloads.

Subdomains often sprout as a byproduct of a company's internal structure. It takes a lot more effort to coordinate updates to one central server shared by multiple departments on different schedules than for a department to own their own subdomain, nicely isolated from the rest of the company's constant revisions.

Double Edged Sword

Domain isolation is convenient to let you get your work done independently of the noise going on in the rest of the company's web presence, but also presents a new problem: web pages served from your subdomain cannot share information with web pages served from other subdomains of your company. If the user logs in to your company's main page, the browser cookies representing that login state are not accessible to your subdomain.

Lowering the Domain Barrier

The major browsers support a technique around this quandary, to allow subdomains to operate as equals within a common shared context. The HTML document object has a domain property which normally reflects the complete domain name of the server from which the HTML document was loaded. The browser will allow you to assign a subset of the current domain name to the document.domain property to indicate that you wish for the HTML document to be treated as though it were loaded from the parent domain.

So, an HTML page served from downloads.foo.com can assign document.domain = "foo.com" in a JavaScript code block. From that point forward, browser domain security checks will treat that page as a peer of any page in the foo.com domain.

The browser will (should) only allow you to change the document.domain to a less specific version of your current domain. one.two.three.foo.com could be lowered to foo.com, or could be lowered to three.foo.com.

The browser should not allow assignment of a top-level domain (domain suffix) to document.domain. You should not be able to change a document domain from "one.foo.com" to "com". There have been browser bugs in this area in the past where a browser implementer mistakenly interpreted "top level domain" to mean "the bit of the domain after the last dot". ".com", ".edu", and ".org" are top level domains, but ".co.uk" and ".co.jp" are TLDs also.

The browsers will not allow you to raise the domain of an HTML document to something more specific than its domain of origin, nor allow lateral domain shuttling. Changing document.domain from "two.foo.com" to one.two.foo.com" is forbidden. Changing a document.domain from "one.foo.com" to "two.foo.com" is forbidden.

Irreversible (Mostly)

Firefox 1.5 and 2.0 will not allow you to assign a domain name that is more specific than the document's current domain name under any circumstances. Once you lower one.foo.com to foo.com, it's stuck at foo.com forever. The only way to clear that state is to reload the page.

IE6 and IE7 will allow you to raise a document's domain back to it's actual domain of origin. If a page was served from one.foo.com, and you lower it to foo.com, IE will let you raise it back to one.foo.com. However, I've seen some instabilities and inconsistencies in the aftermath of "raising shields", so I don't recommend relying on this behavior. Since Firefox doesn't allow restoring domains to their original values, you should ignore the fact that IE sort of does allow it.

Bridging Silos Via Least Common Denominators

When an HTML document's domain is lowered to a parent domain, the security context and JavaScript symbol space of that document joins the security context and JavaScript symbol space of any and all pages that are also in the parent domain. JavaScript in your page served from one.foo.com and lowered to foo.com can access JavaScript functions and variables defined in other pages whose domain is foo.com, and visa-versa.

So, if you have pages on one.foo.com that would like to interoperate with pages on two.foo.com, you can use domain lowering to pull down the domain barriers just enough to allow them to talk to each other, but still provide domain protections against third parties trying to steal or corrupt the internal state of your web app. Place a JavaScript block at the top of each page in the "one" and "two" subdomains which assigns document.domain = "foo.com" and you're good to go. All the pages will operate as though they were served from the same domain, and can access anything in each other's DOMs and JavaScript symbol space.

One or the Other, Not Both

Note that once your one.foo.com page has been lowered into the parent domain, your HTML and JavaScript code loses all access to DOMs and JavaScript data in any other pages that are still in the original one.foo.com subdomain. A web page can only be in one domain context or the other, not both.

Interesting Inconsistencies

Domain lowering applies only to the DOM and JavaScript sandboxes. Parts (actually, nearly all) of the browser execute in native machine code outside the browser security sandbox. Native objects exposed to JavaScript in the sandbox are largely on their own to implement appropriate security checks on operations initiated by JavaScript. JavaScript can't access the local file system, for example, but if the user installs an ActiveX control for IE or a browser plugin for Firefox that allows local file access, and that extension declares itself safe for scripting, then JavaScript could use that control to access files on the local file system.

In both IE and Firefox, XMLHttpRequest (XHR) is a native object exposed to JavaScript. This is pretty obvious in IE6 since you have to construct the object using ActiveXObject; in Firefox you can deduce that the XHR is a native object from the phrasing of some error messages and error behaviors while the browser goes down in flames.

XHR is restricted to connecting only to the current HTML page's domain of origin. Domain lowering applies only to the browser sandbox. XHR operates outside the browser sandbox, enforcing same-origin domain policy on its own. This leads to an interesting - and valuable - inconsistency:

XMLHttpRequest is not affected by domain lowering.

This means you can actually have one foot in each domain: Your JavaScript executes in the context of the lowered subdomain (foo.com), but XHR requests made by your JavaScript are held to the domain restriction of the page's original subdomain (one.foo.com). XHR doesn't know anything about document.domain.

If you're trying to get your JavaScript to open an XHR to a resource on foo.com, this can be infuriating because XHR won't do it. You have to refer to an HTML page served from foo.com in order to get XHR to open a connection to foo.com.

The Money Shot

This inconsistency in the handling of document.domain enforcement/awareness makes the following scenario possible: The logic of your web app runs in the context of a page loaded from one.foo.com, and you want to XHR load data from two.foo.com.

Here's how you do that:

Make your html page A served from one.foo.com lower its document.domain to foo.com
Place an html page B on two.foo.com, and have it lower its document.domain to foo.com early in its load cycle. (A JavaScript statement in global scope in the <head> section is fine).
Implement a function GetData(callback) on this page that constructs an XHR request to load the desired data from two.foo.com. Wire up the XHR onReadyStateChanged to process the data completion using a function implemented in B.html, and in that function pass the received data to the callback function passed into GetData().
Insert an invisible (1x1 pixel) iframe on page A and set its src to http://two.foo.com/B.html
After page A has fully loaded, and page B in the iframe has loaded, JavaScript code in page A can call the GetData() function in page B through the iframe element: bframe.window.GetData(mycallback)

Believe it or not, this works. Domain lowering allows JavaScript to call between A and B, and the fact that B is served from two.foo.com allows the XHR request implemented in B to access two.foo.com.

Here Be Pixies. (Try Not To Piss Them Off)

The path through this murky realm is neither straight nor wide. If you take liberties or shortcuts with this recipe, be careful to test your code thoroughly on multiple browsers. Chances are high that any deviation will lead to failure on one of the browsers.

IE is fairly flexible in this area. You don't actually have to implement the GetData function in the B page. You can just construct in the A context an XHR object type from the B context and use it directly in the A context. ( var xhr = new bframe.window.XMLHttpRequest() ) For IE, the B page need only lower the domain to foo.com. After that, all the driving can be done from A.

Firefox is more particular about this technique. Firefox will allow you to construct an instance of the B XHR in the context of A, but you'll get access denied or weirder errors when you try to call the methods of the B XHR from the context of A. Firefox gets confused when you call native object methods across these convoluted domain bridges, but calling JavaScript functions and methods works fine on either side of the context boundary. Once the JavaScript call context gets from A to B, then the native object method calls will work.

This is also why step 3 above mandates that the XHR onReadyStateChange event handler should be wired to a function implemented in the B page - the native XHR object operating in the B context may have difficulty firing an event wired to a function in the A page context.

The Downside to Homogeneity

For domain lowering to work between two subdomains, both sides have to "lower their shields" to a common middle ground. As this technique catches on across departments and their corresponding subdomains, you can quickly reach a point where just about all the subdomains on the corporate web have provisions to lower their domain to the common corporate parent domain.

This is convenient and quite powerful for building web apps that can access data bits from all across the company. The problem is that it weakens your corporate defenses across the board. If just one of the subdomain silos were compromised and an attacker were able to inject malicious JavaScript to execute in the browser context of that compromised subdomain, that malicious code would have easy access to every subdomain across the company that lowers its domain to foo.com.

This risk grows with scale. The more subdomains you have that routinely lower their domains to the common ground, the greater the risk that one of them may be compromisable and serve as a beachhead to your entire network.

Tune In Next Time

There is a way to mitigate this weakest link risk such that an attacker compromising a weak subdomain does not get access to everything. This requires inverting some of the relationships presented in this article and making the silos deeper rather than shallower. I'll cover "Siloed Domain Lowering" in my next cross-domain article.

Secure Cross-Domain Communication: The Architecture Journal

dthorpe — Tue, 19 Jun 2007 01:53:50 GMT

The June issue (Journal 12) of The Architecture Journal focuses on web architecture. I was delighted to be invited to contribute, and wrote "Secure Cross-Domain Communication in the Browser" for this issue. In the article I describe a somewhat bizarre technique we use in the Windows Live Contacts web control and Windows Live Spaces web control to move data from HTML pages running on *.live.com to and from third party web sites. This is how the contacts control returns user-selected contact data to the page hosting the control, a web site that is not a Microsoft site.

The print edition of Journal 12 is out already and was handed out at TechEd in Orlando earlier this month. You can request a print copy by registering on the Journal's web site, or you can just grab the PDF and read it on-screen. Journal 12 will rotate into the headlines on the Journal's homepage soon.

A few posts ago I mentioned I could finally reveal what I had been working on at Google. Now I can also tell you in exquisite detail what I've been working on here at Microsoft for the past year and foreseeable future: cross-domain browser communication techniques. Coaxing stubborn little bits to migrate through impenetrable browser barriers.

"Secure Cross-Domain Communication in the Browser" is a high-level walk-through of the iframe URL technique of passing information between domain contexts in the browser, it's limitations and weaknesses, and the approach we've taken to build a channel communications library to fortify against those weaknesses and limitations.

Over the next few weeks I will be posting here on Windows Live Quantum Mechanics a series of articles digging into the nitty gritty of cross-domain communication, why it has been taboo in the browser, why it's time to change that perception, and techniques and code you can use today to achieve it - without compromising security or server scalability.

Cross domain communication would be much easier with the browser's help and shepherding, but with a little bit of effort we can actually do quite a bit today - safely - in spite of the browser's objections.

A Cross-Domain Silverlight Channel 9 VideoRSS Player

dthorpe — Wed, 30 May 2007 11:26:00 GMT

Last week Kevin Ledley, keeper of the dev.live.com content, asked me for a bit of help to get a Silverlight video player working. He wanted to "borrow" the cool scrolling video list and video player from our sister site, msdn2.microsoft.com and set it up on our dev.live.com homepage to show Windows Live related videos from Channel 9. Copying the necessary JavaScript and XAML files for the Silverlight video player was easy enough, but even after fixing all the URL references, it still wasn't working. So, I took a look.

Get the files

First, I needed to grab the files and set them up on my localhost IIS server. The msdn2.microsoft.com page referenced the following JS files:

Silverlight.js - we know what that is
main.js
button.js
helpermethods.js
listbox.js
listboxitem.js
scrollbar.js
transportButtons.js
videoEntry.js
videoPlayer.js
videoService.js

main.js is what makes the call to create the Silverlight control, same as our CreateSilverlight.js file in helloworld earlier. main.js has a lot of other code in it as well. Scanning for ".xaml", we find there are actually three different xaml files used by main.js:

videoListHor.xaml
itemTemplate.xaml
videoPlayer.xaml

After copying these files locally, I scanned each for hard coded URL references and stripped them down to relative paths for easier tinkering on localhost.

I made a small test page to host the video player, using the same variable and element names as the original msdn page:

vidtest.html

<!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" xml:lang="en">
    <head>
        <title>Channel 9 Video on Silverlight</title>
        <script src="SilverLight.js" type="text/javascript"> </script>
        <script src="main.js" type="text/javascript"> </script>
        <script src="transportButtons.js" type="text/javascript"> </script>
        <script src="listbox.js" type="text/javascript"> </script>
        <script src="listboxitem.js" type="text/javascript"> </script>
        <script src="button.js" type="text/javascript"> </script>
        <script src="scrollbar.js" type="text/javascript"> </script>
        <script src="helperMethods.js" type="text/javascript"> </script>
        <script src="videoPlayer.js" type="text/javascript"> </script>
        <script src="videoEntry.js" type="text/javascript"> </script>
        <script src="videoService.js" type="text/javascript"> </script>
    </head>
    <body>
        <div style="position: relative;text-align:center;width:475px; z-index:10;">
            <div id="videoListHost">
                <script type="text/javascript">
                    var videoScrollerFeedUrl = 
"http://www.mscommunities.com/MixItUp/Search/default.aspx?q=msdn";
                    startVideoScroller();
                 </script>
            </div>
            <div id="videoPlayerHost" >
            </div>
        </div>
    </body>
</html>

With this in place, I had all the bits in place on the localhost server to run the app. Would it work? Probably not, but no harm in trying!

Eliminate Framework Dependencies

Sure enough, vidtest.html threw a JavaScript exception on load. The culprit: Some of the code in the js files refers to a $get() function which appear to be a shortcut for document.getElementById. A little bit of spelunking around in the msdn code with a JavaScript debugger confirmed this hypothesis. $get() is a helper function implemented in the JavaScript libraries that run the msdn web site. I definitely did not want to start pulling on that thread. $get() is innocuous enough, so we can placate the borrowed JS files on our localhost system by implementing a $get() function in vidtest.html

function $get(id) {
    return document.getElementById(id);
}

Easy enough. Will it work now?

Bzzzt! The browser next complains about "Object required" or somesuch on the expression Sys.Application.notifyScriptLoaded() at the bottom of one of the .JS files. This, too, is a bit of goo defined by the msdn web site infrastructure. It notifies the application when the .JS file has finished loading, so that it's ok to construct the Silverlight control.

For vidtest.html, I have an equivalent, simpler approach: construct the Silverlight control in the onLoad event of the body element. The page's onLoad event won't fire until after all the JavaScript references in the head of the document have been loaded.

Ok. Will it work now?

Yes! The Silverlight video scroller draws itself on the page!

But it's empty. Why is it empty? Let's go look at that videoScrollerFeedURL variable and where it's used in the code.

A quick grep of the JS files brings us to videoService.js, in a function called getVideoEntryList:

function getVideoEntryList() {
    Microsoft.Mtps.Rendering.Behaviors.VideoService.GetVideoEntryList(
        videoScrollerFeedUrl, loadVideos);}

What's all that about?

Bubble Burster

videoScrollerFeedUrl is a string with a value of http://www.mscommunities.com/MixItUp/Search/default.aspx?q=msdn. If you follow that link, you'll see that it's an RSS feed. But you should also notice that the URL is in a domain that is not msdn. How is the msdn web code able to use the RSS data from mscommunities.com?

Microsoft.Mtps.Rendering.Behaviors.VideoService.GetVideoEntryList must be a cross-domain proxy of some kind responsible for fetching RSS entries from mscommunities.com and returning them to the JavaScript running on msdn.microsoft.com. A little friendly debugger inspecting confirms that this function call receives back an array of JavaScript objects - a JSON result - describing the video description, a thumbnail image URL and a video stream URL.

This presents a not so small problem for our objective. dev.live.com is not msdn.microsoft.com. We can't call that GetVideoEntryList function or use the web service behind it to find out what videos are available on Channel 9. Full stop.

The Options: Few and Ugly

I called Kevin up with the bad news. Our options were few and ugly:

Get the server proxy code from msdn and install it on dev.live.com. Great plan, but even if we could get our hands on the code, chances are high that some sort of server configuration difference (installed version of ASP.NET, installed version of .NET framework, etc) between how msdn is set up from how dev.live.com is set up could still make this a no-go.
Write our own server side proxy to perform the same relay of RSS content. Trivially simple, perhaps, but the depth of security and code reviews and testing that would be required to roll out live code on a production server would turn our cute little video thingie into a weeks-long fire-breathing hydra from hell. No thanks. I already do that for my day job - why take on all that for a side project?
Hardcode the URLs of the videos we want shown in this video scroller into the JS code. Kevin: "We don't have that many videos." Danny: "Yet." Doesn't scale, labor intensive.
Construct an RSS feed on the dev.live.com domain to feed video URLs into the video scroller. Much more maintainable over time than #3, but still requires constant maintenance to update the local feed when something relevant shows up on Channel 9. The whole reason for RSS is to have the machine take care of discovery and updating.

Kevin said he'd work on #1 and #4. I opted for #5: Stew on it some more. Take the dog on a long walk. Check the mailbox. Return.

Strange Bedfellows

A funny thing happened on the way back from the mailbox - it dawned on me that I was trying to solve the wrong problem, or at least, more problem than we needed to solve. We needed a way to read the video RSS feed in the browser across domain boundaries, but we didn't need an all-purpose cross domain data conduit (like we use in the Windows Live Contacts web control). A conduit that could move just RSS data and only RSS data would suffice for this project.

That's when I recalled hearing about Google's recent launch of an RSS Feed API. Mark Lucovsky, who I had a chance to meet (and almost work for) in my Google days now 400 days ago, announced about a month and a half ago a new API built from a subset of the Google Search API that returns only RSS data.

In concept, the Google Feed API acts as a cross-domain proxy service between your web app and the RSS content you want to use. In reality, it's far simpler: it returns the RSS data cached in Google's search index. This approach creates a multitude of curious artifacts with positive and negative spin:

Response latency to your RSS requests is determined solely by Google's network infrastructure, not the server originating the RSS data. The server of origin might not even be up but you can still get the RSS data from the Feed API.
This use of RSS data is entirely in the spirit of syndication. It's a bummer that the server of origin can't find out how many secondary and tertiary consumers of their data are out there, but hey, that's the nature of syndication.
The RSS data you get from the Feed API could be stale or out of sync with the server of origin by several hours or more depending on how quickly Google's web crawlers return to the server of origin to index new content. That's not a major concern for our video viewer, but could be a show stopper for, say, live broadcasting.
It's possible the RSS feed you want is not indexed by Google. Hey, it does happen - the RSS feed could be too new to be in the index, or too isolated (no inbound links) to be considered indexible, or the server of origin could have a robots.txt file that tells search engine spiders to piss off. It seems a bit contradictory to have an RSS feed that does not want to be found, but stranger things have happened.

Wait a second. Use a Google API in a Microsoft app? What blasphemy is this?!

Oh, grow up. Use what works. Windows Live Search has a perfectly good Search API, but it doesn't provide anything to bring RSS content from a specific RSS URL into our web app.

And why shouldn't a Microsoft app use a Google service when appropriate? Google certainly uses plenty of Microsoft browsers and operating systems to reach end users!

API Keys

To use the Google Feed API (I don't know why they had to put "AJAX" in the middle of it), you have to agree to the usual mile long list of terms of use plus generate an API key associated your web site URL. You use the API key when initializing the Google API subsystem. Presumably, this is so they can get an idea of how much traffic your app is generating and be able to block your app's access if you're found to be abusing the system or violating the ToU.

As far as I can tell by experimentation, the API key only gives Google some idea of who is using their service; the key does not appear to automatically disable API access if the key is used from a domain different from the URL you specified when you generated the key. I generated a key for use on localhost, but found that it works just as well when I run my app from 127.0.0.1. (It doesn't matter that one resolves into the other - a DNS name and an IP address are considered distinct domain names by the browser. Domain name matching in the browser is by string matching, not by what the strings mean) Perhaps lockouts only occur after a significant volume of suspicious traffic goes by. I dunno.

The Brass Tacks

Here's the vidtest main page again, with the Google Feed API spliced in and bootstrapped:

vidtest.html

<!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" xml:lang="en">
    <head>
        <title>Channel 9 Video on Silverlight</title>
        <script src="SilverLight.js" type="text/javascript"> </script>
        <script src="main.js" type="text/javascript"> </script>
        <script src="transportButtons.js" type="text/javascript"> </script>
        <script src="listbox.js" type="text/javascript"> </script>
        <script src="listboxitem.js" type="text/javascript"> </script>
        <script src="button.js" type="text/javascript"> </script>
        <script src="scrollbar.js" type="text/javascript"> </script>
        <script src="helperMethods.js" type="text/javascript"> </script>
        <script src="videoPlayer.js" type="text/javascript"> </script>
        <script src="videoEntry.js" type="text/javascript"> </script>
        <script src="videoService.js" type="text/javascript"> </script>

        <script src=http://www.google.com/jsapi?key=xxxGetYerOwnAPIKeyxxx"
          type="text/javascript"></script>
        <script type="text/javascript">
            google.load("feeds", "1");
 

            var videoScrollerFeedUrl = 
"http://www.mscommunities.com/MixItUp/Search/default.aspx?q=msdn";
 
          function initialize() { 
              startVideoScroller();
          } 

 
          google.setOnLoadCallback(initialize);     
 
          function $get(id) {
              return document.getElementById(id);
          } 
    </script>
  </head>
  <body>
      <div style="position: relative;text-align:center;width:475px; z-index:10;">
          <div id="videoListHost">
          </div>
          <div id="videoPlayerHost" >
          </div>
      </div>
  </body>
</html>

We've added a new script reference that pulls in jsapi from www.google.com, and includes our API key. I replaced my API key with a dummy value. You'll need to go generate your own key if you want to run this code yourself.

google.load("feeds", "1") tells Google that we want to use the Feeds API.

google.setOnLoadCallback(initialize) tells Google to call our initialize() function when the requested API has been loaded. Dynamic loading of JavaScript might not be finished before the body onLoad event fires, so we have to take this route to wait for the Feed API to load. Body onLoad event deleted.

Now, let's go load that RSS content and build our video list, in videoService.js:

videoService.js

function getVideoEntryList() {
    var feed = new google.feeds.Feed(videoScrollerFeedUrl); 
    feed.setNumEntries(100);     
    feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);
    feed.load(function(result) {      
        if (!result.error) {       
            var videoEntries = [];  
            for (var i = 0; i < result.feed.entries.length; i++) {            
                var entry = result.feed.entries[i];    
                var vidEntry = new Object;
                vidEntry.VideoTitle = entry.title;
 
                var test = google.feeds.getElementsByTagNameNS(
                        entry.xmlNode, 
                        "http://search.yahoo.com/mrss", 
                        "content");
                if (!test || !test.length) continue;
                vidEntry.VideoUrl = test[0].getAttribute("url");       
 
                test = google.feeds.getElementsByTagNameNS(
                        entry.xmlNode, 
                        "http://search.yahoo.com/mrss", 
                        "thumbnail");
                if (!test || !test.length) continue;
                vidEntry.VideoThumbnailUrl = test[0].getAttribute("url");
 
                test = google.feeds.getElementsByTagNameNS(
                        entry.xmlNode, 
                        "http://purl.org/dc/elements/1.1/", 
                        "creator")
                if (test && test.length) {
                    vidEntry.Author = test[0].text;
                }
 
                videoEntries.push(vidEntry);
            } 
            loadVideos(videoEntries);     
        }      
    });    
}

The msdn2.microsoft.com video scroller expects an array of vidEntry objects as input to build its playlist. The msdn server side proxy takes care of digesting the RSS XML content down to a simple list of vidEntry objects.

For our dev.live.com version of the video scroller, we need to build the vidEntry objects ourselves. The Google Feed API can return JSON, XML, or both. The title of the RSS entry is standard fare, so that's easy to grab from the JSON field entry.title. The other fields we need - thumbnail URL, video URL, and author - are not normal RSS fields. These fields are defined in the Media RSS (MRSS) RSS extension module and are generated by the Channel 9 video RSS feed as such.

We make short work of finding the exact XML elements we're looking for by using a utility function provided by the google.feeds library: a cross-browser implementation of getElementsByTagNameNS().

We push each vidEntry object into the array and loop until we run out of RSS items.

Finally, we hand off the array of objects to loadVideos and return to the original code path of the video scroller implementation.

The result looks something like this:

Why stop there?

So now we have what we set out to build: a Silverlight video player that can show videos from the Channel 9 libraries, using the video RSS feeds returned by the mscommunities.com query service. Note that this is built on the Silverlight 1.0 beta control using browser JavaScript, not the Silverlight 1.1 Alpha.

The fact that we ended up using a generic RSS provider to get the specific RSS feed we needed opens some interesting possibilities: Aren't we just a hair's breadth from showing any video from any video RSS feed on the Internet? All we'd need to change is the videoScrollerFeedURL to point to a different RSS feed, right? Perhaps this could be wired directly into Yahoo's Video Search service, which returns MRSS results for keyword searches of videos across the web?

The answer is: yes and no. Yes, the app actually is just a small step away from using any video RSS feed, or even a video search service that returns MRSS results. The catch is: there are a bezillion different video formats and codecs out there in the wild. It would be unreasonable to expect Silverlight 1.0 beta to be able to play all of them. Silverlight's media player isn't designed to play all video formats - it's designed to play media content encoded for Silverlight playback, using tools such as Expression Media. Apparently, the Channel 9 video library is already encoded in a format that Silverlight can use. Most video in the wild is not.

That's no ding against Silverlight - all video sharing sites with built-in players play only one video format - their own. When you upload a video to the sharing site, it is almost always converted (transcoded) into the site's native encoding format so that the site's player can play it. You can build that kind of video sharing site with Silverlight.

With a few tricks from this article, you can show Channel 9 videos on your web site or blog pages with Silverlight!