Package Exports

@jetbrains/websandbox
@jetbrains/websandbox/dist/frame
@jetbrains/websandbox/dist/frame.js
@jetbrains/websandbox/dist/websandbox.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@jetbrains/websandbox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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;
            }
        `);
    });