JavaScript in JavaScript (js.js): Sandboxing Third-Party Scripts

Early last fall, I started working on a project called js.js with two other graduate students, Naga Katta and Stephen Beard. We started using a public Github repository from the start, and at the beginning of January, the author of three.js found and tweeted a link to our repository to his many followers. Soon after, a post wound up on Hacker News. Unfortunately, we weren’t very far along in the project yet, and weren’t really ready to show anyone our work, so there was a lot of confusion and negative criticism.

We’ve reached the point where js.js performs reasonably well and has a decent amount of functionality implemented. In this post, I’ll outline what js.js is, how it works, demonstrate a sample application that uses it, and show results of a performance analysis.

js.js is a JavaScript interpreter (which runs in JavaScript) that allows an application to execute a third-party script inside a completely isolated, sandboxed environment. An application can, at runtime, create and interact with the objects, properties, and methods available from within the sandboxed environment, giving it complete control over the third-party script. js.js supports the full range of the JavaScript language, is compatible with major browsers, and is resilient to attacks from malicious scripts.

Our initial prototype implementation of the js.js runtime has been created by compiling the SpiderMonkey JavaScript interpreter to LLVM bytecode using the Clang compiler and then using Emscripten to translate the LLVM bytecode to JavaScript.

Emscripten

Emscripten, a project by Alon Zakai, is an LLVM-to-JavaScript compiler. It takes LLVM bitcode (compiled with an LLVM frontend like Clang) and compiles that into JavaScript, which can be run on the web. There is some great technical documentation on how this works on the Emscripten wiki, so I won’t go into too much detail, but I’ll give an example of this process.

Here’s a simple C++ functions that calculates a Fibonacci number:

int fibonacci(unsigned int n) {
  if (n==0 || n==1) {
    return n;
  }
  unsigned int prev2 = 0, prev1 = 1, fib = 1, i;
  for (i=2; i<=n; i++) {
    fib = prev1 + prev2;
    prev2 = prev1;
    prev1 = fib;
  }
  return fib;
}

After compiling this with Clang, below is the LLVM bitcode:

define i32 @fibonacci(i32 %n) nounwind readnone {
  %1 = icmp ult i32 %n, 2
  br i1 %1, label %.loopexit, label %.lr.ph

.lr.ph:                                           ; preds = %.lr.ph, %0
  %i.04 = phi i32 [ %3, %.lr.ph ], [ 2, %0 ]
  %prev2.03 = phi i32 [ %fib.02, %.lr.ph ], [ 0, %0 ]
  %fib.02 = phi i32 [ %2, %.lr.ph ], [ 1, %0 ]
  %2 = add i32 %prev2.03, %fib.02
  %3 = add i32 %i.04, 1
  %4 = icmp ugt i32 %3, %n
  br i1 %4, label %.loopexit, label %.lr.ph

.loopexit:                                        ; preds = %.lr.ph, %0
  %.0 = phi i32 [ %n, %0 ], [ %2, %.lr.ph ]
  ret i32 %.0
}

This is where Emscripten comes in. It takes this LLVM bitcode and generates JavaScript instructions. Rather than trying to emulate the LLVM, it actually translates operations that it can into their JavaScript equivalent. Here’s what it looks like after translation:

Module._fibonacci = (function (a) {
    var b = 2 > a;
    a: do {
        if (b) {
            var d = a
        } else {
            for (var c = 1, e = 0, f = 2;;) {
                var k = e + c,
                    f = f + 1;
                if (f > a) {
                    d = k;
                    break a
                }
                e = c;
                c = k
            }
        }
    } while (0);
    return d
});

To see this working in actions, here’s a jsfiddle showing this function calculating the 20th number in the Fibonacci sequence. Notice an important thing happening in this translation: the LLVM bitcode is not getting emulated. It has actually translated addition, assignment, and comparison operators into their equivalent JavaScript form.

js.js

To create js.js, we ran Emscripten on SpiderMonkey, the JavaScript engine used in Firefox. SpiderMonkey comprises about 300,000 lines of C and C++ code. Much of our effort was spent patching SpiderMonkey to get it to compile in Emscripten’s environment, a limited subset of libc. We also had to disable all assembly routines and just-in-time (JIT) compiling features of SpiderMonkey, since assembler is not available in JavaScript.

Once we had the SpiderMonkey API available, we wrote a wrapper script that makes it much easier to use the library from JavaScript. The js.js API wrapper is about 1000 lines of JavaScript and allows you to create sandboxed environments and execute code in them. The following is an example that shows how to use the API to run 1+1 in a sandbox and get the result as a number:

