Thursday, October 23rd, 2008

Microsoft Live Labs Web Sandbox

Category: Security

The Microsoft Live Labs team has announced a new project: Web Sandbox. The team is lead by Scott Isaacs, someone who we owe thanks to, since he played a large part in the birth of dhtml (and thus, Ajax).

The sandbox takes HTML, CSS, and JavaScript, and puts it in an isolated box. The goal is a little like Caja, AdSafe, FBJS, and other solutions that try to make JavaScript execution more secure in some way.

Take a look at an example, such as the script error sample, which shows how errors are handled and don’t blow up the entire page.

The sandbox converts code like this:

  1. <html>
  2.     <head>
  3.         <title>Script Error Sample</title>
  4.         <style>
  5.             .sampleTitle
  6.             {
  7.                 font-family: Segoe UI, Tahoma;
  8.                 font-size: 11pt;
  9.                 font-weight: bold;
  10.                 color: #07519A;
  11.             }
  12.             .scriptErrorSample
  13.             {
  14.                 height: 130px;
  15.                 border: solid 1px lightgrey;
  16.                 background: white;
  17.                 background-repeat: repeat-x;
  18.                 background-position: left top;
  19.                 padding: 10px;
  20.                 overflow-y: auto;
  21.             }
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <div id="sample" class="scriptErrorSample">
  26.             <script type="text/javascript">
  27.                 window.clockelement = "currentTime";
  28.                 function onClick() {
  29.                     // Try to access an inexistent element
  30.                     window.clockelement = "currentTime2";
  31.                 }
  32.             </script>
  34.                         <p>Clicking the button will cause a scripting error. When running outside the sandbox this error effectively crashes the application stopping the clock. Within the Sandbox, the error stops only that instance.</p>
  35.                         <p>After the error is generated, you can reload this gadget by clicking the [reload] button in the Gadget toolbar.  <input type="button" onclick="onClick()" value="Generate Error!"/></p>
  36.             <div id="currentTime" style="font-size: 8pt; font-weight: normal; color: Gray">
  37.             </div>
  39.             <script type="text/javascript">
  40.                 window.setInterval(function() {
  41.                     document.getElementById(window.clockelement).innerText = new Date();
  42.                 }, 999)
  43.             </script>
  44.         </div>
  45.     </body>
  46. </html>

and converts it (via server side, or client side with Silverlight-only):

  1. var settings = { css : { ".sampleTitle":{"font-family":"Segoe UI, Tahoma","font-size":"11pt","font-weight":"bold","color":"#07519A"},
  2.  ".scriptErrorSample":{"border-left-width":"1px","border-right-width":"1px","border-top-width":"1px","border-bottom-width":"1px","border-left-style":"solid","border-right-style":"solid","border-top-style":"solid","border-bottom-style":"solid","padding-left":"10px","padding-right":"10px","padding-top":"10px","padding-bottom":"10px","height":"130px","background":"white","background-repeat":"repeat-x","background-position":"left top","overflow-y":"auto"} } };
  4. var headerJavaScript =
  5. function(a)
  6. {
  7.     var b =,
  8.         c = a.g,
  9.         d = a.i,
  10.         e = a.f,
  11.         f = c(b,"document");
  12.     d(f,"initializeHTML",[[{"body":{"c":[" ",{"div":{"a":{"id":"sample","class":"scriptErrorSample"},"c":[" ",{"script":"code1"}," ",{"p":{"c":["Clicking the button will cause a scripting error. When running outside the sandbox this error effectively crashes the application stopping the clock. Within the Sandbox, the error stops only that instance."]}}," ",{"p":{"c":["After the error is generated, you can reload this gadget by clicking the [reload] button in the Gadget toolbar. ",{"input":{"a":{"type":"button","onclick":e(function()
  13.     {
  14.         d(b,"onClick")
  15.     }),"value":"Generate Error!"}}}]}}," ",{"div":{"a":{"id":"currentTime","style":{"font-size":"8pt","font-weight":"normal","color":"Gray"}},"c":[" "]}}," ",{"script":"code2"}," "]}}," "]}}]])
  16. };
  18. var metadata = {"author":"","description":"","imagepath":"","title":"Script Error Sample","preferredheight":0,"preferredwidth":0,"location":"","base":{"href":"","target":""},"scripts" : {"code1" :
  19. function(a)
  20. {
  21.     var b =,
  22.         c = a.g,
  23.         d = a.s,
  24.         e = a.f,
  25.         f = a.v;
  26.     f.onClick = e(function()
  27.     {
  28.         d(b,"clockelement","currentTime2")
  29.     });
  30.     d(b,"clockelement","currentTime")
  31. },"code2" :
  32. function(a)
  33. {
  34.     var b =,
  35.         c = a.g,
  36.         d = a.s,
  37.         e = a.i,
  38.         f = a.n,
  39.         g = a.f,
  40.         h = c(b,"document");
  41.     e(b,"setInterval",[g(function()
  42.     {
  43.         d(e(h,"getElementById",[c(b,"clockelement")]),"innerText",f(c(b,"Date"),[]))
  44.     }),999])
  45. }}};
  47. $Sandbox.registerCode(headerJavaScript, "0", settings, metadata);
  49. var SandboxInstance = new $Sandbox(document.getElementById('g_0_0_inst'), $Policy.Gadget, "0");
  51. SandboxInstance.initialize();

