javascriptsharedarraybuffercross-origin-embedder-policy

How to make my site compatible with the upcoming Cross-Origin-Isolation changes for SharedArrayBuffer


So I read that there are upcoming changes in Chrome to enable the usage of SharedArrayBuffer specifically "Making your website "cross-origin isolated"". My site makes use of external APIs that don't meet the requirements for this. So what I did was, offloaded the code that uses SharedArrayBuffer into an iframe using a subdomain and added the required headers to that page. Reading a bit more into it now, it seems that I still need to have the top level document served with the required headers otherwise I still get the warning in the console.

Just to clarify, my site now is using the following structure:

I thought that I would be able to simply add the required headers to service.website.com and everything would work properly, but I'm still getting the cross origin warning. Any ideas?


Solution

  • SharedArrayBuffer can be only enabled in an environment where the entire frame chain is under cross-origin isolation. Even if you embed the page that uses SharedArrayBuffer, the parent page must be cross-origin isolated too.

    One possible work around is to open a popup window that is cross-origin isolated if the UX is usable for this purpose. One caveat is that cross-origin isolated page won't be able to communicate with other windows.

    I know it's a pain but cross-origin isolation is needed for security reasons.