WASM-native Unix sandboxing for the web

evacchi1 pts0 comments

Wanix :: Wasm-native Unix sandboxing for the web

new<br>Wanix 0.4 — wanix elements

Wasm-native Unix sandboxing for the web

Run and interact with real Wasm and x86 programs entirely sandboxed in the browser. No server. Inspired by Plan 9.

dst="rc.wasm" type="file"<br>src="https://wanix.dev/extras/0.4.0-rc2/rc.wasm">

cmd="rc.wasm" term start>

rc% ls<br>rc.wasm<br>rc%

Three tags and our Plan 9 inspired shell rc gets us a tiny

embedded, Wasm-native Unix-like environment.

wanix recipes

Basic starting points using Wanix Elements

Run a Shell<br>Edit Files<br>Shell in Workbench<br>Boot a VM<br>Linux Dev Workbench

Export a Namespace

Shell onto Namespace<br>Edit Remote Files

Allocates a new #ramfs to the namespace root,<br>binds in the rc shell and an inline file, then runs the shell<br>task with a terminal. Try running:

ls

cat shell.txt

Workbench can be used as a file editor and explorer for any namespace.<br>This uses #ramfs but it could be any other namespace, for<br>example #web/opfs for browser persistent storage.

A Linux VM can be booted directly off the namespace.<br>Here we use an Alpine/Busybox archive with kernel that, given a moment, boots to a shell. Try running:

ls /bin

cat /etc/os-release

If you provide Workbench a task template with role="shell" it will be run in a terminal.<br>Workbench layout can also be modified. Here we use panel="max" to make the terminal panel full screen.

Workbench can be used on a VM namespace, but in order to use the shell<br>and files inside the VM, we make sure to export the VM guest namespace and tell Workbench to use it for creating the terminal.

If id and allow-origins are provided to a namespace,<br>the namespace can be imported into other namespaces using an import bind.

We layer/union the imported namespace with a local namespace that includes the rc shell to shell "onto" a remote namespace. Try running:

cat exported.txt

ls web

Workbench can be used to edit files of a remote imported namespace quite easily. What other recipes can you find?

wanix elements

Just a few tags bootstrap a Unix for the web

ns

Tags marked ns are namespaces too — any one can be<br>your single top-level element, with<br>inside defining<br>what it contains.

Core — the building blocks

orthogonal primitives

runs an executable in a namespace<br>docs

Bind a Wasm binary into the namespace, then start it.<br>cmd is the command line; start runs it<br>headless as soon as the system is ready.

Inline a JS file and run it as a task. Wanix supports task drivers for pluggable execution with built-in drivers for JS and Wasm.

Name the task with id, allocate a terminal with<br>term, and pass args on cmd — then<br>wire a to<br>#task/shell/term.

an xterm.js terminal for a task or vm<br>docs

Typically tasks are started with a terminal allocation that automatically wires up to.<br>Its common to use as the top-level element for a task.

Visual elements like can be used outside a namespace for styling flexibility,<br>they just need explicit for and path attributes to wire up to Wanix terminal.

Use raw for VM serial consoles so bytes pass<br>through with no local line editing.

runs a virtual machine in a namespace, powered by v86<br>docs

Boot a headless Linux VM by binding in the v86 emulator assets and the Linux system image.<br>It will detect the Linux kernel and boot to a shell.

This is more typical where you would allocate and attach a terminal,<br>though for VM consoles the terminal needs to be in raw mode.

If the image supports, export="ttyS0" can be used to export<br>the internal namespace at #vm/1/guest.

Once running, the guest namespace is reachable under<br>#vm/1/guest — bind into it or point a workbench<br>at its task and term trees.

an explicit namespace container<br>docs

Use to explicitly create a namespace.

-->

Use to explicitly create a namespace.<br>Using any other tag as the top-level element will implicitly create a namespace.

Give the namespace an id and<br>allow-origins so other pages can import this<br>namespace using an import bind.

bind mount files, archives, and other namespaces into the namespace<br>docs

Bind can link names, allocate devices, or using type="file" it can fetch<br>or inline files. Bind is a versatile primitive for building namespaces.

Using type="archive" you can unpack a .tar / .tgz into a<br>directory tree. Layer multiple archives or directory binds to the same dst to create a recursive union.

Using type="import" you can import a remote namespace using 9P over WebSocket or as an embedded iframe.

Extended — larger components

require additional assets

embedded VS Code workbench as editor, file explorer, full IDE, or app shell<br>docs

Embed a VS Code workbench backed by the Wanix namespace. The assets attribute is required. A task<br>with role="shell" needs to be given to enable a terminal.

Using attributes like open and sidebar you can control the initial state of the workbench.<br>Here we simplify IDE to effectively be a single-file editor.

In the futre, you'll be able to add custom extensions and views to workbench and even live edit them<br>within the...

namespace shell workbench wasm terminal wanix

Related Articles