2

WorkerBox Demo

 1 year ago
source link: https://workerbox.net/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

WorkerBox Demo

WorkerBox.net

Free and Open Source, on Github

A secure sandbox for you to run end user JavaScript safely away from your own application.

  • Code is run in it's own subdomain of workerbox.net
  • Code is run in a WebWorker

The following is a demo of using WorkerBox to create a plugin architecture for a web UI. There are messages on the right, and an action bar that you can add commands to.

It will be impossible for you to effect the DOM of this page, without using the deliberately exposed methods on the scope.

Scope

The scope is how you communicate with your users code.

For this demo, you can't edit the scope, as it's hard coded into the demo app.

const scope = {
name: 'Mark',
getFullName: (first, last) => `${first} ${last}`,
clearToolbar: () => {
toolbar.innerHTML = '';
addToolbarButton: (title, onClick) => {
const element = document.createElement('button');
element.textContent = title;
element.addEventListener('click', () => {
timesCalled = timesCalled + 1;
onClick(timesCalled);
toolbar.appendChild(element);
addMessage: (message) => {
const element = document.createElement('li');
element.textContent = message;
messages.appendChild(element);

User Playground

You can edit the code below and see the results on the right.

// Let's clear our example toolbar between runs
clearToolbar();
// Scoped function calls can have arguments
addToolbarButton('Add Message', (timesCalled) => {
console.log('Add message has been called', timesCalled, 'times');
const time = (new Date()).toLocaleTimeString();
addMessage(`${name}: ${time}`);
// Note all functions are converted to promises
const fullName = await getFullName('Mark', 'Wylde');
console.log(fullName);
// You can define new functions
function add (a, b) {
return a + b;
// And return the answer to be returned after execution
return add(1, 2);

Result

Toolbar

Messages

  • Message one

Return:

Running

How does it work?

An iframe is inserted into the page from a completely separate domain.

The iframe then creates a web worker, and handles posting messages between the iframe, webworker and your own app.

Because the only communication between the user code and the workerbox instead is done through messaging, the argument inputs and outputs must all be JSON serializable.

Caveats

1. Storage

Web workers can't use cookies or localStorage, but even if they could they would be isolated to third party domain that is running the code.

However, there are some ways to store data. For example, indexDB.

While your unsafe user code can not access the indexDB of your own site, it can use the instance on the server's site.

But remember, anyone can run untrusted user code on the workerbox site. So if your users store data on the workerbox domain, technically anyone can view that data.

Therefore, you should advise your users not to store any data using the web workers API.

Of course, you could provide an abstraction on the `scope` that would safely allow you to store data on your own domain.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK