sandbox.js

Sandboxing javascript in embedded iframe.

Usage

var sb = new sandbox(config);

Configurations

• root - root element. sandbox.js will create one if this is omitted.
• container - if root is not specified or root doesn't have a parent, attach root to container. default to document.body if both root and container are omitted.
• sandbox - iframe sandbox attributes. default to "allow-scripts allow-pointer-lock". Note: blob iframe in Firefox exploits host cookie with empty sandbox.
• className: space separated class list to add over the root element.
• window - works in standalone popup window. root and container won't be necessary when window provided. window, if provided, should be an object containing following members:
  • name - window name. randomly generated if omitted.
  • width - window width. decided by sandbox.js if omitted.
  • height - window height. decided by sandbox.js if omitted.

Methods

• setProxy(({obj: obj}) - set an object as proxy interface. Proxy object must passed in an object like:

  sb.setProxy({ Interface: Interface });

  once set, you can invoke corresponding object in sandbox with following:

  sb.proxy.someFunc(args);

  you must have the object ( e.g., Interface ) with the exact same name as a global object in sandbox context.

• send(msg) - send message to sandbox. msg will be wrapped in an object as:

  { type: \msg, payload: your-msg-data }

• reload() - reload sandbox.

• load(payload) - initialize sandbox content. payload can be a plain string or has following structure:

  {
     "html": (string or {url: HTML-URL} ),
     "css":  (string or {url: CSS-URL} ),
     "js":   (string or {url: JS-URL} )
  }

• openWindow(cfg) - open sandbox in a standalone window.

  • cfg.name - window name.

Sample Usage

iframe mode:

    /* create a sandbox instance */ 
    var sb = new sandbox({
      container: 'selector-for-certain-node',
      className: 'space separated class names'
    });

    /* load and render code */
    sb.load({js: '...', html: '...', css: '...'});

    /* you can still render it again in a standalone window */
    sb.openWindow({name: "window-name"})
      .then(function() { ... });

window mode:

    /* create a sandbox instance */ 
    var sb = new sandbox({
      window: 'window-name'
    });

    /* load and render code */
    sb.load({js: '...', html: '...', css: '...'});

you can also init with both modes:

    /* create a sandbox instance */ 
    var sb = new sandbox({
      window: 'window-name',
      container: 'selector-for-certain-node'
    });

Resources

• how figma support plugins: https://www.figma.com/blog/how-we-built-the-figma-plugin-system/

License

MIT