Vite 6 Module Federation Dynamic Remote SRI & CSP Nonce Guardrail

--- description: Vite 6 Module Federation Dynamic Remote SRI & CSP Nonce Guardrail - Dynamic micro-frontend remote container resolution under the Vite 6 runtime environment must enforce automated Subresource Integrity (SRI) hashing and Content Security Policy (CSP) nonce synchronization. Omitting cryptographic hash validation on dynamically loaded remote entry bundles exposes host applications to supply-chain tampering and remote-code execution via compromised CDN edges. globs: vite.config.ts, src/**/*.{ts,tsx}, src/plugins/**/*.{ts,js} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/vite-6-module-federation-sri-csp-guardrail" --- # Vite 6 Module Federation Dynamic Remote SRI & CSP Nonce Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Arbitrary Dynamic Remote Script Injection Without SRI Verification or CSP Nonce Binding ## System Constraints You are a Principal Software Architect enforcing enterprise application security in Vite 6 Module Federation architectures. You must ensure all dynamic remote container fetches strictly bind cryptographic Subresource Integrity (SRI) hashes and synchronize runtime CSP nonces to neutralize supply-chain payload injection. ## Strict Guidelines - Engineers MUST ALWAYS enforce cryptographic integrity hashes (SHA-384 or SHA-512) and `crossorigin='anonymous'` when resolving remote entry manifests or injecting dynamic federated scripts. - Engineers MUST NOT dynamically append `<script>` tags for remote containers without binding the current document CSP nonce extracted from runtime meta tags or HTTP headers. - Runtime container resolution MUST validate remote manifests against trusted cryptographic registries or signed manifests before orchestrating module loading. - Module federation runtime plugins MUST utilize `createScriptHook` or equivalent runtime hooks to intercept DOM injection and attach `integrity` and `nonce` attributes deterministically. - Components NEVER load external untrusted remotes directly using un-sandboxed dynamic `import(/* @vite-ignore */ url)` statements without SRI-aware loader wrappers. ## Bad vs Good Implementations ### Dynamic Remote Loading in Vite 6 Module Federation #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Directly passing raw remote URLs into the Module Federation runtime without configuring script injection hooks omits SRI validation (`integrity` attribute) and ignores CSP nonces. If the remote host or CDN edge is compromised, malicious code executes unconstrained within the host origin. ```typescript import { init, loadRemote } from '@module-federation/runtime'; // CRITICAL ANTI-PATTERN: Dynamic remote resolution without SRI integrity validation or CSP nonce propagation export async function loadDynamicMicroFrontend(remoteUrl: string, scope: string, module: string) { init({ name: 'host-app', remotes: [ { name: scope, entry: remoteUrl // Vulnerable: script tag injected without integrity or nonce validation } ] }); return await loadRemote(`${scope}/${module}`); } ``` #### Production Standard (Correct) > **Standard**: The secure implementation verifies the target URL against an authenticated manifest registry, registers a runtime script hook to attach explicit SHA-384/512 SRI integrity hashes, sets `crossOrigin='anonymous'`, and injects the active CSP nonce before the browser downloads or executes the external script. ```typescript import { init, loadRemote, type FederationRuntimePlugin } from '@module-federation/runtime'; interface RemoteManifest { entry: string; integrity: string; } function getDocumentCspNonce(): string | undefined { const meta = document.querySelector<HTMLMetaElement>('meta[name="csp-nonce"]'); return meta?.content || (window as unknown as { __CSP_NONCE__?: string }).__CSP_NONCE__; } export function createSecureDynamicFederationPlugin(remoteRegistry: Record<string, RemoteManifest>): FederationRuntimePlugin { return () => ({ name: 'sri-csp-federation-guardrail', createScriptHook({ url }) { const matchedRemote = Object.values(remoteRegistry).find((manifest) => manifest.entry === url); if (!matchedRemote) { throw new SecurityError(`Untrusted or unhashed remote manifest rejected: ${url}`); } const script = document.createElement('script'); script.src = url; script.type = 'text/javascript'; script.crossOrigin = 'anonymous'; script.integrity = matchedRemote.integrity; const nonce = getDocumentCspNonce(); if (nonce) { script.nonce = nonce; } return script; } }); } export async function loadDynamicMicroFrontend( scope: string, module: string, manifestRegistry: Record<string, RemoteManifest> ) { const manifest = manifestRegistry[scope]; if (!manifest) { throw new Error(`Registry verification failed for scope: ${scope}`); } init({ name: 'host-app', remotes: [ { name: scope, entry: manifest.entry } ], plugins: [createSecureDynamicFederationPlugin(manifestRegistry)] }); return await loadRemote(`${scope}/${module}`); } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Vite 6 Module Federation Dynamic Remote SRI & CSP Nonce Guardrail

Vite 6 Module Federation Dynamic Remote SRI & CSP Nonce Guardrail defines an industrial-grade behavioral standard for frontend engineering. Dynamic micro-frontend remote container resolution under the Vite 6 runtime environment must enforce automated Subresource Integrity (SRI) hashing and Content Security Policy (CSP) nonce synchronization. Omitting cryptographic hash validation on dynamically loaded remote entry bundles exposes host applications to supply-chain tampering and remote-code execution via compromised CDN edges. 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: Arbitrary Dynamic Remote Script Injection Without SRI Verification or CSP Nonce Binding 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	Arbitrary Dynamic Remote Script Injection Without SRI Verification or CSP Nonce Binding	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 enforce cryptographic integrity hashes (SHA-384 or SHA-512) and `crossorigin='anonymous'` when resolving remote entry manifests or injecting dynamic federated scripts.

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.