Mastering Micro‑Frontend Sandboxing with Alibaba Cloud’s Browser‑VM

Background

Micro‑frontend sandboxing is essential when multiple micro‑apps run in the same host, especially for multi‑instance scenarios where resource sharing (routing, CSS, globals, DOM) can cause conflicts. Alibaba Cloud’s ConsoleOS provides a Browser‑VM sandbox to isolate native browser objects.

JavaScript Sandbox Implementation

Sandbox Environment Construction

By wrapping application code in a closure and injecting a simulated window, document, location, and history, the sandbox prevents access to the real browser globals. Example:

function foo(window) {
  console.log(window.document);
}
foo({ document: {} });

ConsoleOS adds a Webpack plugin that injects a wrapper function ( __CONSOLE_OS_GLOBAL_HOOK__) around each micro‑app, allowing the host to provide mocked objects.

// bundled code
__CONSOLE_OS_GLOBAL_HOOK__(id, function (require, module, exports, {window, document, location, history}) {
  /* bundled code */
});
function __CONSOLE_OS_GLOBAL_HOOK__(id, entry) {
  entry(require, module, exports, {window, document, location, history});
}

Native Object Simulation

The sandbox creates an iframe (same‑origin about:blank) and extracts its contentWindow to obtain isolated native objects. Proxies are built around these objects so that, for example, window.document returns the sandboxed document.

class Window {
  constructor(options, context, frame) {
    return new Proxy(frame.contentWindow, {
      set(target, name, value) { target[name] = value; return true; },
      get(target, name) {
        if (name === 'document') return context.document;
        if (typeof target[name] === 'function' && /^[a-z]/.test(name)) {
          return target[name].bind && target[name].bind(target);
        }
        return target[name];
      }
    });
  }
}

CSS Isolation

Common approaches include CSS Modules, CSS namespaces, Dynamic StyleSheet, and Shadow DOM. ConsoleOS adopts CSS Modules combined with a custom namespace generated by a PostCSS plugin, ensuring both application‑specific and shared library styles are scoped.

// host app
.next-btn { color: #eee; }
// sub app
aliyun-slb .next-btn { color: #eee; }

Benefits: multiple instances coexist, no reliance on a specific pre‑processor, and complete isolation of different library versions.

Integration with Other Micro‑Frontend Systems

Browser‑VM can be used directly for object simulation, while the closure construction may need adaptation per framework. Example of creating a context and evaluating scripts:

import { createContext, removeContext } from '@alicloud/console-os-browser-vm';
const context = await createContext();
const run = window.eval(`(() => function({window, history, location, document}) {
  window.test = 1;
})()`);
run(context);
console.log(context.window.test); // 1
await removeContext(context);

Alternatively, the helper evalScripts runs code in an isolated context:

import { evalScripts } from '@alicloud/console-os-browser-vm';
const context = evalScripts('window.test = 1;');
console.log(window.test === undefined); // true

Live Demo

Visit the GitHub repository to try the sandbox live demo and see it applied in Alibaba Cloud’s enterprise workbench.