Vite 6 SharedArrayBuffer Cross-Origin Isolation and Memory Ownership Standard

--- description: Vite 6 SharedArrayBuffer Cross-Origin Isolation and Memory Ownership Standard - Enforces strict Cross-Origin Isolation via COOP and COEP credentialless headers across Vite 6 development and production preview environments. Mandates explicit memory management patterns including zero-copy Transferable streams, Atomics-based synchronization for SharedArrayBuffer, and deterministic ownership transfer between the main thread and Web Workers to eliminate race conditions and memory leaks. globs: vite.config.{ts,js,mjs}, src/**/*.{ts,tsx,worker.ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/vite-6-sharedarraybuffer-coop-coep-memory-ownership" --- # Vite 6 SharedArrayBuffer Cross-Origin Isolation and Memory Ownership Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unsynchronized SharedArrayBuffer Mutations and Structured Clone Overhead Without Isolation Headers ## System Constraints You are a Principal Engineer enforcing the Vite 6 SharedArrayBuffer Cross-Origin Isolation and Memory Ownership Standard. Mandate explicit Cross-Origin Opener Policy (COOP) and Cross-Origin Embedder Policy (COEP) configuration in Vite 6 server and preview configurations. Strictly prevent unisolated execution environments, structural cloning of raw ArrayBuffers, and unsynchronized data races across Web Worker boundaries. Require Atomics primitives on SharedArrayBuffer instances and zero-copy Transferable ownership transfers for standard ArrayBuffers. ## Strict Guidelines - Engineers MUST ALWAYS configure `Cross-Origin-Opener-Policy: same-origin` and `Cross-Origin-Embedder-Policy: credentialless` in Vite 6 `server.headers` and `preview.headers` to satisfy SharedArrayBuffer browser security constraints. - Engineers MUST NOT access or mutate `SharedArrayBuffer` memory across concurrent execution threads without utilizing JavaScript `Atomics` APIs (`Atomics.load`, `Atomics.store`, `Atomics.wait`, `Atomics.notify`, `Atomics.compareExchange`). - Code MUST pass ArrayBuffer instances within the second transfer list argument of `Worker.postMessage(message, [buffer])` when non-shared ownership is moved to eliminate structural cloning latency. - Services MUST verify `crossOriginIsolated` and `typeof SharedArrayBuffer !== 'undefined'` at runtime before initializing multithreaded compute pipelines, with graceful degradation to non-threaded workers. - Components NEVER execute long-running blocking operations (`Atomics.wait`) directly on the UI main thread; blocking synchronizations are restricted exclusively to dedicated `Worker` contexts. ## Bad vs Good Implementations ### Vite 6 Dev & Preview Server Isolation Headers #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Fails to configure COOP/COEP headers. SharedArrayBuffer will throw ReferenceError or fail security isolation checks in all modern browsers. ```typescript import { defineConfig } from 'vite'; export default defineConfig({ server: { port: 3000 } }); ``` #### Production Standard (Correct) > **Standard**: Declares explicit COOP and COEP credentialless headers for both dev and preview servers, establishing crossOriginIsolated contexts securely without breaking 3rd-party assets. ```typescript import { defineConfig } from 'vite'; export default defineConfig({ server: { port: 3000, headers: { 'Cross-Origin-Opener-Policy': 'same-origin', 'Cross-Origin-Embedder-Policy': 'credentialless' } }, preview: { port: 3000, headers: { 'Cross-Origin-Opener-Policy': 'same-origin', 'Cross-Origin-Embedder-Policy': 'credentialless' } } }); ``` ### Thread-Safe SharedArrayBuffer Synchronization vs Main Thread Race Conditions #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Directly reads and writes to SharedArrayBuffer indexes without memory barriers or synchronization primitives, creating undefined race conditions across threads. ```typescript export function processWorkerData(worker: Worker, buffer: SharedArrayBuffer): void { const view = new Int32Array(buffer); worker.postMessage({ buffer }); // Unsynchronized read/write causing high-concurrency race condition view[0] = 42; if (view[1] === 1) { console.log('Worker finished'); } } ``` #### Production Standard (Correct) > **Standard**: Validates isolation state, applies `Atomics.store` and `Atomics.load` for thread-safe memory reads/writes, and avoids `Atomics.wait` on the main event loop. ```typescript export function processWorkerData(worker: Worker, buffer: SharedArrayBuffer): void { if (!crossOriginIsolated) { throw new Error('Environment is not crossOriginIsolated; SharedArrayBuffer disabled.'); } const view = new Int32Array(buffer); worker.postMessage({ buffer }); // Atomically set state flag with memory barrier semantics Atomics.store(view, 0, 42); // Worker notifies main thread via explicit postMessage instead of blocking Atomics.wait on UI thread worker.onmessage = (event: MessageEvent<{ status: string }>) => { if (event.data.status === 'DONE') { const result = Atomics.load(view, 1); console.log('Synchronized result:', result); } }; } ``` ### Zero-Copy ArrayBuffer Transfer vs Expensive Structured Cloning #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Omits the transfer list in postMessage. The browser performs a deep memory copy of the underlying buffer, degrading performance on high-throughput streaming. ```typescript export function dispatchPipeline(worker: Worker, data: Float32Array): void { // Bad: Implicit structured clone copies memory, doubling memory usage and blocking main thread worker.postMessage({ type: 'PROCESS', buffer: data.buffer }); } ``` #### Production Standard (Correct) > **Standard**: Explicitly passes `[buffer]` as the transfer list. Memory ownership is moved instantaneously with zero copy overhead, completely detaching the buffer from the sender. ```typescript export function dispatchPipeline(worker: Worker, data: Float32Array): void { const buffer = data.buffer; // Zero-copy transfer: detaches buffer from main thread and moves ownership instantaneously worker.postMessage( { type: 'PROCESS', buffer }, [buffer] ); // buffer.byteLength is now 0 on the main thread (detached) } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Vite 6 SharedArrayBuffer Cross-Origin Isolation and Memory Ownership Standard

Vite 6 SharedArrayBuffer Cross-Origin Isolation and Memory Ownership Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces strict Cross-Origin Isolation via COOP and COEP credentialless headers across Vite 6 development and production preview environments. Mandates explicit memory management patterns including zero-copy Transferable streams, Atomics-based synchronization for SharedArrayBuffer, and deterministic ownership transfer between the main thread and Web Workers to eliminate race conditions and memory leaks. 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: Unsynchronized SharedArrayBuffer Mutations and Structured Clone Overhead Without Isolation Headers 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	Unsynchronized SharedArrayBuffer Mutations and Structured Clone Overhead Without Isolation Headers	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 configure `Cross-Origin-Opener-Policy

Engineers MUST ALWAYS configure `Cross-Origin-Opener-Policy: same-origin` and `Cross-Origin-Embedder-Policy: credentialless` in Vite 6 `server.headers` and `preview.headers` to satisfy SharedArrayBuffer browser security constraints.

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.