You may want to note a few things, such as how you can use CSS such as “body { color: red; }” and it only effects that one area, and how you can access the DOM and the same isolation happens.

Although the project talks a lot about security and gadgets/mashups, there are other interesting side benefits.

For example, the team has implemented functionality such as the W3C event model, which means that addEventListener say, works in IE (via this process). If people start to use this, maybe the labs team can get the IE team to implement their work natively!

Finally, Scott kindly gave us a few words on the project:

We focused on going beyond security by exploring a more holistic solution for site extensibility. We are also providing cross-browser support built around existing web standards. The default (and extensible) Gadget policy is modeled after standard HTML pages and the IFrame model. Together, this allows developers to leverage their existing skills, knowledge, and tools.

A robust virtualized environment for Web 2.0 applications is more than just about security. It is important to also protect the site’s integrity by providing QoS monitoring and controls over code execution (the ability freeze and unfreeze code to better manage browser performance and user experience). For host sites, it is necessary to have easy integration and multi-instancing support.

We know performance is a concern. We are still early in the project and have not yet finished optimizing the code and we are still expanding the DOM API support. However, our initial work is showing promise. As one benchmark, consider Google Caja. Not only are we focusing on a complete solution with broad support for DOM APIs, HTML, and CSS, we are also showing better performance at this early stage. Attached a simple script that focuses on measuring the overhead introduced by the sandbox (you can also find it at the bottom). This script is executable in both our Sandbox and the Caja test environment.

Posted by Dion Almaer at 10:00 am

3.7 rating from 39 votes


Comments feed TrackBack URI

What happened to just using an with an external source?

Comment by fatlotus — October 23, 2008


What happened to just using an iframe with an external source?

Comment by fatlotus — October 23, 2008

Dion – Thanks for sharing our project.

fatlotus: That is a great question. I believe IFrames are often misunderstood.

To briefly summarize, IFrames have a few disadvantages. First, they are an isolation mechanism, not a proper security solution. Content in IFrames can compromise a page via bad code, trying to install add-ons, redirecting, and click-jacking.

Now, even if IFrames addressed those concerns, the isolation creates additional challenges. The code cannot easily integrate with the outer page (styles don’t inherit, communication is hard, etc).

Last, IFrames assume a rigid model. Over time, the more interesting extensibility scenarios are not going to be restricted to boxes. They are going to be about sites themselves exposing APIs that can be safely extended by third-parties.

We need a model that converges the benefits of IFrame isolation without the restrictions. Exploring this challenge is one of the goals of the Web Sandbox project.

For more details, I suggest reading the overview documentation on our web sandbox site.

Scott Isaacs (Microsoft)

Comment by Siteexperts — October 23, 2008

So this isn’t just a trick to get people to use Silverlight then? :-)

Comment by Mikael Bergkvist — October 23, 2008

Nice trick to get developers to install Silverlight on their machines ;)

Comment by Jeria — October 24, 2008

You may have a look at another approach to call APIs. No applets, no Flash or Silverlight. Just a simple web page, some javascript and another domain.

Comment by Tchvil — January 30, 2009

Leave a comment

You must be logged in to post a comment.