Vite 6 Module Federation Cross-Origin Remote Sandboxing Standard

--- description: Vite 6 Module Federation Cross-Origin Remote Sandboxing Standard - Enforces boundary isolation for independently deployed cross-origin remote micro-frontends integrated via Vite 6 Module Federation. Mandates runtime CSS encapsulation via Shadow DOM and execution confinement via JavaScript Proxy boundaries or SES realms to preclude prototype pollution, global object collision, and cascade destruction. globs: vite.config.{ts,js}, src/**/*.{ts,tsx} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/vite-6-module-federation-remote-sandboxing-standard" --- # Vite 6 Module Federation Cross-Origin Remote Sandboxing Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unsandboxed Cross-Origin Remote Execution and Global CSS Injection ## System Constraints You are a Principal Software Architect enforcing the Vite 6 Module Federation Cross-Origin Remote Sandboxing Standard. Your mandate is to prevent critical micro-frontend failure modes including CSS cascade bleed, prototype pollution, and global namespace collisions. Reject any code where remote modules execute directly against the shared host global window without proxy isolation, or inject stylesheets directly into document.head without Shadow DOM encapsulation. ## Strict Guidelines - Engineers MUST ALWAYS mount cross-origin federated remote UI components inside an isolated Shadow DOM container (attachShadow({ mode: 'open' })) to prevent host and remote CSS cascade interference. - Engineers MUST NOT allow remote chunks to mutate the host global realm (window, Object.prototype, Array.prototype); cross-origin runtime context access MUST be mediated through an isolated Proxy sandbox. - Code SHOULD leverage Vite 6 Module Federation CSS extraction plugins configured with CSS Modules or scoped attribute selectors as defense-in-depth alongside Shadow DOM. - Services MUST ensure that cross-origin remote entry manifests declare strict Subresource Integrity (SRI) hashes and Content Security Policy (CSP) script-src/style-src directives when fetched dynamically. - Components NEVER attach un-scoped event listeners to document or window inside remote federated modules without dynamic teardown on unmount. ## Bad vs Good Implementations ### Remote Loading and Sandboxing in Vite 6 Micro-Frontend Host #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The remote chunk is loaded without execution or style boundaries. Any CSS injected by the remote alters host typography/layout, and any prototype or window mutations directly compromise host stability. ```typescript import React, { useEffect, useState } from 'react'; import { loadRemote } from '@module-federation/enhanced/runtime'; export const RemoteContainer = ({ remoteUrl }: { remoteUrl: string }) => { const [RemoteComponent, setRemoteComponent] = useState<React.ComponentType | null>(null); useEffect(() => { // VIOLATION: Directly loading and rendering remote component into host DOM tree. // Remote styles injected into document.head pollute host. // Remote access to window directly pollutes global execution realm. loadRemote<{ default: React.ComponentType }>('remoteApp/Widget') .then((mod) => { if (mod) setRemoteComponent(() => mod.default); }); }, [remoteUrl]); if (!RemoteComponent) return <div>Loading remote...</div>; return <RemoteComponent />; }; ``` #### Production Standard (Correct) > **Standard**: Wraps the remote chunk within an isolated ShadowRoot, confining all dynamically injected CSS rules to the Shadow boundary. Explicit lifecycle teardown prevents detached DOM nodes and unmounted component leaks. ```typescript import React, { useEffect, useRef, useState } from 'react'; import { createRoot, Root } from 'react-dom/client'; import { loadRemote } from '@module-federation/enhanced/runtime'; interface RemoteSandboxProps { scope: string; module: string; } export const SandboxedRemoteContainer: React.FC<RemoteSandboxProps> = ({ scope, module }) => { const containerRef = useRef<HTMLDivElement>(null); const shadowRootRef = useRef<ShadowRoot | null>(null); const reactRootRef = useRef<Root | null>(null); const [error, setError] = useState<Error | null>(null); useEffect(() => { if (!containerRef.current) return; if (!shadowRootRef.current) { shadowRootRef.current = containerRef.current.attachShadow({ mode: 'open' }); const mountPoint = document.createElement('div'); mountPoint.setAttribute('data-sandboxed-root', scope); shadowRootRef.current.appendChild(mountPoint); reactRootRef.current = createRoot(mountPoint); } let isMounted = true; loadRemote<{ default: React.ComponentType }>(`${scope}/${module}`) .then((remoteMod) => { if (!isMounted || !remoteMod) return; const Component = remoteMod.default; reactRootRef.current?.render( <React.StrictMode> <Component /> </React.StrictMode> ); }) .catch((err) => { if (isMounted) setError(err instanceof Error ? err : new Error(String(err))); }); return () => { isMounted = false; if (reactRootRef.current) { reactRootRef.current.unmount(); reactRootRef.current = null; } shadowRootRef.current = null; }; }, [scope, module]); if (error) return <div role="alert">Failed to load isolated remote: {error.message}</div>; return <div ref={containerRef} style={{ display: 'contents' }} />; }; ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Vite 6 Module Federation Cross-Origin Remote Sandboxing Standard

Vite 6 Module Federation Cross-Origin Remote Sandboxing Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces boundary isolation for independently deployed cross-origin remote micro-frontends integrated via Vite 6 Module Federation. Mandates runtime CSS encapsulation via Shadow DOM and execution confinement via JavaScript Proxy boundaries or SES realms to preclude prototype pollution, global object collision, and cascade destruction. 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: Unsandboxed Cross-Origin Remote Execution and Global CSS 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	Unsandboxed Cross-Origin Remote Execution and Global CSS 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 mount cross-origin federated remote UI components inside an isolated Shadow DOM container (attachShadow({ mode

Engineers MUST ALWAYS mount cross-origin federated remote UI components inside an isolated Shadow DOM container (attachShadow({ mode: 'open' })) to prevent host and remote CSS cascade interference.

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.