Firefox can't play HTML5 games which use SharedArrayBuffer

[birbgames]

From what I understand, it appears that Newgrounds does not meet Firefox's security requirements to allow the use of SharedArrayBuffer, and that requirement is adding the following headers:

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

The security requirements can be found here.

For testing purposes, I created a dummy Godot HTML5 threaded project and uploaded it here.

It runs fine in Chrome, but on Firefox I get the following error in the console (due to SharedArrayBuffer not being available)

Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined
    Godot https://uploads.ungrounded.net/tmp/1636000/1636126/file/alternate/alternate_2_r14.zip/index.js:9
    doInit https://uploads.ungrounded.net/tmp/1636000/1636126/file/alternate/alternate_2_r14.zip/index.js:604

When could this be fixed?

I'm hoping to submit my game demo on Newgrounds soon, and this is making things rather difficult (game made using Godot Engine, version 3.3 added the HTML5 Threads export option which fixes a lot of issues).

EDIT: this is actually going to be required by Chrome as well, there is a warning in the console when running the same project via Chrome.

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.

[BrentHeMan]

Thanks for bringing this to our attention. We're looking into this.

[BrentHeMan]

So it looks like sending back COOP/COEP headers site wide breaks loading ANY external content unless they also send back a Cross-Origin-Resource-Policy header set to cross-origin. This breaks Youtube embeds for example because they don't send back this header yet.

We'll probably have to selectively send back COOP/COEP headers on games that require SharedArrayBuffer only. We can't deploy this site wide yet.

Can you disable SharedArrayBuffer for now?

[birbgames]

At 7/5/21 03:02 PM, BrentHeMan wrote: So it looks like sending back COOP/COEP headers site wide breaks loading ANY external content unless they also send back a Cross-Origin-Resource-Policy header set to cross-origin. This breaks Youtube embeds for example because they don't send back this header yet.

We'll probably have to selectively send back COOP/COEP headers on games that require SharedArrayBuffer only. We can't deploy this site wide yet.

Can you disable SharedArrayBuffer for now?

I have disabled it for now, the game I had in mind for it is already submitted.

The main issue (that I experienced) is that running Godot Engine games on Chromium-based browsers is very likely to have audio issues. There's also other fixes that SharedArrayBuffer would bring, just an overal big performance improvement overall to the game, making it easier to port as I wouldn't need to maintain a separate web version.

[BrentHeMan]

At 7/5/21 10:37 PM, birbgames wrote: I wouldn't need to maintain a separate web version.

You wouldn't? I'm curious how that works.

I think we have a way to get this working only on games that need it without affecting the rest of the site. Will keep you updated.

[birbgames]

At 7/6/21 03:18 PM, BrentHeMan wrote:

At 7/5/21 10:37 PM, birbgames wrote: I wouldn't need to maintain a separate web version.

You wouldn't? I'm curious how that works.

I think we have a way to get this working only on games that need it without affecting the rest of the site. Will keep you updated.

Godot Engine has some odd behavior when exported to HTML5 without the Threads option (at least the 3.3 version at the time).

One thing that immediately comes to mind is that loading a level using a "ResourceInteractiveLoader" object (repeatedly call a "poll" method on this object in order to load the level, allowing for background loading) will cause the audio to get out of sync, so I had to remove interactive loading and instead cause a somewhat ugly lagspike when you start a new game in the NG demo.

But the general performance improvements alone would be more than worth for having the option to use SharedArrayBuffer.

Looking forward to any new updates!

[BrentHeMan]

At 7/6/21 10:39 PM, birbgames wrote: Godot Engine has some odd behavior when exported to HTML5 without the Threads option (at least the 3.3 version at the time).

So to get threads you need SharedArrayBuffer?

the NG demo.

Have you uploaded anywhere else? I'm curious if this is even supported elsewhere yet.

[birbgames]

At 7/6/21 10:44 PM, BrentHeMan wrote: So to get threads you need SharedArrayBuffer?

Yup! You can see when you run the aformentioned dummy project:

Firefox doesn't work, the console output mentions SharedArrayBuffer doesn't exist.

Chrome does work, but the console output mentions that soon it will require COOP/COEP site headers.

Have you uploaded anywhere else? I'm curious if this is even supported elsewhere yet.

Tried it on Itch as well, it has the same issue which has also been reported there by quite a few users who have projects which require these headers.

[BrentHeMan]

At 7/8/21 12:09 AM, birbgames wrote: the console output mentions that soon it will require COOP/COEP site headers.

