How to define SharedArrayBuffer in Chrome?

Question

I am working on React + WASM + FFmpeg app following this tutorial

On Chrome, I got the error Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined error.

I followed the doc reference, and it says the below, which I don't understand.

---

Cross-origin isolation overview

You can make a page cross-origin isolated by serving the page with these headers:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

---

What does serving the pages with these headers mean?

How do I implement that?

I even found Chrome dev's official video, but even that does not explain any implementation detail.

Edit2: The best instruction I can find is here, but even that is too vague for me. What does it mean by setting a header? I'm not requesting anything to begin with.

Edit: My React version is already 17.0.2, so this should have been fixed but I am somehow getting this error as well...

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021.

Answer 1

The SharedArrayBuffer serves the purpose of sharing data buffers between your main browsing context and another agent (another web page or a worker).

However, to minimize the possible security vulnerabilities, the specification states that this API can only be operated in a secure context.

In addition to this security prerequisite, it is also necessary for any top-level document to be in a Cross Origin Isolation. This means, the party serving the contents should tell the browser that it should block the loading of cross-origin resources. (A document from domain A trying to get data from Domain B)

This is done by the servers by specifying the following two response eaders when serving the website:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

How to specify them in your debug environment?

You need to set up a standard file server such as Apache. Then you will have to tweak its configuration to serve the above headers with the files.

Quick setup: https://www.wampserver.com/en/

An answer provisioning the header info: https://stackoverflow.com/a/35566100/4185234