SharedArrayBuffer: Browser Support, Isolation, Use Cases

What is SharedArrayBuffer?

SharedArrayBuffer is a JavaScript built-in defined by the ECMAScript Language Specification at TC39. It exposes a fixed-length chunk of raw memory that web workers and the main thread can read and write at the same time, paired with the Atomics API for race-free updates. Unlike ArrayBuffer, it is not transferable, so every agent that receives it keeps access to the same bytes.

Which browsers does SharedArrayBuffer support?

Every modern desktop and mobile browser supports SharedArrayBuffer on a cross-origin isolated page, while Internet Explorer and the legacy Android Browser never added support. Global browser reach sits around 96% of users on a cross-origin isolated context.

What are the cross-origin isolation requirements for SharedArrayBuffer?

Modern browsers expose the SharedArrayBuffer constructor only to documents that are in a secure context and cross-origin isolated. The top-level document opts into isolation with two HTTP response headers, and every cross-origin sub-resource has to opt in or be served from the same origin.

• Secure context: The page must load over HTTPS, or from localhost during development. SharedArrayBuffer is gated by the Secure Context check that also gates Service Workers and the Push API.
• Cross-Origin-Opener-Policy: same-origin: The COOP header isolates the top-level browsing context from cross-origin pop-ups and openers, so the document gets its own browsing context group.
• Cross-Origin-Embedder-Policy: require-corp or credentialless: The COEP header forces every cross-origin sub-resource to opt in with a Cross-Origin-Resource-Policy header, or, with credentialless mode, to load without cookies and credentials.
• Cross-Origin-Resource-Policy on sub-resources: Cross-origin images, fonts, scripts, and iframes must send Cross-Origin-Resource-Policy: cross-origin or use a CORS response. Sub-resources that do not opt in are blocked.
• window.crossOriginIsolated check: The boolean window.crossOriginIsolated flips to true once the headers are correct. The SharedArrayBuffer constructor is reachable only while this flag is true.
• Permissions-Policy: cross-origin-isolated: Cross-origin iframes inherit isolation only when the embedding document grants the cross-origin-isolated permission. The default allowlist of self covers same-origin frames.

How do you enable SharedArrayBuffer in your application?

Enabling SharedArrayBuffer is a server-side configuration job, not a JavaScript flag. Add the cross-origin isolation headers to your origin, fix every cross-origin sub-resource that breaks, and the constructor turns on for the page.

• Serve the page over HTTPS: Move the origin to TLS, or use http://localhost during development. Mixed-content pages can never reach the cross-origin isolated state.
• Set the COOP header: Add Cross-Origin-Opener-Policy: same-origin to the top-level HTML response. This locks the document into its own browsing context group and blocks cross-origin window.opener access.
• Set the COEP header: Add Cross-Origin-Embedder-Policy: require-corp, or Cross-Origin-Embedder-Policy: credentialless if you embed third-party content that cannot send CORP. Both modes opt the document into isolation.
• Update sub-resources: For every cross-origin image, script, font, and iframe, either send Cross-Origin-Resource-Policy: cross-origin from the upstream server or load it through CORS. Drop sub-resources that cannot meet either rule.
• Verify with crossOriginIsolated: Open DevTools and run the snippet below. If window.crossOriginIsolated is true and the constructor builds a buffer, the page is correctly configured.
• Construct and post the buffer: Call new SharedArrayBuffer(byteLength) on the main thread, wrap it in a typed array, and pass it to a Worker through postMessage. Both sides now read and write the same bytes.

// Paste this snippet into the DevTools console of any modern browser.
// It confirms the page is cross-origin isolated and that the constructor is reachable.
if (typeof SharedArrayBuffer !== "undefined" && window.crossOriginIsolated) {
  const buffer = new SharedArrayBuffer(1024);
  const view = new Int32Array(buffer);

  Atomics.store(view, 0, 42);
  console.log("crossOriginIsolated:", window.crossOriginIsolated);
  console.log("Buffer byteLength:", buffer.byteLength);
  console.log("Atomics read:", Atomics.load(view, 0));
} else if (typeof SharedArrayBuffer === "undefined") {
  console.warn("SharedArrayBuffer is not defined. Check COOP and COEP headers.");
} else {
  console.warn("SharedArrayBuffer is defined but the page is not cross-origin isolated.");
}

If the snippet logs that the page is not cross-origin isolated, open the Network panel and inspect the response headers on the document request. A missing COOP or COEP header is the most common reason the constructor stays hidden.

What are the use cases of SharedArrayBuffer?

SharedArrayBuffer matters whenever a web app needs real parallelism with low overhead. The constructor sits behind every shipping use of WebAssembly threads, and it powers the heavy compute paths of well-known apps.

