217 lines
10 KiB
HTML
217 lines
10 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html>
|
|
<head>
|
|
<title>dojox.secure.sandbox Test Page</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
|
|
<style type="text/css">
|
|
@import "../../../dojo/resources/dojo.css";
|
|
textarea {
|
|
width:100%;
|
|
height:250px;
|
|
font-size:0.8em;
|
|
}
|
|
#container {
|
|
position: absolute;
|
|
z-index:100000;
|
|
top: 400px;
|
|
right: 40px;
|
|
background-color:blue;
|
|
color:white;
|
|
}
|
|
#sandbox {
|
|
background-color:white;
|
|
color:black;
|
|
border: 1px solid blue;
|
|
width: 400px;
|
|
height: 300px;
|
|
overflow:auto;
|
|
}
|
|
#instructions {
|
|
margin-right:450px;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
|
|
<script type="text/javascript" src="../capability.js"></script>
|
|
<script type="text/javascript">
|
|
dojo.require("dojox.io.xhrPlugins");
|
|
dojo.require("dojox.secure.sandbox");
|
|
dojox.io.xhrPlugins.addProxy("proxy.php?url=");
|
|
dojo.addOnLoad(function() {
|
|
var sandbox = dojox.secure.sandbox(document.getElementById("sandbox"));
|
|
dojo.byId("execute").onclick= function () {
|
|
var input = document.getElementById("input").value;
|
|
try{
|
|
sandbox.evaluate(input);
|
|
}catch(e){
|
|
alert(e.message || e);
|
|
}
|
|
}
|
|
dojo.byId("executeJs").onclick= function () {
|
|
var input = document.getElementById("jsFile").value;
|
|
sandbox.loadJS(input).addErrback(function(result){
|
|
alert(result);
|
|
});
|
|
}
|
|
dojo.byId("executeHtml").onclick= function () {
|
|
var input = document.getElementById("htmlFile").value;
|
|
sandbox.loadHTML(input).addErrback(function(result){
|
|
alert(result);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
<body class="tundra">
|
|
<h5>dojox.secure.sandbox Tester</h5>
|
|
<p>
|
|
This a test page for dojox.secure.sandbox. dojox.secure.sandbox is intended to safely execute
|
|
untrusted scripts, and allow the scripts to access only a certain sub-tree of the DOM.
|
|
Eventually, this can be used to safely load ads and untrusted widgets.
|
|
All attempts to subvert the security of this system
|
|
are greatly appreciated. If you find any holes, any ways that you can access the DOM or the
|
|
JavaScript environment outside of the sandbox, please add a comment to the
|
|
<a href="http://trac.dojotoolkit.org/ticket/6348">enhancement</a> ticket. To test secure load,
|
|
simply enter JavaScript in the text box below and click execute. The JavaScript should only
|
|
have access to the DOM within the floating div below. The sandbox element is available
|
|
as the <em>element</em> variable from within the sandboxed JavaScript. Please see below
|
|
for more detailed instructions on what facilities are available within the sandbox.
|
|
</p>
|
|
<div id="container">Sandboxed div:<div id="sandbox"></div></div>
|
|
<textarea id="input">
|
|
element.innerHTML = "<p class='intro'>Hi there, element is the <b>sandboxed element</b>, which you can access and manipulate</p>";
|
|
document.write("<p id='more'>You can use <em>document.write</em> for your sandbox area. However, the following limitations apply:</p>");
|
|
query("em").style("color","blue"); // you can use query to find and modify
|
|
//query(".intro").style("opacity",0).fadeIn().play();
|
|
style(byId("more"),"color","red");
|
|
var limitations = ["No access to |this| keyword",
|
|
"The [] index operator is only allowed if in the opening bracket is followed by a +",
|
|
"Global variables are not allowed except element and document",
|
|
"You can not access most of the relationship properties on elements (parentNode, firstSibling, nextSibling, etc.)"];
|
|
// you can also use other standard DOM features as well
|
|
var ul = document.createElement("ul");
|
|
element.appendChild(ul);
|
|
forEach(limitations,function(limitation) {
|
|
var li = document.createElement("li");
|
|
ul.appendChild(li);
|
|
li.innerHTML = limitation;
|
|
});
|
|
element.appendChild(document.createElement("p")).innerHTML =
|
|
"Because " + get(limitations,1) + " you may use " +
|
|
"get(obj,property), set(obj,property,value), and forEach(array) instead";
|
|
// here is an example of creating a class (where |this| can be used):
|
|
var Flicker = Class({
|
|
constructor : function(element) {
|
|
this.element = element;
|
|
connect(element,"onmouseenter",this,"enter");
|
|
connect(element,"onmouseout",this,"exit");
|
|
},
|
|
enter: function(event) {
|
|
style(this.element,"color","green");
|
|
},
|
|
exit: function(event) {
|
|
style(this.element,"color","orange");
|
|
}
|
|
});
|
|
new Flicker(ul);
|
|
// you can also access other dojo functions:
|
|
var copy = mixin({},limitations);
|
|
|
|
</textarea><br/>
|
|
Note that these require a proxy file in order to load:
|
|
<button id="execute">Execute</button><br/>
|
|
<input type='text' id="jsFile" value="http://www.sitepen.com/labs/code/secure/dojox/secure/tests/good.js"></input>
|
|
<button id="executeJs">Load and execute JavaScript</button><br/>
|
|
<input type='text' id="htmlFile" value="http://www.sitepen.com/labs/code/secure/dojox/secure/tests/good.html"></input><button id="executeHtml">Load and show HTML</button><br/>
|
|
<div id="instructions">
|
|
<p>The JavaScript in the sandbox generally follows the rules of ADsafe:</p>
|
|
<ul>
|
|
<li>Use of <em>eval</em>, <em>with</em>, ==, and != are not allowed.</li>
|
|
<li>the subscript operator [] may only be used be used if the opening bracket is followed by a +.</li>
|
|
|
|
<li>Limited access to <em>this</em> and global variables.</li>
|
|
<li>These properties may not be used: apply arguments call callee caller constructor eval prototype
|
|
this unwatch valueOf watch and anything beginning or ending with __.</li>
|
|
</ul>
|
|
<p>The following global variables are accessible:
|
|
<ul>
|
|
<li>element - This the root element of the sandbox. Sandboxed elements do not have
|
|
access to relational properties (parentNode, firstSibling, nextSibling, etc.). You can still
|
|
use DOM methods and string properties like innerHTML. The style object can also be
|
|
used (accessed and modified) as well.</li>
|
|
<li>document - This is a sandboxed document object that provides node creation
|
|
and basic element searching facilities. The sandboxed document provides the following
|
|
methods: getElementById, createElement, createTextNode, and write.
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
The following standard JavaScript/DOM functions/constructors and (their child functions when applicable)
|
|
may be called. They may only be used in call position, they may not be accessed
|
|
in any other way. They generally behave as the standard JavaScript function, unless otherwise noted:
|
|
</p>
|
|
<ul>
|
|
<li>isNaN</li><li>isFinite</li><li>parseInt</li><li>parseFloat</li><li>escape</li><li>unescape</li>
|
|
<li>encodeURI</li><li>encodeURIComponent</li><li>decodeURI</li><li>decodeURIComponent</li>
|
|
<li>alert</li><li>confirm</li><li>prompt</li>
|
|
<li>Date</li><li>RegExp</li><li>Error</li><li>Number</li><li>Math</li>
|
|
<li>setTimeout - This will only accept a function (not a string)</li><li>setInterval - This will only accept a function (not a string)</li><li>clearTimeout</li><li>clearInterval</li>
|
|
</ul>
|
|
The following special functions are available to compensate for the JavaScript syntax limitations imposed by the sandbox:
|
|
<ul>
|
|
<li>get(obj,prop) - This is a special function to handle accessing properties in lieu of the [] operator. Calling get(obj,prop) is equivalent to obj[prop].</li>
|
|
<li>set(obj,prop,value) - This is a special function to handle modifying properties in lieu of the [] operator. Calling set(obj,prop,value) is equivalent to obj[prop]=value.</li>
|
|
<li>forEach(obj,func) - This is a special function to iterate through all the properties in an object, or items in an array.
|
|
For each item, the func function will be called with the item as the first argument, the index as the second,
|
|
and the obj as the third</li>
|
|
<li>Class(superclass..., properties, classProperties) -
|
|
The <em>this</em> operator may only be used in class definitions. secure.sandbox provides <em>Class</em> as a
|
|
class constructor. The following argument are accepted:
|
|
<ul>
|
|
<li>superclass:
|
|
There may be zero or more superclass arguments. The constructed class
|
|
will inherit from any provided superclasses, protypically from the first,
|
|
via mixin for the subsequent. Later arguments
|
|
will override properties/methods from earlier arguments
|
|
</li>
|
|
<li>
|
|
properties:
|
|
The constructed
|
|
"class" will also have the methods/properties defined in this argument.
|
|
These methods may utilize the <em>this</em> operator, and they
|
|
are only the code that has access to <em>this</em>. Inner functions
|
|
are also prohibited from using <em>this</em>.
|
|
If no superclasses are provided, this object will be the prototype of the
|
|
constructed class (no copying
|
|
will be done). Consequently you can "beget" by calling new (Class(obj)).
|
|
All methods are "bound", each call results in |this| safety checking call.
|
|
</li>
|
|
<li>
|
|
classProperties:
|
|
This properties will be copied to the new class function.
|
|
|
|
</li>
|
|
</ul>
|
|
Note that neither dojo.declare nor dojo.extend are acceptable class constructors as
|
|
they are unsecure. This class constructor is conceptually based on declare
|
|
but also somewhat influenced by base2, prototype, YUI, resig's patterns, etc.
|
|
</li>
|
|
</ul>
|
|
The following functions for DOM manipulation and extra language features are
|
|
provided by the Dojo library. This represents a safe subset of Dojo. All Dojo library
|
|
functions are provided as top level functions,
|
|
namespacing is unnecessary because scripts do have access to modify the global object,
|
|
and can't define global variables. Thus, you can call Dojo functions directly, for example you
|
|
can call mixin(obj,mixinObj). You may also use the traditional syntax (dojox.mixin(...)).
|
|
Here are a list of available functions:
|
|
<ul>
|
|
<li>mixin</li><li>require</li><li>isString</li><li>isArray</li><li>isFunction</li>
|
|
<li>isObject</li><li>isArrayLike</li><li>isAlien</li><li>hitch</li><li>delegate</li>
|
|
<li>partial</li><li>trim</li><li>connect</li><li>disconnect</li><li>subscribe</li>
|
|
<li>unsubscribe</li><li>Deferred</li><li>toJson</li><li>fromJson</li><li>style</li><li>attr</li>
|
|
<li>query - This will only search within the sandbox.</li><li>byId</li><li>body - This returns the root element of the sandbox</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<iframe src="../../../dojo/resources/blank.html"></iframe>
|
|
</body>
|
|
</html>
|