Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: fc9a7b198f
Fetching contributors…

Cannot retrieve contributors at this time

492 lines (455 sloc) 15.708 kb
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>JavaScript in JavaScript (js.js): Sandboxing Third-Party Scripts</title>
<meta name="description" content="Demo talk slides for js.js" />
<meta name="author" content="Jeff Terrace" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/js.js.talk.css" rel="stylesheet" />
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
</head>
<body class="impress-not-supported">
<div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
<div id="impress" data-transition-duration="500">
<div class="step slide" data-x="0">
<h1>JavaScript in JavaScript (js.js)</h1>
<h2>Sandboxing Third-Party Scripts</h2>
<img id="yodawg" src="img/yodawg.jpg"/>
<div class="demo-link">Demo slides: <a href="http://tinyurl.com/js-js-talk">tinyurl.com/js-js-talk</a></div>
<div class="authors">
<p><strong>Jeff Terrace</strong>, Stephen R. Beard, and Naga Praveen Kumar Katta</p>
<p><em>Princeton University</em></p>
</div>
</div>
<div class="step slide" data-x="1000">
<h1>Third-party Scripts</h1>
<div class="fake-web">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-arrow-left"></i></a>
<a class="btn" href="#"><i class="icon-arrow-right"></i></a>
<a class="btn" href="#"><i class="icon-repeat"></i></a>
<input type="text" value="http://example.com/"/>
</div>
<p>Hello, World!</p>
</div>
</div>
<div class="step slide overlapped" data-x="1000">
<h1>Third-party Scripts</h1>
<div class="fake-web">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-arrow-left"></i></a>
<a class="btn" href="#"><i class="icon-arrow-right"></i></a>
<a class="btn" href="#"><i class="icon-repeat"></i></a>
<input type="text" value="http://example.com/"/>
</div>
<p>Hello, World!</p>
<img src="img/fblike.png"/>
</div>
<div class="third-includes">
<h3>Scripts Included</h3>
<ul>
<li>https://connect.facebook.net/en_US/all.js</li>
</ul>
</div>
</div>
<div class="step slide overlapped" data-x="1000">
<h1>Third-party Scripts</h1>
<div class="fake-web">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-arrow-left"></i></a>
<a class="btn" href="#"><i class="icon-arrow-right"></i></a>
<a class="btn" href="#"><i class="icon-repeat"></i></a>
<input type="text" value="http://example.com/"/>
</div>
<p>Hello, World!</p>
<img src="img/fblike.png"/>
<img src="img/plusone.png"/>
</div>
<div class="third-includes">
<h3>Scripts Included</h3>
<ul>
<li>https://connect.facebook.net/en_US/all.js</li>
<li>https://apis.google.com/js/plusone.js</li>
</ul>
</div>
</div>
<div class="step slide overlapped" data-x="1000">
<h1>Third-party Scripts</h1>
<div class="fake-web">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-arrow-left"></i></a>
<a class="btn" href="#"><i class="icon-arrow-right"></i></a>
<a class="btn" href="#"><i class="icon-repeat"></i></a>
<input type="text" value="http://example.com/"/>
</div>
<p>Hello, World!</p>
<img src="img/fblike.png"/>
<img src="img/plusone.png"/>
<img src="img/tweet.png"/>
</div>
<div class="third-includes">
<h3>Scripts Included</h3>
<ul>
<li>https://connect.facebook.net/en_US/all.js</li>
<li>https://apis.google.com/js/plusone.js</li>
<li>https://platform.twitter.com/widgets.js</li>
</ul>
</div>
</div>
<div class="step slide overlapped" data-x="1000">
<h1>Third-party Scripts</h1>
<div class="fake-web">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-arrow-left"></i></a>
<a class="btn" href="#"><i class="icon-arrow-right"></i></a>
<a class="btn" href="#"><i class="icon-repeat"></i></a>
<input type="text" value="http://example.com/"/>
</div>
<p>Hello, World!</p>
<img src="img/fblike.png"/>
<img src="img/plusone.png"/>
<img src="img/tweet.png"/><br/>
<img width="200" src="img/jquery_logo.png"/>
</div>
<div class="third-includes">
<h3>Scripts Included</h3>
<ul>
<li>https://connect.facebook.net/en_US/all.js</li>
<li>https://apis.google.com/js/plusone.js</li>
<li>https://platform.twitter.com/widgets.js</li>
<li>http://code.jquery.com/jquery-1.7.2.min.js</li>
</ul>
</div>
</div>
<div class="step slide overlapped" data-x="1000">
<h1>Third-party Scripts</h1>
<div class="fake-web">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-arrow-left"></i></a>
<a class="btn" href="#"><i class="icon-arrow-right"></i></a>
<a class="btn" href="#"><i class="icon-repeat"></i></a>
<input type="text" value="http://example.com/"/>
</div>
<p>Hello, World!</p>
<img src="img/fblike.png"/>
<img src="img/plusone.png"/>
<img src="img/tweet.png"/><br/>
<img width="200" src="img/jquery_logo.png"/>
</div>
<div class="third-includes">
<h3>Scripts Included</h3>
<ul>
<li>https://connect.<strong>facebook.net</strong>/en_US/all.js</li>
<li>https://apis.<strong>google.com</strong>/js/plusone.js</li>
<li>https://platform.<strong>twitter.com</strong>/widgets.js</li>
<li>http://code.<strong>jquery.com</strong>/jquery-1.7.2.min.js</li>
</ul>
</div>
<ul><li>example.com now trusts these domains!</li></ul>
</div>
<div class="step slide" data-x="2000">
<h1>Goals</h1>
<ol>
<li>Fine-grained access control</li>
<li>Full JavaScript support
<ul><li>Including <span class="code">eval</span> and <span class="code">with</span>.</li></ul>
</li>
<li>Browser Compatibility
<ul><li>All major browsers without plugins or modifications</li></ul>
</li>
<li>Resilient to attacks
<ul><li>Spin loops, memory exhaustion, page redirection, DOM modifications</li></ul>
</li>
</ol>
</div>
<div class="step slide" data-x="3000">
<h1>Existing Solutions</h1>
<ul>
<li>iframes
<ul>
<li>open to DOS, memory exhaustion, page redirection</li>
</ul>
</li>
<li>Static analysis / Runtime checks
<ul>
<li>FBJS, Gatekeeper, ADsafety, BrowserShield, WebSandbox, Caja</li>
<li>Reduced subset of JS, requires porting</li>
</ul>
</li>
<li>WebWorker sandbox (Treehouse)
<ul>
<li>requires message-passing</li>
</ul>
</li>
<li>Browser modifications
<ul>
<li>BEEP, Conscript, Atlantis</li>
<li>Requires modifying the browser, not portable</li>
</ul>
</li>
</ul>
</div>
<div class="step slide" data-x="4000">
<h1>js.js</h1>
<ul>
<li>A JavaScript interpreter that runs on JavaScript</li>
<li>Executes scripts in a secure sandbox</li>
<li>Allows site-operators fine-grained control over sandbox</li>
<li>Implemented by compiling SpiderMonkey to JavaScript using Emscripten</li>
</ul>
</div>
<div class="step slide" data-x="5000">
<h1>Emscripten</h1>
<ul>
<li>Emscripten is an LLVM-to-JavaScript compiler.</li>
<li>C --> Clang --> LLVM</li>
<li>LLVM --> Emscripten --> JavaScript</li>
<li>has its own implementation of libc</li>
<li><strong>not</strong> an emulator</li>
<li>emscripten.org</li>
</ul>
</div>
<div class="step slide" data-x="6000">
<h1>IsLeapYear C++</h1>
<pre class="prettyprint lang-cpp">
static inline bool
IsLeapYear(jsint year)
{
return year % 4 == 0 &&
(year % 100 || (year % 400 == 0));
}
</pre>
</div>
<div class="step slide" data-x="7000">
<h1>IsLeapYear LLVM</h1>
<pre class="prettyprint lang-llvm">
define internal fastcc zeroext i1 @_ZL10IsLeapYeari(i32 %year) nounwind readnone inlinehint {
entry:
%rem3 = and i32 %year, 3, !dbg !804097
%cmp = icmp eq i32 %rem3, 0, !dbg !804097
br i1 %cmp, label %land.rhs, label %land.end, !dbg !804097
land.rhs:
%rem1 = srem i32 %year, 100, !dbg !804097
%tobool = icmp eq i32 %rem1, 0, !dbg !804097
br i1 %tobool, label %lor.rhs, label %land.end, !dbg !804097
lor.rhs:
%rem2 = srem i32 %year, 400, !dbg !804097
%cmp3 = icmp eq i32 %rem2, 0, !dbg !804097
br label %land.end, !dbg !804097
land.end:
%0 = phi i1 [ false, %entry ], [ true, %land.rhs ],
[ %cmp3, %lor.rhs ]
ret i1 %0, !dbg !804099
}
</pre>
</div>
<div class="step slide" data-x="8000">
<h1>IsLeapYear JavaScript</h1>
<pre class="prettyprint lang-js">
function __ZL10IsLeapYeari($year) {
var $cmp = ($year & 3 | 0) == 0;
do {
if ($cmp) {
if (($year % 100 | 0) != 0) {
var $0 = 1;
break;
}
var $0 = ($year % 400 | 0) == 0;
} else {
var $0 = 0;
}
} while (0);
var $0;
return $0;
return null;
}
</pre>
</div>
<div class="step slide overlapped" data-x="8000">
<h1>IsLeapYear JavaScript</h1>
<pre class="prettyprint lang-js">
function __ZL10IsLeapYeari(a) {
return 0 == (a & 3 | 0) ? 0 != (a % 100 | 0) ?
1 : 0 == (a % 400 | 0) : 0
}
</pre>
</div>
<div class="step slide overlapped" data-x="8000">
<h1>IsLeapYear JavaScript</h1>
<pre class="prettyprint lang-js">
function __ZL10IsLeapYeari(a) {
return 0 == (a & 3 | 0) ? 0 != (a % 100 | 0) ?
1 : 0 == (a % 400 | 0) : 0
}
</pre>
<pre class="prettyprint lang-cpp">
static inline bool
IsLeapYear(jsint year)
{
return year % 4 == 0 &&
(year % 100 || (year % 400 == 0));
}
</pre>
</div>
<div class="step slide" data-x="9000">
<h1>Creating js.js</h1>
<ul>
<li>Required extensive patching to SpiderMonkey (300,000 lines of C++)</li>
<li>A few patches submitted to Emscripten</li>
<li>Resulting js.js library has all the functionality of SpiderMonkey</li>
</ul>
</div>
<div class="step slide" data-x="10000">
<h1>js.js Demo - 1+1</h1>
<pre class="prettyprint lang-js">
var jsObjs = JSJS.Init();
var compiledObj = JSJS.CompileScript(
jsObjs.cx, jsObjs.glob, "1 + 1");
var rval = JSJS.ExecuteScript(
jsObjs.cx, jsObjs.glob, compiledObj);
var d = JSJS.ValueToNumber(jsObjs.cx, rval);
console.log(d);
</pre>
<div class="demo-container">
<button onclick="toggleIframe(this);">Run Demo</button>
<div class="demo-contents" data-src="1+1.html"></div>
</div>
</div>
<div class="step slide" data-x="11000">
<h1>js.js Demo - communication</h1>
<pre class="prettyprint lang-js">
function nativeAdd(d1, d2) {
return d1 + d2;
}
var wrappedNativeFunc = JSJS.wrapFunction({
func: nativeAdd,
args: [JSJS.Types['double'], JSJS.Types['double']],
returns: JSJS.Types['double']});
JSJS.DefineFunction(jsObjs.cx, jsObjs.glob,
"nativeAdd", wrappedNativeFunc, 2, 0);
var rval = JSJS.EvaluateScript(jsObjs.cx, jsObjs.glob,
"nativeAdd(17, 2.4);");
</pre>
<div class="demo-container">
<button onclick="toggleIframe(this);">Run Demo</button>
<div class="demo-contents" data-src="communication.html"></div>
</div>
</div>
<div class="step slide" data-x="12000">
<h1>js.js Demo - Fibonacci</h1>
<pre class="prettyprint lang-js">
function fibonacci(n) {
if (n==0 || n==1) {
return n;
}
var prev2 = 0, prev1 = 1, fib = 1, i;
for (i=2; i<=n; i++) {
fib = prev1 + prev2;
prev2 = prev1;
prev1 = fib;
}
return fib;
}
</pre>
<div class="demo-container">
<button onclick="toggleIframe(this);">Run Demo</button>
<div class="demo-contents" data-src="fibonacci.html"></div>
</div>
</div>
<div class="step slide" data-x="13000">
<h1>js.js Demo - Twitter Button</h1>
<div class="align-center" style="margin-top: 40px; margin-bottom: 40px;">
<code>http://platform.twitter.com/widgets.js</code>
<p style="font-size: 26px; margin-top: 20px;">47KB of complicated, closure-compiled JavaScript.</p>
</div>
<div class="demo-container">
<button onclick="toggleIframe(this);">Run Demo</button>
<div class="demo-contents" data-src="tweet.html"></div>
</div>
</div>
<div class="step slide" data-x="14000">
<h1>Sunspider Benchmark</h1>
<img class="solo-image" src="img/combined_times.png" />
</div>
<div class="step slide" data-x="15000">
<h1>Sunspider Benchmark</h1>
<img class="solo-image" src="img/ff_times.gif" />
</div>
<div class="step slide" data-x="16000">
<h1>Microbenchmark</h1>
<table style="margin-top: 50px; width: 600px;" class="table table-striped">
<tbody>
<tr>
<th>Operation</th>
<th class="align-right">Mean Execution Time (ms)</th>
</tr>
<tr>
<td>libjs.min.js load</td>
<td class="align-right">84.9</td>
</tr>
<tr>
<td>NewRuntime</td>
<td class="align-right">25.2</td>
</tr>
<tr>
<td>NewContext</td>
<td class="align-right">35.8</td>
</tr>
<tr>
<td>GlobalClassInit</td>
<td class="align-right">15.5</td>
</tr>
<tr>
<td>StandardClassesInit</td>
<td class="align-right">60.1</td>
</tr>
<tr>
<td>Execute 1+1</td>
<td class="align-right">70.6</td>
</tr>
<tr>
<td>DestroyContext</td>
<td class="align-right">33.3</td>
</tr>
<tr>
<td>DestroyRuntime</td>
<td class="align-right">1.8</td>
</tr>
</tbody>
</table>
</div>
<div class="step slide" data-x="17000">
<h1>js.js</h1>
<ul>
<li>A secure sandbox for untrusted scripts
<ul>
<li>Fine-grained access control</li>
<li>Compatible with major browsers</li>
</ul>
</li>
</ul>
<table class="table table-striped" style="margin-top: 50px; width: 600px; border-top: 2px solid #666666">
<tr><td>Paper</td><td><a href="http://tinyurl.com/js-js-paper">tinyurl.com/js-js-paper</a></td></tr>
<tr><td>Blog Post</td><td><a href="http://tinyurl.com/js-js-blog-post">tinyurl.com/js-js-blog-post</a></td></tr>
<tr><td>Source</td><td><a href="https://github.com/jterrace/js.js">github.com/jterrace/js.js</a></td></tr>
<tr><td>Demos</td><td><a href="http://jterrace.github.com/js.js">jterrace.github.com/js.js</a></td></tr>
<tr><td>Twitter</td><td>@jterrace</td></tr>
</table>
<p style="margin-top: 70px; text-align: center; font-size: 36px; line-height:40px;"><strong>Thanks! Questions?</strong></p>
</div>
</div>
<script src="js/impress.js"></script>
<script>impress().init();</script>
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript" src="js/lang-llvm.js"></script>
<script>prettyPrint();</script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/js.js.talk.js"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.