• WebAssembly threads: The wasm threads proposal stores the linear memory in a SharedArrayBuffer, which lets every wasm thread read and write the same heap. Photoshop Web, AutoCAD Web, and Google Earth all rely on this path.
• FFmpeg in the browser: ffmpeg.wasm uses a SharedArrayBuffer to run encoders and decoders across worker threads. Without cross-origin isolation, it falls back to a single-threaded build that is roughly four times slower.
• Game engines: Unity WebGL and Unreal Engine builds spawn worker threads for physics, animation, and asset streaming. The shared heap holds geometry, textures, and entity state without cross-thread copies.
• Audio and video pipelines: Apps like Figma, Discord, and Zoom move PCM audio frames and video buffers between an AudioWorklet and worker threads, so a single decode never blocks the main thread.
• Atomics for shared data structures: The Atomics API guards reads and writes against tearing. Worker pools use Atomics.wait and Atomics.notify on a SharedArrayBuffer to schedule jobs without postMessage round-trips.
• Cryptography and hashing: WebCrypto plus a wasm SIMD build can run hashes, AES, and post-quantum candidates across worker threads, with the input buffer shared instead of cloned.

What are the known issues with SharedArrayBuffer?

SharedArrayBuffer ships in every modern browser, but the cross-origin isolation requirement creates a long list of practical sharp edges. Most teams hit the same set of failures on first integration.

• Third-party widgets break: Any cross-origin script or iframe that does not send Cross-Origin-Resource-Policy fails to load on a require-corp page. Stripe, Google Ads, and embedded YouTube all need allow-list work or a credentialless COEP.
• Service workers and caching layers: A Service Worker that strips response headers will silently drop COOP and COEP, so window.crossOriginIsolated flips to false on cache hits. Pass the headers through verbatim or set them in the worker.
• Static hosts that do not allow custom headers: GitHub Pages, classic Netlify rewrites, and S3-only origins cannot set COOP or COEP. Move to a host that supports response headers or front the origin with a CDN that injects them.
• Reverse proxies that drop headers: Some CDNs strip COOP or COEP unless the origin explicitly opts them into the response header allowlist. Add both header names to the CDN configuration before debugging the page.
• Chrome for iOS does not isolate: Every iOS browser uses WebKit underneath, so Chrome on iPhone and iPad behaves like Safari. The headers must satisfy WebKit, not Chromium, on iOS.
• postMessage without crossOriginIsolated: A page can construct SharedArrayBuffer when isolated but trying to postMessage it to a non-isolated worker still throws a DataCloneError. Both sides have to be isolated.
• Spectre still constrains timer precision: Performance.now resolution rises only on cross-origin isolated pages. A non-isolated page sees coarser timestamps, which makes shared-memory timing tests misleading on staging environments.
• Atomics.wait blocks the main thread: The constructor allows Atomics.wait on a SharedArrayBuffer view, but calling it on the main thread freezes the page. Always run blocking waits inside a Worker.

In my experience, the silent failure that wastes the most time is a Service Worker that fetches the document from cache and forgets to forward the COOP and COEP headers. The constructor stays hidden, the console gives a vague reference error, and the team blames Spectre instead of the cache. Log window.crossOriginIsolated on the very first line of the page and the bug surfaces immediately.

Citations

All SharedArrayBuffer version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - SharedArrayBuffer: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
• MDN Web Docs - Window.crossOriginIsolated: developer.mozilla.org/en-US/docs/Web/API/Window/crossOriginIsolated
• MDN Web Docs - Cross-Origin-Opener-Policy: developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cross-Origin-Opener-Policy
• MDN Web Docs - Cross-Origin-Embedder-Policy: developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cross-Origin-Embedder-Policy
• MDN Web Docs - Atomics: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics
• ECMAScript Language Specification - SharedArrayBuffer Objects: tc39.es/ecma262/#sec-sharedarraybuffer-objects
• WHATWG HTML Standard - Cross-origin isolation: html.spec.whatwg.org/multipage/document-sequences.html#cross-origin-isolated
• Chrome for Developers - SharedArrayBuffer updates in Chrome 88 and 92: developer.chrome.com/blog/enabling-shared-array-buffer
• WebKit - New WebKit Features in Safari 15.2: webkit.org/blog/12140/new-webkit-features-in-safari-15-2
• Mozilla Hacks - Safely reviving shared memory: hacks.mozilla.org/2020/07/safely-reviving-shared-memory
• Firefox 79 release notes: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/79
• web.dev - A guide to enable cross-origin isolation: web.dev/articles/cross-origin-isolation-guide
• web.dev - Making your website cross-origin isolated: web.dev/articles/coop-coep