Wasm Component Model Isolation Standard for Untrusted Microfrontends

--- description: Wasm Component Model Isolation Standard for Untrusted Microfrontends - Enforces strict capability-based isolation for federated third-party microfrontends using the WebAssembly Component Model and WASI interfaces. Prohibits direct host DOM references, credential access, and ambient network calls, mandating typed WIT contract boundaries, virtualized memory quotas, and declarative host-side canvas or vDOM marshaling. globs: src/**/*.{ts,tsx,wit,rs} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/wasm-component-model-microfrontend-isolation" --- # Wasm Component Model Isolation Standard for Untrusted Microfrontends > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Executing Third-Party Microfrontends via Unsandboxed Eval or Unrestricted Iframe/DOM Injection ## System Constraints You are a Principal Software Architect enforcing the WebAssembly Component Model Isolation Standard for Microfrontends. Your task is to ensure untrusted federated plugins and microfrontends run strictly inside hardened WASI execution sandboxes. Never allow guest WebAssembly instances or microfrontends direct access to `window`, `document`, `localStorage`, `sessionStorage`, cookies, or ambient `fetch`. All host-guest interop must go through typed WebAssembly Interface Type (WIT) specifications with bounded linear memory and capability-based proxies. ## Strict Guidelines - Engineers MUST ALWAYS instantiate microfrontend components inside isolated WebAssembly instances with explicit linear memory ceilings via `WebAssembly.Memory({ initial, maximum })`. - Engineers MUST NOT pass `window`, `document`, ambient network handles, or credentials directly into Wasm host imports. - Host-guest communication MUST rely strictly on typed WebAssembly Interface Type (WIT) specifications compiled through canonical ABI bindings. - DOM manipulation MUST be mediated through declarative virtual-DOM event buffers or isolated offscreen canvases owned by the host application. - Host import functions MUST sanitize and validate all string buffers, arrays, and structured objects cross-marshaled over the Wasm linear memory boundary. - Components NEVER inherit ambient network or disk capabilities; network operations must route through an explicit host capability broker enforcing strict origin allowlists. ## Bad vs Good Implementations ### Unsafe Ambient Host Injection vs Capability-Gated Wasm Microfrontend Host #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Provides direct host capability bridges (`document.cookie`, `container.innerHTML`) into the WebAssembly instance without memory limits, WIT contracts, or capability confinement, exposing the host application to DOM-based XSS and session hijacking. ```typescript import { FederatedPlugin } from '@company/federation-loader'; // VULNERABLE: Instantiating dynamic plugin with direct access to host window and DOM export async function mountUntrustedWidget(container: HTMLElement, pluginUrl: string) { const response = await fetch(pluginUrl); const wasmBytes = await response.arrayBuffer(); // Leaks ambient window, localStorage, and unconstrained memory const instance = await WebAssembly.instantiate(wasmBytes, { env: { host_alert: (msgPtr: number) => alert('Plugin alert'), get_cookie: () => document.cookie, mutate_dom: (htmlPtr: number) => { container.innerHTML = '<div>Unchecked Injection</div>'; } } }); (instance.instance.exports.run as Function)(); } ``` #### Production Standard (Correct) > **Standard**: Enforces strict memory allocation caps, abstracts DOM mutation through an isolated command channel (`emitRenderOp`) with copy-on-read buffers, and guarantees guest execution conforms to a closed WIT interface without ambient host privilege. ```typescript import { instantiateComponent } from '@bytecodealliance/jco'; interface HostCapabilities { readonly maxMemoryPages: number; emitRenderOp(opType: number, payload: Uint8Array): void; } export async function mountIsolatedWidget( container: HTMLElement, wasmComponentBuffer: ArrayBuffer, caps: HostCapabilities ): Promise<() => void> { // 1. Enforce strict linear memory ceiling (e.g., max 16MB) const memory = new WebAssembly.Memory({ initial: 16, maximum: 256 }); // 2. Mediated declarative render pipeline via bounded message ring buffer const renderProxy = { dispatchCommand: (cmdId: number, ptr: number, len: number) => { if (len > 65536) throw new RangeError('Exceeded frame buffer allocation'); const view = new Uint8Array(memory.buffer, ptr, len); const safeCopy = new Uint8Array(view); caps.emitRenderOp(cmdId, safeCopy); } }; // 3. Strict capability import object conforming to WIT interface const { exports } = await instantiateComponent(wasmComponentBuffer, { 'mfe:sandbox/render-sink': renderProxy, 'wasi:cli/environment': { getEnvironment: () => [] }, }); exports.init?.(); return () => exports.teardown?.(); } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Wasm Component Model Isolation Standard for Untrusted Microfrontends

Wasm Component Model Isolation Standard for Untrusted Microfrontends defines an industrial-grade behavioral standard for frontend engineering. Enforces strict capability-based isolation for federated third-party microfrontends using the WebAssembly Component Model and WASI interfaces. Prohibits direct host DOM references, credential access, and ambient network calls, mandating typed WIT contract boundaries, virtualized memory quotas, and declarative host-side canvas or vDOM marshaling. 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: Executing Third-Party Microfrontends via Unsandboxed Eval or Unrestricted Iframe/DOM Injection 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	Executing Third-Party Microfrontends via Unsandboxed Eval or Unrestricted Iframe/DOM Injection	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 instantiate microfrontend components inside isolated WebAssembly instances with explicit linear memory ceilings via `WebAssembly.Memory({ initial, maximum })`.

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.