var src = "1 + 1";
var jsObjs = JSJS.Init();
var compiledObj = JSJS.CompileScript(jsObjs.cx, jsObjs.glob,
                                     src);
var rval = JSJS.ExecuteScript(jsObjs.cx, jsObjs.glob,
                              compiledObj);
d = JSJS.ValueToNumber(jsObjs.cx, rval);

After executing, the value of d will be 2.

Performance Evaluation

We wanted to quantify the performance overhead at the microbenchmark level and the macrobenchmark level. For the former, we timed each of the js.js functions, and for the latter, we used the SunSpider JavaScript benchmark.

Microbenchmark

To quantify the performance of each the js.js API function, the following table shows the mean across 10 runs of execution time (in milliseconds) of each function called by the above 1+1 example:

Operation Mean Execution Time (ms)
libjs.min.js load 84.9
NewRuntime 25.2
NewContext 35.8
GlobalClassInit 15.5
StandardClassesInit 60.1
Execute 1+1 70.6
DestroyContext 33.3
DestroyRuntime 1.8

The execution time here isn’t great, but it’s within the range that the library is usable. It takes about 220ms of setup time to get an execution environment up and running.

Macrobenchmark

We also wanted to compare the performance of js.js with native JavaScript execution. We took the SunSpider JavaScript benchmark and ran it natively using the SpiderMonkey js shell (with the JIT turned off). We then ran the benchmarks again using js.js. The following graph shows the median factor of slowdown for running each benchmark inside js.js in both Firefox and Chrome:

js.js Sunspider Benchmark


This benchmark shows that on average, running code inside js.js is about 200 times slower than native execution. Considering that JavaScript is being run instead of native x86, two orders of magnitude is not terrible. Depending on the scripts being executed in the sandbox, the performance overhead might be acceptable. We’ve also looked into where most of the execution time is going, and we found that the interpreter loop is being converted into a single JavaScript function that is thousands of lines long. JIT compilers don’t handle this case very well, so we’ve been brainstorming ideas on how to break up this interpreter loop into separate functions, that could help improve performance.

Demo

As a demo, we took the JavaScript used to render the Twitter button and ran it inside js.js, giving the script virtual access to a DOM. This allows us to run the script, while maintaining complete control over what the sandbox can do to the real DOM.

Live js.js Twitter Demo

More Demos

Conclusion

