JetBrains/websandbox

A sandbox library for runnung javascript inside HTML5 sandboxed iframe

Websandbox

Websandbox library provides a way to execute unsafe js code inside HTML5 sandbox - iframe with sandbox attribute. It is usable to host user provided widgets and similar cases.

Working example: http://jetbrains.github.io/websandbox.

Simple usage (see examples folder to more information):

import Sandbox from 'websandbox';

Sandbox.create({}).promise
    .then(function(sandbox) {
        sandbox.run('console.log("Hello from sandbox!")');
    });

Function run (will be stringified and called inside sandbox)

Function should has "name" property to be able to run.

import Sandbox from 'websandbox';

var localApi = {
    testApiFn: function (message) {
        console.log('Host function called from iframe with: ' + message);
    }
};

Sandbox.create(localApi).promise
    .then(function(sandbox) {
        sandbox.run(function functionName() {
            Websandbox.connection.remote.testApiFn("some argument");
        });
    });

Communication with sandboxed code

import Sandbox from 'websandbox';

var localApi = {
    testApiFn: function (message) {
        console.log('Host function called from iframe with: ' + message);
    }
};

const sandbox = Sandbox.create(localApi, {frameContainer: '.iframe__container', frameClassName: 'simple__iframe'});
sandbox.promise
    .then(() => {
        console.log('Sandbox is created. Trying to run code inside');

        return sandbox.run(`
            console.info("Sandboxed code initialized successfully");
            var title = document.createElement('h3');
            title.innerHTML = "Content is generated from the sandbox";
            document.body.appendChild(title);
            Websandbox.connection.remote.testApiFn("some argument");

            Websandbox.connection.setLocalApi({
                sandboxedMethod: function(message) {
                    console.info('sandboxedMethod called successfully:', message);
                    return 'this is sandboxedMethod result';
                }
            });
        `);
    })
    .then(() => console.log('Code has been ran'))
    .then(() => {
        console.log('Calling sandboxedMethod...');
        return sandbox.connection.remote.sandboxedMethod('hello from host');
    })
    .then(res => console.log('Call was successful:', res));

Import styles

import Sandbox from 'websandbox';

Sandbox.create({}).promise
    .then(function(sandbox) {
        sandbox.injectStyle(`
            html, body {
                background-color: blue;
            }
        `);
    });