Yeah I was just curious what all this feature actually provides. There's a ticket open to get these headers added but it'll probably be on a per project basis.

There will probably be some downsides to enabling this though like you probably won't be able to embed stuff in the project description when this is enabled, like YouTube videos and stuff like that, until they start supporting the corresponding required headers. That's why we can't just enable this site wide.

[birbgames]

At 7/8/21 03:46 PM, BrentHeMan wrote:
Yeah I was just curious what all this feature actually provides. There's a ticket open to get these headers added but it'll probably be on a per project basis.

There will probably be some downsides to enabling this though like you probably won't be able to embed stuff in the project description when this is enabled, like YouTube videos and stuff like that, until they start supporting the corresponding required headers. That's why we can't just enable this site wide.

I understand you can't just enable these site-wide, but if you could do some sort of per-project toggle as you mentioned, that would be great!

[BrentHeMan]

At 7/8/21 10:34 PM, birbgames wrote: I understand you can't just enable these site-wide, but if you could do some sort of per-project toggle as you mentioned, that would be great!

OK @PsychoGoldfish has enabled this in the project settings. You should see a toggle "Uses SharedArrayBuffer/Cross Origin Isolation".

Current caveats to using this:

• Embeds in the description like YouTube, Soundcloud, etc. will not load. This is because they do not support the corresponding headers yet.
• Users can't sign in or sign up on the same page. They have to be redirected to dedicated pages for that.
• Probably other stuff because this is bleeding edge and few people seem to have it enabled.

Your demo now works in FF but it doesn't work in Chrome Beta (which is the first version that will require these headers as I think you mentioned). I don't know why that is. The page is reporting cross origin isolated so we've done our part. We'll see if it's still broken once Chrome 92 is released later month.

[birbgames]

At 7/19/21 05:22 PM, BrentHeMan wrote:
OK @PsychoGoldfish has enabled this in the project settings. You should see a toggle "Uses SharedArrayBuffer/Cross Origin Isolation".

Current caveats to using this:

Your demo now works in FF but it doesn't work in Chrome Beta (which is the first version that will require these headers as I think you mentioned). I don't know why that is. The page is reporting cross origin isolated so we've done our part. We'll see if it's still broken once Chrome 92 is released later month.

Thank you so much for the assistance! The Chrome issue is odd, but hopefully it will be fixed before the update leaves the beta.

This will prove immensely helpful with future, more demanding projects. And I'm sure others will benefit from this change as well.

[alsoknownas1]

At 7/19/21 05:22 PM, BrentHeMan wrote:

At 7/8/21 10:34 PM, birbgames wrote: I understand you can't just enable these site-wide, but if you could do some sort of per-project toggle as you mentioned, that would be great!

OK @PsychoGoldfish has enabled this in the project settings. You should see a toggle "Uses SharedArrayBuffer/Cross Origin Isolation".

Current caveats to using this:

Your demo now works in FF but it doesn't work in Chrome Beta (which is the first version that will require these headers as I think you mentioned). I don't know why that is. The page is reporting cross origin isolated so we've done our part. We'll see if it's still broken once Chrome 92 is released later month.

I just wanted to pipe in with a word of thanks for this feature as the lack of headers was also preventing the loading of SVGs under newer Chrome security policy. This seems to be the case at the very least as of Chrome 91 but it could have happened earlier without me noticing. The games Bride and Squeeze would have worked just as well with completely permissive (but explicit) cross-origin policies. However, Chrome’s requirement is for any policy so the ability to select an isolating policy is a nice workaround.

I can’t believe this feature is less than a day old. You guys rule!

[BrentHeMan]

At 7/20/21 08:19 AM, alsoknownas1 wrote: I can’t believe this feature is less than a day old. You guys rule!

Just a heads up: we had to make a change which has broken your games. You can disable SharedArrayBuffer for now. We'll fix this soon so you can re-enable it again.

[BrentHeMan]

At 7/26/21 06:20 PM, BrentHeMan wrote:

At 7/20/21 08:19 AM, alsoknownas1 wrote: I can’t believe this feature is less than a day old. You guys rule!

Just a heads up: we had to make a change which has broken your games.

All good now!

@birbgames - your demo is broken because it looks like you're trying to load assets from Soundcloud. They're not sending back the right header yet so the browser won't load them. That's one downside of enabling SharedArrayBuffer: every external asset you load has to be sending back "Cross-Origin-Resource-Policy: cross-origin" or the browser will refuse to load it.

[birbgames]

At 7/27/21 02:24 AM, BrentHeMan wrote: All good now!

