{"id":22622,"library":"vite-plugin-cross-origin-isolation","title":"vite-plugin-cross-origin-isolation","description":"A Vite plugin (v0.1.6, actively maintained) that enables cross-origin isolation for the Vite dev server by setting the required COOP and COEP headers. This is necessary for using SharedArrayBuffer and other APIs that require a cross-origin isolated context, such as performance.measureMemory(). The plugin is lightweight and easy to use, simply adding it to the Vite plugins array. It is specifically designed for development environments; for production, server-level configuration is still needed. It is the go-to solution for Vite projects needing SharedArrayBuffer support during development.","status":"active","version":"0.1.6","language":"javascript","source_language":"en","source_url":"https://github.com/chaosprint/vite-plugin-cross-origin-isolation","tags":["javascript","Vite","SharedArrayBuffer","CrossOriginIsolation","COOP","COEP","CrossOriginIsolated"],"install":[{"cmd":"npm install vite-plugin-cross-origin-isolation","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-cross-origin-isolation","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-cross-origin-isolation","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The plugin exports a default function, not a named export.","wrong":"import { crossOriginIsolation } from 'vite-plugin-cross-origin-isolation'","symbol":"default","correct":"import crossOriginIsolation from 'vite-plugin-cross-origin-isolation'"},{"note":"For CJS projects, use require; the plugin works with both ESM and CJS.","symbol":"crossOriginIsolation","correct":"const crossOriginIsolation = require('vite-plugin-cross-origin-isolation')"},{"note":"The plugin must be invoked as a function (crossOriginIsolation()) when added to the plugins array.","wrong":"plugins: [crossOriginIsolation]","symbol":"vite.config.ts usage","correct":"import crossOriginIsolation from 'vite-plugin-cross-origin-isolation'\nexport default defineConfig({ plugins: [crossOriginIsolation()] })"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport crossOriginIsolation from 'vite-plugin-cross-origin-isolation';\n\nexport default defineConfig({\n  plugins: [\n    crossOriginIsolation()\n  ]\n});\n\n// In your app (only works in cross-origin isolated context):\nif (crossOriginIsolated) {\n  const sab = new SharedArrayBuffer(1024);\n  console.log('SharedArrayBuffer supported');\n} else {\n  console.error('Cross-Origin Isolation not active');\n}","lang":"typescript","description":"Setup vite-plugin-cross-origin-isolation in Vite config to enable SharedArrayBuffer during development."},"warnings":[{"fix":"Configure your production server to send 'Cross-Origin-Opener-Policy: same-origin' and 'Cross-Origin-Embedder-Policy: require-corp'.","message":"The plugin only sets headers for the dev server; production builds require server-level configuration (e.g., nginx) to send COOP/COEP headers.","severity":"gotcha","affected_versions":"all"},{"fix":"Ensure all external resources include 'Cross-Origin-Resource-Policy: cross-origin' or proper CORS headers.","message":"Cross-origin isolation may break cross-origin resource loading (e.g., images, scripts from CDNs) unless they send appropriate CORS headers.","severity":"gotcha","affected_versions":"all"},{"fix":"For production cross-origin isolation, set headers at your reverse proxy or CDN.","message":"The plugin does not work in production. It is only for Vite's dev server.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add the plugin to your Vite config: import crossOriginIsolation from 'vite-plugin-cross-origin-isolation' and include crossOriginIsolation() in plugins.","cause":"Cross-origin isolation headers missing in the response.","error":"SharedArrayBuffer is not defined"},{"fix":"Update the external resource server to include 'Cross-Origin-Resource-Policy: cross-origin' header or proxy the resource through your own domain.","cause":"A cross-origin resource is blocked due to Cross-Origin-Embedder-Policy: require-corp.","error":"Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}