# SharedArrayBuffer `SharedArrayBuffer` (SAB) is a web API that is available in all major browsers that enables shared memory in JavaScript. Shared memory increases performance, speed, and efficiency in your program which allows developers to build more advanced feature sets. _**Zoom uses `SharedArrayBuffer` to power advanced features and increase performance when implementing existing features using WebAssemby. It's not required for the SDK to function and it's not required when using WebRTC.**_ ## How to enable SharedArrayBuffer You can enable `SharedArrayBuffer` on your webpage using Cross-Origin Isolation, Credentialless Headers, Serviceworkers, Chrome's Origin Trials, or Document-Isolation-Policy (Chrome or Edge only). Here's a quick comparison. | Policy | [Cross-Origin Isolation](https://web.dev/articles/cross-origin-isolation-guide) | [Credentialless Headers](https://developer.chrome.com/blog/coep-credentialless-origin-trial) | [Serviceworkers](https://github.com/gzuidhof/coi-serviceworker) | [Chrome's Origin Trials\*](https://developer.chrome.com/blog/enabling-shared-array-buffer) | [Document-Isolation-Policy\*\*](https://developer.chrome.com/blog/document-isolation-policy) | | ------------------------------ | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- | | Solution type | Permanent | Permanent | Permanent | Temporary | Permanent | | Requires custom server headers | Yes | Yes | No | No | Yes | _**\*Chrome's Origin Trials work for Chromium based browsers like Chrome and Edge. However, you must renew the [Chrome Origin Trial](https://developer.chrome.com/blog/enabling-shared-array-buffer) every three (3) months. They'll eventually be deprecated. See the link for details.**_ _**\*\*Choose the Document-Isolation-Policy option for Chromium based desktop browsers (Chrome/Edge v137+) if your site needs to embed third-party content like iFrames, videos, or payment gateways.**_ ## Implementation guidelines Click a tab for implementation details. To implement, add these headers to your server: - `Cross-Origin-Embedder-Policy: require-corp` - `Cross-Origin-Opener-Policy: same-origin` See [A guide to enable cross-origin isolation](https://web.dev/articles/cross-origin-isolation-guide) for details. _**Can't be enabled on hosting platforms that do not allow custom headers.**_ To implement, add these headers to your server: - `Cross-Origin-Embedder-Policy: credentialless` - `Cross-Origin-Opener-Policy: same-origin` See [Load cross-origin resources without CORP headers using COEP: credentialless](https://developer.chrome.com/blog/coep-credentialless-origin-trial) for details. _**Can't be enabled on hosting platforms that do not allow custom headers.**_ To implement, follow the [coi-serviceworker](https://github.com/gzuidhof/coi-serviceworker) guide. _**Can be enabled on hosting platforms that do not allow custom headers.**_ This works for Chromium based browsers like Chrome and Edge. To implement, register for the [SharedArrayBuffers in non-isolated pages on Desktop platforms origin trial](https://developer.chrome.com/origintrials/#/trials/active) and add a meta tag with your token to your webpage: `` _**This is a temporary solution as you must renew the [Chrome Origin Trial](https://developer.chrome.com/blog/enabling-shared-array-buffer) every three (3) months and it will eventually be deprecated. Can be enabled on hosting platforms that do not allow custom headers.**_ To implement add these headers to your server: - `Document-Isolation-Policy: isolate-and-require-corp` or - `Document-Isolation-Policy: isolate-and-credentialless` Works for Chromium based desktop browsers like Chrome and Edge starting in version 137. Allows for embedding third-party content like iFrames, videos, or payments. See [Document Isolation Policy: Enable powerful web features with ease](https://developer.chrome.com/blog/document-isolation-policy) for details. _**Can't be enabled on hosting platforms that do not allow custom headers.**_ ## Enable SharedArrayBuffer on managed cloud platforms `SharedArrayBuffer` is implemented on the server level so the server sends the headers to the browser. Because of this, implementation may vary based on cloud providers or server environments. As such, please refer to the official documentation on how to modify server headers for some of the most popular cloud platforms in the following tabs. Amazon Web Services allows for response header customization through their console, CloudFormation, CLI, and API. See [Amazon's official documentation](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/creating-response-headers-policies.html) to learn more. Google Cloud Platform's App Engine allows for response header customization by modifying the [`app.yaml` file](https://cloud.google.com/appengine/docs/standard/reference/app-yaml). See [Google's official documentation](https://cloud.google.com/appengine/docs/standard/reference/app-yaml?tab=node.js#handlers_element) to learn more. DigitalOcean's App Platform allows for response header customization through their [online console](https://cloud.digitalocean.com/apps). See [DigitalOcean's official documentation](https://docs.digitalocean.com/products/app-platform/how-to/configure-cors-policies/) to learn more. GitHub Pages currently does not allow for response header customization. As a workaround, however, you can use a service worker to modify headers on a client level. Zoom currently recommends the [coi-serviceworker](https://github.com/gzuidhof/coi-serviceworker) GitHub project. Netlify allows for response header customization through a `headers` file, published alongside your project. This file can contain headers that, when present, will adjust the response headers that Netlify sends when a client makes a request. See [Netlify's official documentation](https://docs.netlify.com/routing/headers/) to learn more. Vercel allows for response header customization through the `next.config.js` if you're deploying a Next.js project, or a vercel.json file if you're deploying a non-Next.js project. Additionally, they allow for response header customization for single Node.js serverless functions. See [Vercel's official documentation](https://vercel.com/guides/how-to-enable-cors) to learn more. Depending on the Microsoft Azure service, you can perform response header customization using in-app response headers or through your service configuration. For applications deployed with the Azure App Service, you can [forward custom response headers](https://learn.microsoft.com/en-us/answers/questions/1193517/how-to-add-http-headers-in-response-headers-in-azu) from the server. In this way, you can send `SharedArrayBuffer` headers from your application, for example, in [ExpressJS](https://expressjs.com/en/4x/api.html#res.set), and forward them to the client. To send response headers with Application Gateway or FrontDoor, you can rewrite response headers through your service configuration. See the following Microsoft documentation to learn more: [Rewrite HTTP headers and URL with Application Gateway](https://learn.microsoft.com/en-us/azure/application-gateway/rewrite-http-headers-url) and [Using Azure Front Door Standard/Premium with Cross-Origin Resource Sharing (CORS)](https://learn.microsoft.com/en-us/azure/frontdoor/standard-premium/troubleshoot-cross-origin-resources). ## Enable SharedArrayBuffer on the server Aside from enabling `SharedArrayBuffer` using any of the above methods for cloud hosting platforms, if you're self-hosting or using a non-cloud web host that deploys Apache HTTP Server or nginx, then you may need to enable `SharedArrayBuffer` by modifying your web server's configuration file to respond to client requests with two headers: - [`Cross-Origin-Embedder-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy) (COEP) - [`Cross-Origin-Opener-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) (COOP) For Apache HTTP Server the recommended method for managing headers is to modify the `.htaccess` file. To learn more about Apache HTTP Server's directives and how to set them, check out [Mozilla's documentation page](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#cross-origin_resources) on the topic. For nginx the recommended method for managing headers is to modify the `nginx.conf` file for global server configuration, or your virtual host's configuration file, if configured. We recommend using [CORS on Nginx](https://enable-cors.org/server_nginx.html) as a starting point. ## Verify that SharedArrayBuffer is enabled To verify that the changes were applied to your site, run the following JavaScript on your webpage: ```javascript typeof SharedArrayBuffer === "function"; // returns true or false ``` or ```javascript crossOriginIsolated; // returns true or false ``` ## Additional resources For more details on cross-origin isolation and `SharedArrayBuffer`, see the following links. - [Why you need "cross-origin isolated" for powerful features](https://web.dev/articles/why-coop-coep) - [Making your website "cross-origin isolated" using COOP and COEP](https://web.dev/articles/coop-coep) - [A guide to enable cross-origin isolation](https://web.dev/articles/cross-origin-isolation-guide) - [Load cross-origin resources without CORP headers using COEP: credentialless](https://developer.chrome.com/blog/coep-credentialless-origin-trial) - [SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92](https://developer.chrome.com/blog/enabling-shared-array-buffer) - [COOP same-origin-allow-popups + COEP = crossOriginIsolated](https://github.com/camillelamy/explainers/blob/main/coi-with-popups.md) - [Anonymous iframes](https://github.com/camillelamy/explainers/blob/main/anonymous_iframes.md) - [Iframe credentialless spec](https://wicg.github.io/anonymous-iframe/) - [Iframe credentialless demo](https://iframe-credentialless.glitch.me/) - [Document-Isolation-Policy explainer](https://github.com/WICG/document-isolation-policy) ### From the developer blog See the following blog post and [YouTube video](https://youtu.be/s93banzrhtY) for more details. - [SharedArrayBuffer overview and implementation](/blog/sharedarraybuffer-overview-and-implementation) by Ajitha Yasmin - 08-24-2023