This project has been a lot of fun to work, and we recently had a demo paper about js.js accepted to WebApps 2012. For more details, check out the js.js paper. The source code for js.js is available on GitHub, so if you’re interested in the project, you’re welcome to fork it and try it out. Pull requests accepted!

  • sevda safar
  • sevda safar

    there is no such thing as encryption of the data in your skin, unless your talking about heterochromatin, at which point your argument breaks down.

    یکی از اصلی ترین کارها برای شروع سفر به خارج از کشور است. حالا برای تهیه و رزرو
    بلیط خارجی
    نیازی به مراجعه حضوری به آژانس ها یا مراکز فروش نیست. به راحتی با چند کلیک ساده می
    توانید بلیط پرواز خارجی دلخواه خودتان را به با بهترین قیمت در اختیار داشته باشید. با نشکر. [خرید بلیط هواپیما با دل سفر در ک
    متر از دو دقیقه و بلیط هواپیما تهران
    ]

    there is no such thing as encryption of the data in your skin, unless your talking about heterochromatin, at which point your argument breaks down.
    بلیط هواپیما ارزان

    خرید بلیط خارجی

    بلیط خارجی

    بلیط ارزان هواپیما

    بلیط چارتر هواپیما

    بلیط چارتر

    بلیط پرواز خارجی

    پرواز خارجی

    قیمت بلیط هواپیما

  • adadada
  • Lili davoodi

    href=”http://گردشگری.mihanblog.com/post/132″ target=”” title=””>جاذبه
    های گردشگری مالزی و جاذبه های اقتصادی آن برای شما
    بیشتر بگوییم. سفر به مالزی می تواند با تجربه ای بسیار باورنکردنی برای
    شما همراه باشد. در ادامه در مورد این کشور برای شما بیشتر می
    گوییم. مالزی یکی از معدود کشور هایی است که
    هر ساله حجم بسیار بالایی از توریست را به خود جذب می کند. از این رو دولت
    مالزی سرمایه گذاری بسیار زیادی را به روی
    این صنعت کرده و بازدهی فوق العاده ای را نیز
    دریافت کرده است.همانطور که پیشتر ذکر شد پیشرفت های کشور مالزی بسیار
    قابل مشاهده بوده و برای توریست ها جذاب است.
    از این رو با ساخت جاذیه های گردشگری اقتصادی و دیدنی در مالزی حجم توریست
    در این کشور کنترل می شود. مرکز تجارت جهای
    مالزی
    که برج های دو قلوی به هم متصل، بنای اصلی آن است که
    در نوع خود کم نظیر است. در ادامه در مورد مالزی
    و پیشرفت آن در حوزه اقتصادی
    برای شما بیشتر
    بگوییم.مورد دیگری که کشور مالزی به آن بسیار
    رسیده و سرمایه گذاری خوبی کرده است موضوع نگهداری و معرفی بنا های تاریخی
    این کشور است. هر کشوری به هر میزان که بنای تاریخی داشته باشد، به دو اصل
    دیگر نیز نیاز دارد.<img class="aligncenter
    size-full wp-image-1085" title="مالزی و پیشرفت آن در حوزه اقتصادی"
    src="http://e-malaysia.ir/wp-content/uploads/مالزی-و-پیشرفت-آن-در-حوزه-اقتصادی.jpg&quot;
    alt="مالزی و پیشرفت آن در حوزه اقتصادی

  • Airplanes news

    سلام. وقت همه تون بخیر. دوست دارین با هرآنچه درباره هواپیمایی ماهان لازمه آشنا بشین؟ یا مثلا نظرتون درباره آشنایی کامل با هواپیمای بوئینگ 737 چیه؟ یا من خودم پیشنهاد میدم حتما مقاله هواپیمایی ماهان، هرآنچه باید بدانید، و البته توصیه می کنم هواپیمایی امارات، از بزرگترین ایرلاین های دنیا را هم حتما مطالعه کنید.

  • jonthoang
  • علوم غریبه

    علوم غریبه – شاپ لرن

    https://shop-learn.ir

  • علوم غریبه

    علوم غریبه – شاپ لرن

    #شاپ لرن
    #علوم غریبه
    #مرجع دانلود کتب علوم غریبه

    https://shop-learn.ir

  • Hoang Tien

    This is great code, i will try with my website http://mohinhkientruc.org/

  • William

    greate code, this code is very useful and friendly for my website with keyword dao tao seo

  • Nước mắm an toàn

    It is interesting that we need to change
    nuoc mam an toan

  • Mark

    Hello everyone, Iranian, cool thing for animal and pet lovers. Persian pet online market and farm animals on the CHARPA can be visited. All type of Persian cats Persian mastiffs Persian birds …
    Hello everyone, Iranian, cool thing for animal and pet lovers. Persian pet online market and farm animals on the CHARPA can be visited. All type of Persian cats Persian mastiffs Persian birds …

  • Sarrah

    چارپا آماده خدمت به همه ایران. خوش آمدید،درج آگهی در سایت چارپا رایگانه.چارپا اولین بازار آنلاین حیوانات، محصولات و خدمات باغ و مزرعه ایران هست که تمام هموطنان را از نقاط مختلف بهم وصل میکنه تا بتوانن راحتر و بیشتر خرید و تجارت کنند.آگهی شما از سراسر ایران توسط هموطنان مشاهده میشه ، و شانس ارتقاء در فروش ، خرید و یا عرضه و تقاضای برای شما و یا کسب و کارتان بسیار بالا هست، فرم های لازم را به دقت با رعایت شئونات اخلاقی پر واز عکس های مناسب استفاده نمایید. چارپا قصد دارد در رونق و ارتقای کیفیت خرید و فروش محصولات، خدمات و حیوانات مجاز، باغ و مزرعه با فراهم نمودن بازار آنلاین گامی مثبت باشد تا سبب کارآفرینی هم گردد.

     

    سگ های بامزه انواع نژاد

    اسب های سیلمی خاص 

    گربه های اصیل و زیبا 

    انواع پرندگان

    انواع خزندگان

    انواع ماهی ها

    انواع جوندگان

     

  • Unlike many object-oriented languages, there is no distinction between a function definition and a method definition. Rather, the distinction occurs during function calling; when a function is called as a method of an object, the function’s local this keyword is bound to that object for that invocation.

    Fortinet Viet Nam.

  • Mohammadali Azehari

    بهترين برند دربهاي ضد سرقت
    معمولا بهترين برند درب ضد سرقت برندي است كه ضمن فروش بالا به وسيله شبكه نمايندگي هاي فروش در سراسر كشور بتواند خدمات فروش درب ضد سرقت خوبي به مشتري دهد و رضايت مشتري رو جلب نمايد و در كنار اين موارد بتواند حس امنيت را به خريدار و حس خريد كالاي خوب ايراني را بدهد و مشتري رضايت كامل از خريد در ضد سرقت ايراني اين برند را داشته باشد
    درب ضد سرقت

    درب ضد سرقت

  • Mohammadali Azehari

    درب ضد سرقت را مي توان به سليقه مشتري با هر طرحي توليد كرد اين طرح مي تواند شامل شيشه باشد يعني درب ضد سرقت شيشه خور حال بايد مشتري به نسبت كالاي مورد احتياج خود طرح درب ضد سرقت را طراحي كرده و كاليبره شده براي ما ارسال كند و گروه فني مستقر در كارخانه تغييرات لازم را در ان اعمال كرده و با هماهنگي با مشتري و پس از تاييد تغييرات توسط مشتري دستور ساخت در ضد سرقت صادر شده حال در اين راستا بايد به چند نكته توجه شود اول اينكه درب ضد سرقت نبايد حلالي شكل باشد و قابل ساخت نيست. ودوم اينكه اگر در درب ضد سرقت شيشه استفاده شود عرض شيشه نبايد از سر يك انسان بيشتر شود تا فرد سارق نتواند با شكستن شيشه وارد منزل شود و همچنين عرض بازشوي درب ضد سرقت نيايد بيشتر از 115 سانت باشد و اگر عرض بيشتري مورد نياز است بايد از لنگه هاي بيشتري استفاده شود در درب ضد سرقت
    درب ضد سرقت

    درب ضد سرقت

  • Funha Com

    That was great. Thankful

    https://bit.ly/2FAGpV1

  • Mr mosbat
  • Mohammadali Azehari

    مركز فروش دربهاي ضد سرقت در تهران كجاست يا بورس درب ضد سرقت در تهران كجاست ؟
    مركز جامعي براي فروش درب ضد سرقت در تهران وجود ندارد يا به قول معروف بورس درب ضد سرقت در تهران به صورت جامع وجود ندارد و اكثر اين مراكز در سراسر استان تهران پخش مي باشند ولي توليدي و كارخانه درب هاي ضد سرقت اطراف تهران هستند. مخصوصا كرج و حومه ان مركز اصلي توليد درب ضد سرقت تهران ميباشد
    برگرفته از سایت – reference
    دربهای ضد سرقت

  • Mohammadali Azehari

    بهترين درب ضد سرقت ايراني چيست
    نظر قطعي در مورد بهترين درب ضد سرقت ايراني نميتوان داد ولي به طور كلي هر درب هايي كه در ان از ورق فولادي ترجيحا فولاد ايراني شركتي استفاده شده باشد و نيز سازنده ان درب را با استاندارد كارخانه اي ساخته باشد مي تواند جزو يكي از بهترين هاي درب ضد سرقت ساخت داخل باشد

    برگرفته از سایت – reference
    درب ضد سرقت ایرانی

  • nhà phân phối dây cáp thép
    giá dây cáp thép 4mm

  • bạn có thể xem thêm : giá dây cáp thép 10mm

  • Mohammadali Azehari

    فريم انتظار درب ضد سرقت
    ابعاد فريم انتظار درب هاي ضد سرقت بايد 1 سانتيمتر بيشتر از ابعاد خود درب باشد به عنوان مثال اگر ابعاد پشت تا پشت درب ضد سرقت 105/210 باشد ابعاد فريم انتظار ان بايد 106/211 باشد
    برگرفته از سایت – reference
    ضد سرقت

  • Mohammadali Azehari

    باید به جزئیات و عملکرد صحیح آنها توجه کامل صورت گیرد درب ضد حريق به درب هائی گفته می شود که در برابر حرارت ۱الی ۲ساعت می توانند کاملا مقاوم باشند ومناسب برای جلوگیری از گسترش حریق در فضاهای باز
    برگرفته از سایت – reference
    درب ضد حريق

  • aminlotfi

    آموزش بازاریابی اینترنتی در رسانه امین به بهترین شکل ممکن آموزش کسب درآمد از اینترنت و کسب و کار اینترنتی

  • Lê Mi

    Thank you so much!
    Sign: Mỹ Phẩm Cho Mẹ.