source: Dev/branches/rest-dojo-ui/client/dojox/secure/tests/load.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
File size: 10.3 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4        <title>dojox.secure.sandbox Test Page</title>
5        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
6        <style type="text/css">
7                @import "../../../dojo/resources/dojo.css";
8                textarea {
9                        width:100%;
10                        height:250px;
11                        font-size:0.8em;
12                }
13                #container {
14                        position: absolute;
15                        z-index:100000;
16                        top: 400px;
17                        right: 40px;
18                        background-color:blue;
19                        color:white;
20                }
21                #sandbox {
22                        background-color:white;
23                        color:black;
24                        border: 1px solid blue;
25                        width: 400px;
26                        height: 300px;
27                        overflow:auto;
28                }
29                #instructions {
30                        margin-right:450px;
31                }
32        </style>
33        <script type="text/javascript" src="../../../dojo/dojo.js"></script>
34        <script type="text/javascript" src="../capability.js"></script>
35        <script type="text/javascript">
36                dojo.require("dojox.io.xhrPlugins");
37                dojo.require("dojox.secure.sandbox");
38                dojox.io.xhrPlugins.addProxy("proxy.php?url=");
39                dojo.addOnLoad(function() {
40                        var sandbox = dojox.secure.sandbox(document.getElementById("sandbox"));
41                        dojo.byId("execute").onclick= function () {
42                                var input = document.getElementById("input").value;
43                                try{
44                                        sandbox.evaluate(input);
45                                }catch(e){
46                                        alert(e.message || e);
47                                }
48                        }
49                        dojo.byId("executeJs").onclick= function () {
50                                var input = document.getElementById("jsFile").value;
51                                sandbox.loadJS(input).addErrback(function(result){
52                                        alert(result);
53                                });
54                        }
55                        dojo.byId("executeHtml").onclick= function () {
56                                var input = document.getElementById("htmlFile").value;
57                                sandbox.loadHTML(input).addErrback(function(result){
58                                        alert(result);
59                                });
60                        }
61                });
62        </script>
63</head>
64<body class="tundra">
65        <h5>dojox.secure.sandbox Tester</h5>
66        <p>
67        This a test page for dojox.secure.sandbox. dojox.secure.sandbox is intended to safely execute
68        untrusted scripts, and allow the scripts to access only a certain sub-tree of the DOM.
69        Eventually, this can be used to safely load ads and untrusted widgets.
70        All attempts to subvert the security of this system
71        are greatly appreciated. If you find any holes, any ways that you can access the DOM or the
72        JavaScript environment outside of the sandbox, please add a comment to the
73        <a href="http://trac.dojotoolkit.org/ticket/6348">enhancement</a> ticket. To test secure load,
74        simply enter JavaScript in the text box below and click execute. The JavaScript should only
75        have access to the DOM within the floating div below. The sandbox element is available
76        as the <em>element</em> variable from within the sandboxed JavaScript. Please see below
77        for more detailed instructions on what facilities are available within the sandbox.
78        </p>
79        <div id="container">Sandboxed div:<div id="sandbox"></div></div>
80        <textarea id="input">
81element.innerHTML = "<p class='intro'>Hi there, element is the <b>sandboxed element</b>, which you can access and manipulate</p>";
82document.write("<p id='more'>You can use <em>document.write</em> for your sandbox area. However, the following limitations apply:</p>");
83query("em").style("color","blue"); // you can use query to find and modify
84//query(".intro").style("opacity",0).fadeIn().play();
85style(byId("more"),"color","red");
86var limitations = ["No access to |this| keyword",
87        "The [] index operator is only allowed if in the opening bracket is followed by a +",
88        "Global variables are not allowed except element and document",
89        "You can not access most of the relationship properties on elements (parentNode, firstSibling, nextSibling, etc.)"];
90// you can also use other standard DOM features as well
91var ul = document.createElement("ul");
92element.appendChild(ul);
93forEach(limitations,function(limitation) {
94  var li = document.createElement("li");
95  ul.appendChild(li);
96  li.innerHTML = limitation;
97});
98element.appendChild(document.createElement("p")).innerHTML =
99        "Because " + get(limitations,1) + " you may use " +
100        "get(obj,property), set(obj,property,value), and forEach(array) instead";
101// here is an example of creating a class (where |this| can be used):
102var Flicker = Class({
103  constructor : function(element) {
104    this.element = element;
105    connect(element,"onmouseenter",this,"enter");
106    connect(element,"onmouseout",this,"exit");
107  },
108  enter: function(event) {
109    style(this.element,"color","green");
110  },
111  exit: function(event) {
112    style(this.element,"color","orange");
113  }
114});
115new Flicker(ul);
116// you can also access other dojo functions:
117var copy = mixin({},limitations);
118
119</textarea><br/>
120        Note that these require a proxy file in order to load:
121        <button id="execute">Execute</button><br/>
122        <input type='text' id="jsFile" value="http://www.sitepen.com/labs/code/secure/dojox/secure/tests/good.js"></input>
123        <button id="executeJs">Load and execute JavaScript</button><br/>
124        <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/>
125        <div id="instructions">
126                <p>The JavaScript in the sandbox generally follows the rules of ADsafe:</p>
127                <ul>
128                <li>Use of <em>eval</em>, <em>with</em>, ==, and != are not allowed.</li>
129                <li>the subscript operator [] may only be used be used if the opening bracket is followed by a +.</li>
130                 
131                <li>Limited access to <em>this</em> and global variables.</li>
132                <li>These properties may not be used: apply arguments call callee caller constructor eval prototype
133                                this unwatch valueOf watch and anything beginning or ending with __.</li>
134                </ul>
135                <p>The following global variables are accessible:
136                <ul>
137                <li>element - This the root element of the sandbox. Sandboxed elements do not have
138                access to relational properties (parentNode, firstSibling, nextSibling, etc.). You can still
139                use DOM methods and string properties like innerHTML. The style object can also be
140                used (accessed and modified) as well.</li>
141                <li>document - This is a sandboxed document object that provides node creation
142                and basic element searching facilities. The sandboxed document provides the following
143                methods: getElementById, createElement, createTextNode, and write.
144                </li>
145                </ul>
146                <p>
147                The following standard JavaScript/DOM functions/constructors and (their child functions when applicable)
148                may be called. They may only be used in call position, they may not be accessed
149                in any other way. They generally behave as the standard JavaScript function, unless otherwise noted:
150                </p>
151                <ul>
152<li>isNaN</li><li>isFinite</li><li>parseInt</li><li>parseFloat</li><li>escape</li><li>unescape</li>
153                                                                                <li>encodeURI</li><li>encodeURIComponent</li><li>decodeURI</li><li>decodeURIComponent</li>
154                                                                                <li>alert</li><li>confirm</li><li>prompt</li>
155                                                                                <li>Date</li><li>RegExp</li><li>Error</li><li>Number</li><li>Math</li>
156                                                                                <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>
157                </ul>
158                The following special functions are available to compensate for the JavaScript syntax limitations imposed by the sandbox:
159                <ul>
160                                                                                <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>
161                                                                                <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>
162                                                                                <li>forEach(obj,func) - This is a special function to iterate through all the properties in an object, or items in an array.
163                                                                                        For each item, the func function will be called with the item as the first argument, the index as the second,
164                                                                                        and the obj as the third</li>
165                                                                                <li>Class(superclass..., properties, classProperties) -
166                The <em>this</em> operator may only be used in class definitions. secure.sandbox provides <em>Class</em> as a
167                class constructor. The following argument are accepted:
168                <ul>
169                        <li>superclass:
170                                        There may be zero or more superclass arguments. The constructed class
171                                        will inherit from any provided superclasses, protypically from the first,
172                                        via mixin for the subsequent. Later arguments
173                                        will override properties/methods from earlier arguments
174                         </li>
175                         <li>
176                         properties:
177                                        The constructed
178                                        "class" will also have the methods/properties defined in this argument.
179                                        These methods may utilize the <em>this</em> operator, and they
180                                        are only the code that has access to <em>this</em>. Inner functions
181                                        are also prohibited from using <em>this</em>.
182                                        If no superclasses are provided, this object will be the prototype of the
183                                        constructed class (no copying
184                                        will be done). Consequently you can "beget" by calling new (Class(obj)).
185                                        All methods are "bound", each call results in |this| safety checking call.
186                        </li>
187                        <li>
188                         classProperties:
189                                        This properties will be copied to the new class function.
190                       
191                        </li>
192                </ul>
193                                        Note that neither dojo.declare nor dojo.extend are acceptable class constructors as
194                                        they are unsecure. This class constructor is conceptually based on declare
195                                        but also somewhat influenced by base2, prototype, YUI, resig's patterns, etc.
196                </li>
197                </ul>
198                The following functions for DOM manipulation and extra language features are
199                provided by the Dojo library. This represents a safe subset of Dojo. All Dojo library
200                functions are provided as top level functions,
201                namespacing is unnecessary because scripts do have access to modify the global object,
202                and can't define global variables. Thus, you can call Dojo functions directly, for example you
203                can call mixin(obj,mixinObj). You may also use the traditional syntax (dojox.mixin(...)).
204                Here are a list of available functions:
205                <ul>
206                        <li>mixin</li><li>require</li><li>isString</li><li>isArray</li><li>isFunction</li>
207                        <li>isObject</li><li>isArrayLike</li><li>isAlien</li><li>hitch</li><li>delegate</li>
208                        <li>partial</li><li>trim</li><li>connect</li><li>disconnect</li><li>subscribe</li>
209                        <li>unsubscribe</li><li>Deferred</li><li>toJson</li><li>fromJson</li><li>style</li><li>attr</li>         
210                        <li>query - This will only search within the sandbox.</li><li>byId</li><li>body - This returns the root element of the sandbox</li>
211                       
212                </ul>
213        </div>
214        <iframe src="../../../dojo/resources/blank.html"></iframe>
215</body>
216</html>
Note: See TracBrowser for help on using the repository browser.