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

Question

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:

• app.website.com -> contains the complete application functionality
• service.website.com -> contains the functionality that makes use of SharedArrayBuffer

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?

Hegemony

Have a look here: #66489786 – Replace

Answer 1

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.

Parada

Is there any other way than opening it in a popup window or a new window? I am facing the exact same issue. – Veljkov

This is just for Chrome and won't work in Firefox, but you can register for an origin trial to set your origin temporarily exempt from this restriction. The Chrome team is working to relax the conditions to enable cross-origin isolation, but for the time being, you can apply for it to keep SAB working. Learn more: developer.chrome.com/blog/enabling-shared-array-buffer – Parada

Hi agektmr, your very important blogpost at web.dev/coop-coep/ was not very clear about this topic. It has instructions about how to isolate an iframe, one is to open the iframe like this: <iframe allow="cross-origin-isolated">, another one is to set a CORP header (on top of COOP and COEP, I think), but it didn't mention whether it's possible to embed an isolated iframe inside a non-isolated parent. I thought it's possible after reading it, and failed to make it work. – Tiffin

@Tiffin Thank you for your feedback. I will add something to clarify that in the article. – Parada

Would you please explain why it requires the entire frame chain to be cross origin isolated? My understanding is that as long as you run the iframe in a separate process (because the iframe itself has COOP and COEP), SharedArrayBuffer will not cause security issue even if the top level document does not have COOP or COEP. Is there anything wrong with my understanding? – Bronchitis

Chrome has a proprietary architecture called "Site Isolation", which isolates iframes. So you are right, you can expect they are isolated but on Chrome (and soon on Firefox). However, COOP/COEP is an effort to standardize the cross-origin isolation on all browsers where there's no guarantee that they isolate iframes. The standard assumes iframe is not isolated. – Parada

@Parada Thank you for your explanation! Does that mean the standard only requires COOP to isolate windows but not iframes? Why does not the standard treat both windows and iframes equally? – Bronchitis

Yes, to protect your own origin, COOP is sufficient. And to protect your document from being embedded in a cross-origin iframe, X-Frame-Options: DENY or a CSP frame-ancestors directive can be used. You have to note that COEP is not a protection by itself. It's more of a promise that instead of enabling dangerous features such as SAB (potentially exploited by Spectre), this page won't load any cross-origin resources that explicitly opts in. As a result, the resources loaded in the cross-origin isolated page are either safe or understands the risk. – Parada

To answer the question why there's no header to isolate iframe: If it's possible, the browser can already enable Site Isolation. – Parada