The goal of this article is to guide you in implementing cross origin isolation and enable shared array buffer.
What is SharedArrayBuffer(SAB)?
As the name implies - 'shared', 'array', 'buffer' - this is an object or a structure that represents a data buffer (an array of bytes) used to create views in shared memory.
JavaScript has a shared memory for sharing data between multiple threads, and we need SharedArrayBuffer to utilise this shared memory. Shared memory can be created and updated simultaneously in workers or the main thread.
Why do we need SharedArrayBuffer?
Shared memory is an advanced feature of JavaScript. By using shared memory, we can update the data from any thread without having the overhead of passing data back and forth between threads. This feature helps in efficient coding practices.
When is SharedArrayBuffer introduced and why was it reintroduced?
SharedArrayBuffer posed a security threat when it was initially launched in 2018, as there was a vulnerability attack across all browsers. Consequently, it was blocked in all browsers.
In 2022, significant advancements were made, critical patches were applied, and prerequisites were added to SharedArrayBuffer before it was relaunched. To use SharedArrayBuffer, any site must be cross-origin isolated. These updates have proven to enhance site security.
What is cross-origin isolation and how to know if your site is cross-origin isolated?
It ensures that your page is in a secure context by preventing any cross-origin popups and enforcing the Cross-Origin Resource Policy. This is done by adding the following two headers:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
To check if your site is cross-origin isolated, you can enter the command below in the browser console. If the value returns true, then your site is cross-origin isolated; otherwise, it returns false.
How to enable SharedArrayBuffer?
By default, SharedArrayBuffer is disabled in browsers until the prerequisites are met. In other words, the support for SharedArrayBuffer is not available until your site is cross-origin isolated.
To enable the SharedArrayBuffer, you need to set certain headers. However, adding these headers to all requests can be an overhead. It might not be easy for frontend developers to control the headers sent by the backend. One approach to solve this is by using service workers. A service worker can intercept all the requests and manage the headers.
The code available at the following GitHub repository intercepts all the outgoing headers and handles the headers in requests:
https://github.com/gzuidhof/coi-serviceworker
(please refer readme.txt for implementation)
You can add this service worker to your code and include the script in your index.html file as shown below:
By doing this, your site shall be cross-origin isolated, and in turn, this enables the shared array buffer. You can verify the same using the commands below. Both should return "true" if the site is cross-origin isolated and, in turn, SAB is activated.
Note: There are other approaches as well. We recommend using this solution.
SharedArrayBuffer with respect to ZOOM context:
As mentioned in this link(https://developers.zoom.us/docs/video-sdk/web/gallery-view/), many Zoom features are dependent on SAB (SharedArrayBuffer). If SAB is not enabled, these features won't work. Some major ones include Virtual background, 720p, and sharing Chrome tab audio during screen share.
Apart from the approach detailed in this post, other implementation options are discussed here: https://developers.zoom.us/docs/video-sdk/web/gallery-view/#implementation-options
You can refer to this sample commit if you are looking to implement SAB in Video SDK.
Thanks for reading.
Top comments (0)