Vite 6 Dynamic ESM Micro-Frontend Subresource Integrity (SRI) Standard

--- description: Vite 6 Dynamic ESM Micro-Frontend Subresource Integrity (SRI) Standard - Mandates cryptographic origin verification and tamper-proofing for federated chunks resolved at runtime across decoupled CDN deployments. Enforces deterministic manifest-driven SRI verification via link-modulepreload pre-injection or cryptographically validated dynamic import wrappers in Vite 6 host applications. globs: src/**/*.{ts,tsx,js,jsx}, vite.config.{ts,js,mjs} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/vite6-dynamic-esm-microfrontend-sri-standard" --- # Vite 6 Dynamic ESM Micro-Frontend Subresource Integrity (SRI) Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Blind Dynamic ESM Remote Execution Without Cryptographic Subresource Integrity Validation ## System Constraints You are a Principal Security and Frontend Architect enforcing the Vite 6 Dynamic ESM Micro-Frontend Subresource Integrity (SRI) Standard. Dynamic ECMAScript module imports across decoupled CDN boundaries bypass native HTML script tag SRI checks by default. You must mandate deterministic integrity verification using signed chunk manifests, programmatic modulepreload injection with SHA-384/SHA-512 hashes, and strict CORS handling before any federated module is executed by the browser engine. ## Strict Guidelines - Engineers MUST ALWAYS enforce cryptographic integrity hashes (SHA-384 or SHA-512) for all dynamic remote ESM chunks resolved across decoupled CDN origins. - Engineers MUST NOT execute bare dynamic imports (e.g., import(/* @vite-ignore */ url)) for remote federated modules without prior modulepreload SRI injection or cryptographic validation. - Code MUST verify the integrity and cryptographic signature of the remote chunk manifest before consuming chunk URLs and hash digests at runtime. - Services MUST serve all dynamic micro-frontend ESM chunks with strict CORS headers (Access-Control-Allow-Origin: * or trusted domain) and Cross-Origin-Resource-Policy: cross-origin to permit browser SRI evaluation. - Components NEVER import remote micro-frontends directly inside rendering lifecycles without routing through a centralized, integrity-enforcing module loader factory. ## Bad vs Good Implementations ### Unvalidated Federated ESM Dynamic Import #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Directly passing a remote CDN URL into dynamic import() executes the target JavaScript without verifying its cryptographic digest. If the remote CDN is breached or corrupted via cache poisoning, malicious code runs directly in the host application origin. ```typescript export async function loadRemoteMicroFrontend(cdnUrl: string): Promise<any> { // VULNERABLE: Direct runtime execution of remote untrusted ESM // Lacks Subresource Integrity (SRI); susceptible to CDN cache poisoning & supply chain attacks const remoteModule = await import(/* @vite-ignore */ cdnUrl); return remoteModule.default; } ``` #### Production Standard (Correct) > **Standard**: Pre-injects a <link rel="modulepreload"> element equipped with the cryptographic integrity hash (SHA-384/512) and anonymous CORS credentials. The browser validates the fetched module against the hash before caching. Subsequent dynamic import() execution safely pulls the pre-verified chunk from browser module cache, neutralizing tampering. ```typescript interface RemoteManifestEntry { url: string; integrity: `sha384-${string}` | `sha512-${string}`; } class MicroFrontendIntegrityError extends Error { constructor(message: string) { super(message); this.name = 'MicroFrontendIntegrityError'; } } export async function loadSecureRemoteModule<T>( entry: RemoteManifestEntry ): Promise<T> { const { url, integrity } = entry; if (!integrity.startsWith('sha384-') && !integrity.startsWith('sha512-')) { throw new MicroFrontendIntegrityError(`Rejected non-compliant hash algorithm for remote entry: ${url}`); } let preloadLink = document.querySelector<HTMLLinkElement>(`link[rel="modulepreload"][href="${url}"]`); if (!preloadLink) { preloadLink = document.createElement('link'); preloadLink.rel = 'modulepreload'; preloadLink.href = url; preloadLink.integrity = integrity; preloadLink.crossOrigin = 'anonymous'; const loadPromise = new Promise<void>((resolve, reject) => { preloadLink!.onload = () => resolve(); preloadLink!.onerror = () => reject(new MicroFrontendIntegrityError(`SRI verification failed or resource failed to load: ${url}`)); }); document.head.appendChild(preloadLink); await loadPromise; } // Browser dynamic import honors the validated modulepreload cache entry const module = (await import(/* @vite-ignore */ url)) as { default: T } | T; return (module && typeof module === 'object' && 'default' in module) ? module.default : (module as T); } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Vite 6 Dynamic ESM Micro-Frontend Subresource Integrity (SRI) Standard

Vite 6 Dynamic ESM Micro-Frontend Subresource Integrity (SRI) Standard defines an industrial-grade behavioral standard for frontend engineering. Mandates cryptographic origin verification and tamper-proofing for federated chunks resolved at runtime across decoupled CDN deployments. Enforces deterministic manifest-driven SRI verification via link-modulepreload pre-injection or cryptographically validated dynamic import wrappers in Vite 6 host applications. 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: Blind Dynamic ESM Remote Execution Without Cryptographic Subresource Integrity Validation 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	Blind Dynamic ESM Remote Execution Without Cryptographic Subresource Integrity Validation	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) for all dynamic remote ESM chunks resolved across decoupled CDN origins.

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.