How to Set Cross-Domain Isolation to Enable SharedArrayBuffer

#http

Introduction

Recently, I was researching the ffmpeg WebAssembly version of the tool running on the web page, and found that the SharedArrayBuffer was used, which involves the problem of cross-domain isolation. It is necessary to set two HTTP response headers to enable cross-domain isolation:

  • Cross-Origin-Opener-Policy set to same-origin (protect origin from attacks)
  • Cross-Origin-Embedder-Policy is set to require-corp (protects the origin from being compromised)

Different services have different setting methods, here is a brief introduction.

Solution

Option One

For front-end development, in the local development stage, you can start a Node.js service for local development and real-time debugging. For example, I use Express.js (Node.js back-end framework)

// Add headers
app.use(function (req, res, next) {
    // set response headers
    res.header("Cross-Origin-Embedder-Policy", "require-corp");
    res.header("Cross-Origin-Opener-Policy", "same-origin");

    // Pass to next layer of middleware
    next();
});

The complete file can be referred to: Create a server with Express.js

Option Two

After deployment on the server, nginx is generally used as a proxy server. At this time, two response headers can be added to the nginx configuration

nginx configuration

location / {
    # set response headers
    add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
    add_header 'Cross-Origin-Opener-Policy' 'same-origin';
}

Option Three

If you only temporarily enable the SharedArrayBuffer function for a simple experience, you can add parameters when starting Google Chrome.

Take Windows as an example, find the chrome icon on the desktop, copy one out, right-click the Chrome icon - Properties - Target, set the original

"C:\Program Files\Google\Chrome\Application\chrome.exe"

change to

"C:\Program Files\Google\Chrome\Application\chrome.exe" --enable-features=SharedArrayBuffer

In this way, opening Google Chrome with a new icon is to open SharedArrayBuffer, which is used for local testing.

Notice

Once cross-domain isolation is turned on, it may affect other cross-domain resources on your website, such as Adsense ads. There is no good compatibility method for the time being, and you need to make a choice.

Conclusion

The above is the experience I summed up when using the wasm SharedArrayBuffer function. If there is anything wrong, please point out.

Reference

Comments