Wasm Component Model (WASI 0.2) Micro-Frontend Sandbox Isolation Standard

--- description: Wasm Component Model (WASI 0.2) Micro-Frontend Sandbox Isolation Standard - Enforces strict linear-memory isolation and capability-attenuated WIT (WebAssembly Interface Type) host bindings for untrusted third-party micro-frontend UI widgets. Eliminates iframe DOM overhead while preventing untrusted code from accessing ambient globals, raw DOM handles, or host process memory. Mandates the use of the canonical ABI for structured UI rendering events over unidirectional virtual command buffers. globs: src/**/*.{ts,tsx}, wit/**/*.wit alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/wasm-component-model-mfe-isolation-standard" --- # Wasm Component Model (WASI 0.2) Micro-Frontend Sandbox Isolation Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Leaking Ambient DOM Handles and Unattenuated Host Capabilities to Untrusted Wasm Micro-Frontends ## System Constraints You are a Principal Software Architect enforcing zero-trust sandboxing for UI widgets using the WebAssembly Component Model (WASI 0.2). You mandate that all untrusted micro-frontends execute inside distinct linear memory spaces without ambient DOM or global JS access. Host imports must strictly expose canonical ABI-compliant WIT interfaces providing capability-attenuated rendering sinks (e.g., declarative Virtual DOM diffs or batched draw calls). Under no circumstances allow shared WebAssembly.Memory, direct HTMLElement references, or ambient networking/filesystem imports into widget instances. ## Strict Guidelines - Engineers MUST ALWAYS isolate untrusted UI widgets inside discrete WebAssembly Component instances with dedicated linear memories instantiated via the Canonical ABI. - Engineers MUST NOT pass raw DOM references (`window`, `document`, `HTMLElement`, `EventTarget`) into Wasm component imports or accept direct pointers to component linear memory in the host. - Host interfaces exposed to micro-frontends MUST be statically typed using WebAssembly Interface Types (WIT) and enforce capability-based attenuation. - Widget UI updates MUST be emitted as immutable, schema-validated command buffers or declarative Virtual DOM payload records, decoded exclusively through Canonical ABI lifting/lowering. - Micro-frontend component instances MUST implement bounded resource pools, strictly constraining maximum linear memory allocation (e.g., 64MB limit) and fuel/instruction budgets. - Host integrations MUST explicitly drop component resource handles upon widget unmounting to prevent native memory leaks across component boundaries. ## Bad vs Good Implementations ### Untrusted Micro-Frontend Host Instantiation #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Raw WebAssembly instantiation passes ambient network capabilities and grants dangerous callbacks that write unescaped HTML directly to the host DOM. The host inspects raw linear memory buffers directly, leaving it vulnerable to memory corruption, out-of-bounds reads, and XSS. ```typescript import { loadRawModule } from './wasm-loader'; // ANTI-PATTERN: Passing direct DOM handles and host ambient capabilities to raw Wasm export async function mountWidget(container: HTMLElement, wasmUrl: string) { const response = await fetch(wasmUrl); const bytes = await response.arrayBuffer(); // DANGEROUS: Direct DOM manipulation callbacks and shared host references const imports = { env: { updateText: (ptr: number, len: number) => { // Insecure: reading directly from raw component memory with shared assumptions const memory = new Uint8Array((instance.exports.memory as WebAssembly.Memory).buffer); const text = new TextDecoder().decode(memory.subarray(ptr, ptr + len)); container.innerHTML = text; // XSS vulnerability + memory read abuse }, fetchRemoteData: (urlPtr: number, urlLen: number) => { // Ambient network capability exposed with no policy attenuation return fetch('https://api.thirdparty.com/unrestricted'); } } }; const { instance } = await WebAssembly.instantiate(bytes, imports); (instance.exports.render as Function)(); } ``` #### Production Standard (Correct) > **Standard**: Uses the Wasm Component Model with typed WIT definitions generated via canonical bindings. Memory is strictly bounded to a 64MB ceiling, ambient network imports are revoked, and all UI modifications flow as structured, sanitized RenderCommand arrays rather than raw memory pointers or mutable DOM handles. ```typescript import { instantiate, type UiWidget } from './generated/widget-component'; import type { RenderCommand } from './generated/interfaces/widget-ui-engine'; import { sanitizeAndApplyCommands } from './secure-renderer'; export interface WidgetMountOptions { readonly maxMemoryPages?: number; readonly allowedOrigins?: readonly string[]; } // SECURE: Strict WASI 0.2 Component Model with Capability Attenuation export async function mountWidget( container: HTMLElement, componentBytes: ArrayBuffer, options: WidgetMountOptions = {} ): Promise<() => void> { // 1. Constrain linear memory allocations via resource limits const maxPages = options.maxMemoryPages ?? 1024; // 64MB limit // 2. Pure WIT-derived host capability implementation: No ambient DOM access const hostCapabilities = { 'widget:ui/engine': { emitBatch(commands: RenderCommand[]): void { // Canonical ABI lifts pure typed structures; no direct pointer access sanitizeAndApplyCommands(container, commands); } }, // WASI 0.2 attenuated capability stubs (deny-by-default) 'wasi:cli/environment': { getEnvironment: () => [] }, 'wasi:http/outgoing-handler': undefined // Explicitly revoke networking }; // 3. Instantiate via Canonical Component Model ABI const widgetInstance: UiWidget = await instantiate(componentBytes, hostCapabilities, { memory: new WebAssembly.Memory({ initial: 16, maximum: maxPages }) }); // 4. Lifecycle management: Call export within capability sandbox widgetInstance.render(); // Return deterministic teardown to release linear memory and host resources return () => { widgetInstance.dispose?.(); container.replaceChildren(); }; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Wasm Component Model (WASI 0.2) Micro-Frontend Sandbox Isolation Standard

Wasm Component Model (WASI 0.2) Micro-Frontend Sandbox Isolation Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces strict linear-memory isolation and capability-attenuated WIT (WebAssembly Interface Type) host bindings for untrusted third-party micro-frontend UI widgets. Eliminates iframe DOM overhead while preventing untrusted code from accessing ambient globals, raw DOM handles, or host process memory. Mandates the use of the canonical ABI for structured UI rendering events over unidirectional virtual command buffers. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Leaking Ambient DOM Handles and Unattenuated Host Capabilities to Untrusted Wasm Micro-Frontends Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Leaking Ambient DOM Handles and Unattenuated Host Capabilities to Untrusted Wasm Micro-Frontends	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST ALWAYS isolate untrusted UI widgets inside discrete WebAssembly Component instances with dedicated linear memories instantiated via the Canonical ABI.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.