How to fix SharedArrayBuffer is not defined error

  • Post category:Nginx / ReactJS
  • Post comments:2 Comments
  • Reading time:2 mins read

Recently, I came across this SharedArrayBuffer is not defined error in the Firefox browser, while working on my react app called Giferate. This error was hitting in the Firefox, mobile browsers while my app worked just fine on the Chrome desktop version.

SharedArrayBuffer is not defined
SharedArrayBuffer is not defined


With some googling, I found this – With the discovery of meltdown attack spectre, many browsers including Firefox have disabled ‘sharedArrayBuffer’ and few other powerful browser functionalities. While Chrome allows using it for now but starting the Chrome 92 version, it will disable it as well. And to enable it in the browser, we have to make our website ‘Cross-Origin-Isolation‘.

As per this guide, the requirement is to add following two headers to the top level document of your website:

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

We should be able to add these headers via a web server like Nginx or Apache.

So, I decided to Dockerize my react app and host it separately with these two headers added to its Nginx server, like this


server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;

        add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
        add_header 'Cross-Origin-Opener-Policy' 'same-origin';	 
    }
    #error_page  404              /404.html;

  }

Above is an excerpt from the default.conf file in the Nginx server. I just added those two headers under location directive for ‘/’.

And Voila !! It fixed the issue and I can use my app even on Firefox and mobile browsers as well 😉

There is additional benefit with this approach, i.e its localised to my web app only. And therefore doesn’t break any other functionalities on my website.

Share the post, if you liked it

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This Post Has 2 Comments

  1. abstract

    Nice

    How can I do that with a static website?

    1. techkblog

      Thanks!

      This approach will even work for static website. If you have the access to the hosting server then you can easily add headers to the web server directly or can edit to the containerised (Docker/Kubernetes) app instead.