Gabbr.com

October 23, 2008, 11:00 am (http://ajaxian.com)

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:

PLAIN TEXT

HTML:

<html>
<head>
<title>Script Error Sample</title>
<style>
.sampleTitle
{
font-family: Segoe UI, Tahoma;
font-size: 11pt;
font-weight: bold;
color: #07519A;
}
.scriptErrorSample
{
height: 130px;
border: solid 1px lightgrey;
background: white;
background-repeat: repeat-x;
background-position: left top;
padding: 10px;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="sample" class="scriptErrorSample">
<script type="text/javascript">
window.clockelement = "currentTime";
function onClick() {
// Try to access an inexistent element
window.clockelement = "currentTime2";
}
</script>
<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>
<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>
<div id="currentTime" style="font-size: 8pt; font-weight: normal; color: Gray">
</div>
<script type="text/javascript">
window.setInterval(function() {
document.getElementById(window.clockelement).innerText = new Date();
}, 999)
</script>
</div>
</body>
</html>

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

PLAIN TEXT

HTML:

var settings = { css : { ".sampleTitle":{"font-family":"Segoe UI, Tahoma","font-size":"11pt","font-weight":"bold","color":"#07519A"},
".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"} } };
var headerJavaScript =
function(a)
{
var b = a.gw(this),
c = a.g,
d = a.i,
e = a.f,
f = c(b,"document");
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()
{
d(b,"onClick")
}),"value":"Generate Error!"}}}]}}," ",{"div":{"a":{"id":"currentTime","style":{"font-size":"8pt","font-weight":"normal","color":"Gray"}},"c":[" "]}}," ",{"script":"code2"}," "]}}," "]}}]])
};
var metadata = {"author":"","description":"","imagepath":"","title":"Script Error Sample","preferredheight":0,"preferredwidth":0,"location":"","base":{"href":"","target":""},"scripts" : {"code1" :
function(a)
{
var b = a.gw(this),
c = a.g,
d = a.s,
e = a.f,
f = a.v;
f.onClick = e(function()
{
d(b,"clockelement","currentTime2")
});
d(b,"clockelement","currentTime")
},"code2" :
function(a)
{
var b = a.gw(this),
c = a.g,
d = a.s,
e = a.i,
f = a.n,
g = a.f,
h = c(b,"document");
e(b,"setInterval",[g(function()
{
d(e(h,"getElementById",[c(b,"clockelement")]),"innerText",f(c(b,"Date"),[]))
}),999])
}}};
$Sandbox.registerCode(headerJavaScript, "0", settings, metadata);
var SandboxInstance = new $Sandbox(document.getElementById('g_0_0_inst'), $Policy.Gadget, "0");
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.

Tags: {, =, gt, lt, }