@birbgames - your demo is broken because it looks like you're trying to load assets from Soundcloud. They're not sending back the right header yet so the browser won't load them. That's one downside of enabling SharedArrayBuffer: every external asset you load has to be sending back "Cross-Origin-Resource-Policy: cross-origin" or the browser will refuse to load it.

My demo does not use Soundcloud tho, the dummy project I've linked has all the audio files added directly in the project's zip archive.

The issue remains related to Chrome not detecting the cross-origin isolation (including the current stable release), it runs fine in Firefox still.

[BrentHeMan]

At 7/27/21 07:03 AM, birbgames wrote: My demo does not use Soundcloud tho, the dummy project I've linked has all the audio files added directly in the project's zip archive.
The issue remains related to Chrome not detecting the cross-origin isolation (including the current stable release), it runs fine in Firefox still.

Yeah that's really strange. I swear this was trying to load a Soundcloud URL yesterday. Maybe I was looking at something else.

You can see in the console: "self.crossOriginIsolated (via main site): true" so we know that's working. Most definitely looking like a bug in Chrome.

[alsoknownas1]

At 7/27/21 02:24 AM, BrentHeMan wrote: All good now!

@BrentHeMan An issue arises and is fixed without my even noticing. I stand by you guys ruling. :)

My next project will be NG exclusive, so I definetly want to be as compatible as possible with the site's content security policy. If you don't mind my asking, what was the issue and how was it resolved? Was the issue configuration based or "generative"? That is: is it okay that I left `SharedArrayBuffer` enabled or should I disable, publish, re-enable, and then publish again?

Also, my condolences and sympathy here. It sucks enough when browsers change the rules (webaudio now only being launchable via user-interaction anyone?) but I know cross-site issues are particularly hard to get right for a site like NG. 

[BrentHeMan]

At 7/27/21 08:22 PM, alsoknownas1 wrote: My next project will be NG exclusive, so I definetly want to be as compatible as possible with the site's content security policy. If you don't mind my asking, what was the issue and how was it resolved? Was the issue configuration based or "generative"? That is: is it okay that I left `SharedArrayBuffer` enabled or should I disable, publish, re-enable, and then publish again?

We had to create a new subdomain for games that need this because one of the headers was breaking older games. Should be totally transparent so you shouldn't need to do anything.

[alsoknownas1]

At 7/27/21 08:35 PM, BrentHeMan wrote: We had to create a new subdomain for games that need this because one of the headers was breaking older games. Should be totally transparent so you shouldn't need to do anything.

Awesome and pretty elegant. Again, thanks for the dedication to backwards compatibility.

[Arabask]

At 7/27/21 05:21 PM, BrentHeMan wrote: You can see in the console: "self.crossOriginIsolated (via main site): true" so we know that's working. Most definitely looking like a bug in Chrome.

I'm currently running into the same problem, as my game run fine in firefox but as soon as I try to launch the game in a chromium based browser it just don't launch and I got this error:

Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined

If it's a bug in chrome, do you have an idea how can I solve it?

I really need this feature as my game is a rythm game and not having SharedArrayBuffers delay the music by .25 to .5 seconds sometimes...

Any explanation is very appreciated.

[BrentHeMan]

At 6/1/22 06:48 PM, Arabask wrote: Any explanation is very appreciated.

Did you click the toggle "Uses SharedArrayBuffer/Cross Origin Isolation" in the project settings?

[Arabask]

At 6/1/22 11:17 PM, BrentHeMan wrote:

At 6/1/22 06:48 PM, Arabask wrote: Any explanation is very appreciated.

Did you click the toggle "Uses SharedArrayBuffer/Cross Origin Isolation" in the project settings?

Yes for sure I do...

and it work well on Firefox :)

you can test it by yourself here

[BrentHeMan]

At 6/1/22 11:35 PM, Arabask wrote: you can test it by yourself here

As far as we can tell we are sending all the appropriate headers. It looks like maybe Chrome has been broken. Even the original test project that definitely did work when we set this up is broken. This is such an unstable tech that it doesn't surprise me that it's broken.

[Arabask]

At 6/3/22 04:22 PM, BrentHeMan wrote: As far as we can tell we are sending all the appropriate headers. It looks like maybe Chrome has been broken. Even the original test project that definitely did work when we set this up is broken. This is such an unstable tech that it doesn't surprise me that it's broken.

Yeah browser are very unstable. What's strange is that the site is actually cross origin isolated so I don't know what else can help and didn't find anything on web. However I found a solution to my problem (desynced sounds) by using an external API so at least this works.

Thank you for your help on this :)