How to use sharedArrayBuffer inside an 'iframe'

[Mark Sibly]

Hi,

This isn't probably quite the right place to ask this, but here goes...

I've got a multithreaded emscripten/webgpu app that therefore requires the use of the JS sharedArrayBuffer class.

To enable this, I have learned I have to add the follow headers to my server responses:

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

I have done this and it works great, eg:

https://skirmish-dev.net/orkland/

This is running 2 background threads, one for the aerial image texture, one for the height map texture. They each first unzip and then mipmap the incoming data. It works fantastic and I'm still kind of amazed emscripten can do this!

BUT! If I try to place this inside an HTML iframe element, it doesn't work - I get the same 'class sharedArrayBuffer not found' error I would get if I left out the above headers.

I have tried adding the same headers to the page that contains the iframe but still nothing. I've tried a bunch of allow="" and sandbox="" settings and nada.

Is this even possible? I'm beginning to think it isn't. It's a question that's often asked, but the answer always seems to be 'it should work if you do blah blah!', never 'Yes, I've done that!'.

There is also the Cross-Origin-Resource-Policy header, but my understanding of that is it's intended for resources from a different origin? All my resources are from the same origin, and it doesn't seem to make a difference.

The page I've been able to make the most sense of regarding all this is here:

https://blog.stackblitz.com/posts/cross-browser-with-coop-coep/

Any corrections or more info would be most appreciated!

Bye.

Mark

[J W]

Same question here, I've been using SAB between a web worker and main thread. Works great out side of iframe, but in an iframe, SAB is not available. I have 

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

set in the response header as well.

[Kevin O'Dwyer]

Yes, it is possible - I have multithreaded WASM running successfully inside an iframe inside an iframe
In addition to COEP, COOP and CORS headers as per article you linked, you will need to allow cross-origin-isolated on the iframe.
This is only required on Chrome as Firefox, Safari do not implement the 'cross-origin-isolated' directive.
Documentation link for this experimental directive (table entry added June 2024): https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy#directives

[guest271314]

Possible. Here's how I use a Web extension to stream real-time audio captured using a Native Messaging host to any arbitrary Web site using Transferable Streams with an iframe https://github.com/guest271314/native-messaging-piper/blob/main/background.js#L140-L291, and another example using SharedArrayBuffer to work with the same underlying data in an AudioWorklet with a Blob URL https://github.com/guest271314/AudioWorkletStream/blob/shared-memory-audio-worklet-stream/index.html.