Norvell's Public Machinations

    websandbox
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.3 • Public • Published

    Websandbox Build Status

    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: https://websandbox.surge.sh.

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

    Install

    npm i websandbox

    DownloadsWeekly Downloads

    209

    Version

    0.5.3

    License

    MIT

    Unpacked Size

    138 kB

    Total Files

    12

    Last publish

    Collaborators

    • huston007
    • jetbrains-buildserver