Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

Experimental SharedArrayBuffer Support

A topic by leafo created Apr 02, 2022 Views: 19,753 Replies: 44
Viewing posts 1 to 15
Admin (13 edits) (+14)

This post is specifically for people publishing HTML games on itch.io, if you upload downloadable games then you can skip this post!

We’re making our experimental support for games that need SharedArrayBuffer available to everyone.

SharedArrayBuffer is a very useful JavaScript API that can enable game engines to be more efficient and provide more functionality. Sadly, due to the Spectre security vulnerability, support for this was disabled by default in 2018 on all major browsers. The functionality can be restored by opting in using special HTTP headers, but there are side effects from using these headers to ensure the page is more secure.

You can learn more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer#security_requirements

Because of the side effects from enabling the headers, it’s not something we could just turn on for everyone, as we don’t want to risk breaking our site and the existing games we host.

For that reason, we’ve deployed a secondary CDN configuration that will be used for games that want to support SharedArrayBuffer. This may become the default configuration for new projects in the future, but for now it is opt-in.

You can enable it by going to the Embed Options section on your project’s edit page, under Frame Options you will find a checkbox for: SharedArrayBuffer support:

Changes

  • The new CDN runs on the domain html.itch.zone. If you were implementing any kind of manual site locking using our CDN hostname, you will need to update your code. If you have plays with save games stored in local storage, they will no longer be able to access them due to the domain change.
  • The header Cross-Origin-Opener-Policy: same-origin is added to all HTML files
  • The header Cross-Origin-Embedder-Policy: require-corp is added to all files
  • The header Cross-Origin-Resource-Policy: cross-origin is added to all files

Additionally, the embedding page on itch.io (your game page) will have the following changes:

  • The header Cross-Origin-Opener-Policy: same-origin is added
  • The header Cross-Origin-Embedder-Policy: credentialless is added

If you are using game embeds, the embedding page has the following changes:

  • The header Cross-Origin-Opener-Policy: same-origin is added
  • The header Cross-Origin-Embedder-Policy: require-corp is added

Note: We strongly recommend avoiding using our CDN URL directly to embed or view your game. Although it may work in some cases, there scenarios in which our sitelock may be applied and it will block the viewer from accessing the game (even if it works now, it may not work later). The only supported ways to play an HTML game hosted on our platform is either directly from the project’s page or using the Game Embed functionality.

Side effects

These headers put very strict restrictions on how cross-domain resources can be accessed. If your game accesses resources on other domains then those requests will fail by default. We highly recommend testing your game thoroughly with the browser console open to ensure there are no issues.

Additionally, there may be some bugs present on the itch.io page embedding your game. At the moment we are aware that any iframe embeds will not work (this includes things like YouTube videos in comments)

require-corp vs credentialless

The require-corp option is incredibly strict. It will prevent loading resources from other domains without very specific configuration. Chrome has currently deployed an alternate mode called credentialless that will enable pages to continue to load cross-domain resources from other domains while still allowing support for SharedArrayBuffer by limiting how credentials (cookies) are sent.

Learn more here: https://developer.chrome.com/blog/coep-credentialless-origin-trial/

We’ve decided to use credentialless on the itchio project page embedding your game to ensure that we don’t break the functionality of the page. This header is a compromise, though, as it currently isn’t supported in FireFox or other browsers. So in order to take advantage of games loading directly in your itchio page that use SharedArrayBuffer you will need to be on Chrome at the moment. Firefox is now running a trial to support this header, so no additional work is needed on your part for your Firefox players.

Note that the embedded content of your game is set to require-corp to ensure widest compatibility from the iframe layer.

Going forward we’ll aim for wider browser support. Either additional browsers will adopt the credentialless option or we’ll start changing how games are launched depending on the environment.

Supporting Both

You can deploy a game that conditionally supports SharedArrayBuffer by checking if it exists before attempting to use it.

You can use the following JavaScript:

if ("SharedArrayBuffer" in window) {
  // use code optimized for SharedArrayBuffer
} else {
  // use fallback
}

Combine this check with enabling the SharedArrayBuffer support from your project page to ensure that your game has the widest range of browser compatibility while being able to provide the best experience.

Pinned ReplyAdmin(+4)

Update for Firefox users:

We’ve entered the Origin Trials for the Cross-Origin-Embedder-Policy: credentialless header. This means that game pages should now function as expected like they do on Chrome based browsers.

Tell us if you encounter any issues.

(1 edit)

TL;DR: The token in the (“COEP: Credentialless”/CoepCredentialless feature) origin-trial header of itch.io appears to have expired at the end of 2023 and (presumably) needs to be regenerated.

Supposition: An expired origin-trial token appears to only impact release Firefox versions not development Firefox versions (presumably due to a different default/fall-back value).


Hi Leaf,

I recently had reports of my Godot 4 game web/html export (which uses SharedArrayBuffer–and has the experimental SharedArrayBuffer itch.io option enabled) failing to run in Firefox–which was somewhat surprising because Firefox was the only browser I’d tested it with. :)

While investigating possible causes, I happened to base64 decode the transmitted token & realised the expiry field had a value of 1704063600 which equates to 2023-12-31T23+00:00 (UTC).

Based on my current (limited) understanding of the related preference & checking code I think an expired token only impacts release Firefox versions (and I only developed/tested with an (older) development version).

The original bug report on my game:

More details from my investigation than you or almost anyone else is likely to ever want can be found in my follow-up comment: :D

Apologies for not being able to 100% confirm the exact mechanism by which the failure occurs at this time but I wanted to alert you to the potential issue before I lost my “flow” momentum or disappeared down a different rabbit hole. :/ (Especially, as I’m aware that configuration of the whole SharedArrayBuffer feature in browsers these days is quite opaque & there’s many intersecting pieces that need to fit together for it to work correctly.)

Also, apologies in advance if I fail to get back to you on this topic, I will try to do so though, so let me know if any further details are helpful.

Thanks for all your work on itch.io, I really appreciate it. :)

Edit: Added specific mention that this relates to the Origin Trial for the CoepCredentialless feature for clarity and search juice.

This appears to be a related bug on the Godot issue tracker:

  • “SharedArrayBuffer does not work with Firefox on Android anymore #86988”: https://github.com/godotengine/godot/issues/86988

    “A few days ago [issue created 9 Jan 2024] my Godot game stopped working on Itch.IO when opened from a Firefox Android app. […]”

From other comments on the issue it seems like it might be Release and Beta versions default to an error on expiry.

(+1)

Turns out there’s also a pre-existing itch.io issue too:

Admin(+1)

Thanks for the investigation. I’ve just deployed a change that causes all Firefox versions to fall back to launching HTML games in a popup instead of directly in the game’s page, which has universal support for the necessary headers.

(+3)

Hi Leafo.

I think the change indirectly may have broke some very specific scenario I am currently experiencing. I will try to describe it.

I am a Firefox user and I am developing a game. (Godot 4, browser build)
Because the game is in its testing stages I have the game currently on Restricted with a required password to be able to access the page. Testers can access the page at any time while the game not being officially released yet.

Due to the pop-up change, users reported that the pop-up gave a 404 page when loading the browser game. When I tested it myself (while being logged into Itch.io) The game was working.
Then I tried running the game on a Firefox private tab (not being logged into itch.io) and I also got the 404 page.
I tried playing the game in Edge (without being logged into Itch.io) and I was able to play the browser game normally.

I am suspecting that the pop-up does not know about the password that is required in order to view the Itch.io page of the Restricted game. And that it gives a 404 page instead.
So testers that use Firefox are unable to play the browser build currently.

Thanks for your time!

Apparently the new change has also made the download button work again (there was an issue where, if a game had both play-in-browser and downloadable builds but the former used SharedArrayBufffer it caused Firefox to not be able to download the downloadable builds).

Ah, thank you for that. Now psy-ball works great on Firefox!

Admin moved this topic to Developer Updates
(+1)

it seems that embedded youtube videos refuse to work while this setting is active.

Admin(+2)

That’s correct, I mentioned it in the post above. We’ll probably have to switch over to opening iframe content in new tabs

(+3)

Hi Leafo, just curious if that workaround for opening the iframe in a new tab is still considered as an implementation option. The SharedArrayBuffer is great as my game stopped stuttering with it enabled, but the gameplay trailer iframe broke. Even if it can’t play on the page, it’d be great if it could at least open up to a new tab. In any case, thanks for all your work!

(+1)

Hello, I try to upload a Godot multithreaded game with SharedArrayBuffer option and have this error :

Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined      index.js:9:10348

    Godot https://html.itch.zone/html/5574624/index.js:9

    Engine https://html.itch.zone/html/5574624/index.js:616

    promise callback*SafeEngine/init/doInit/Engine< https://html.itch.zone/html/5574624/index.js:614

    doInit https://html.itch.zone/html/5574624/index.js:613

    init https://html.itch.zone/html/5574624/index.js:630

    startGame https://html.itch.zone/html/5574624/index.js:726

    <anonymous> https://html.itch.zone/html/5574624/index.html:223</anonymous>

    <anonymous> https://html.itch.zone/html/5574624/index.html:243</anonymous>

I hope it's can help :) !
Admin

Are you able to upload a version of your game somewhere that we can take a look at? It appears the links in the stacktrace you gave are no longer valid.

(+1)

Hello =) !

http://localhost:8060/tmp_js_export.html

I'm kiding :p

https://theludovyc.itch.io/mondernierjour

My repo is yours https://github.com/theludovyc/Godot_MonDernierJour

Have a nice dev :) !

Admin (2 edits) (+2)

Which browser?

I do not see the error in Chrome. As mentioned in the topic, we’re using a header that isn’t widely available for the game page embed. It only works on Chrome right now.

You can, however, use the embed from here to get a new URL that should work on all browsers: https://itch.io/game/upload-embed/282067

For example, your game is available here: https://itch.io/embed-upload/5608527?color=333333

I use firefox :)

Thanks for your replies !

(1 edit) (+1)

Hi leafo, thanks for all the hard work! I found out that SharedArrayBuffer is not enabled on Safari when accessing game pages (EG: https://davcri.itch.io/test-godot4 where I enabled experimental support from the dashboard). This may be due to Safari requiring “require-corp” instead of “credentialless” (https://webkit.org/blog/12140/new-webkit-features-in-safari-15-2/).

I guess right now it’s difficult to find a configuration that works for every platform.

(+1)

This is a good point! It should be possible to discern between Safari and Chrome on the server side and provide the correct headers for each, which would be a great solution in these troubled times when Chrome on macOS does not work with Godot 4  at all while Safari works great but requires the "wrong" header value to be specified...

(1 edit)

I can't even find the Embed Options after clicking Edit Page. Help please? https://watercolorheart.itch.io/catalyst

(+1)

Were you able to get the help you needed? The embed options are right after the upload options, and right before the details section of the edit page. I've included a screenshot to help:


(+1)

Yes, I got it working!

(1 edit) (+3)

Hi,

I've just uploaded a Godot 4 project for the GMTK jam following this guide and it works great for most browsers.

However,  attempting to open the game's page in the Itch Desktop App results in the program hanging and no web page being displayed at all. The Itch app even crashes sometimes. Am I missing something to get this working? The page is here: https://jsvickers.itch.io/bystanders

I'm assuming this is because the Itch Desktop App's browser does not support games using SharedBufferArray..?

Is there not currently a way to make it so the game will only embed if this is supported? If not, this would possibly be ideal for the future.

Edit: I've seen that other projects that seemingly are using made in Godot 4 this is also happening to.

(1 edit) (+2)

Yes I have this same problem, also for GMTK jam.

YouTube videos also don't work when this is enabled.

(+2)

It seems that on Firefox, if the game page has downloads in addition to web build, downloading will be blocked (but the Web build runs fine). On Chrome it worked well. Is this problem already known?

(2 edits)

I have some web game builds (Emscripten) using SharedArrayBuffer which work perfectly on Chrome and Firefox, but on Safari the constructor for SharedArrayBuffer is hidden as if the requisite headers haven’t been set.

I wasn’t sure if Safari was supported for this feature yet or not, and wanted to ask!

(1 edit) (+2)

Another thing that I’ve seen not working in Godot 4 games is the “View random submissions” button on jams. I haven’t used that button a lot recently, so I don’t know if it’s been fixed in the meantime, but last time I submitted a game to a jam and played some random submissions there was at least one game that didn’t work until I opened its submission page in a new tab and then opened the game page in that tab.

Edit: I just tried using it, and it showed the following text:

Error The following features required to run Godot projects on the Web are missing: Cross Origin Isolation - Check web server configuration (send correct headers) SharedArrayBuffer - Check web server configuration (send correct headers)

whereas the same game, if I control-click the submission to button and then go back to the game in the new tab it works fine.

Same thing here. Seems to be an universal problem. Really annoying.

(1 edit) (+6)

Any timeline or updates on when or if the issues with SharedArrayBuffer support as pointed out above will be fixed?

As of now all of Godot 4 web builds are still depending on this feature.

This comment on github is relevant

Admin(+3)

The issue, as far as I’m aware, is only for Safari due to them not implementing support for the headers we use when embedding games into the game page.

I’ve left a comment on the github ticket with more info.

(3 edits) (+2)

Sorry to post here again, but I just wanted to comment that I really believe the more major issue is not Safari, but rather the itch desktop app's built-in browser. Enabling a feature when you submit your game should not cause the entire app to crash on page load, even if the feature is experimental. I don't believe this to be a problem with Godot, but a problem with Itch. With the rise in popularity of Godot for game jams, I just feel like this is an essential problem to fix as there are a lot of people who would rather use the desktop app. There has to be a work-around for this, even if it means the game doesn't embed or something.

(+1)

Thank you, the fix for safari browsers you mentioned on Github is much appreciated.

I was not specifically referring to that issue alone though, but other issues mentioned in this discussion, like:

1) Embedded youtube videos won't work if SharedArrayBuffer is enabled

2) View random submissions button not working

3) SharedArrayBuffer not working on Itch Desktop App

I only tested number 3 myself, for the other issues I'm looking at how recently it was brought up or the last info in your original post.

Admin (2 edits) (+3)

Thanks for clarifying. Requests generated for the app will no longer include that header which should hopefully prevent the crashing issue. But it’s possible there will still be compatibility issues. In the meantime, you can try out kitch (development branch of the app) if you are still having issues: https://itchio.itch.io/kitch-setup

The other changes will likely require more involved changes to how games are launched, I’ll probably have an update for that sometime in the near future.

(+1)

Great, looking forward to the update!

(+1)

Hi. Thanks for looking into this. 
Is there any update on this?

Thank you!

Is there any update on this?

Hi leafo,

I'm currently bumping into the issue of iframe not working with SharedArrayBuffer support enabled, and I need it for steam page wishlist widget embedding. I was wondering if a fix is in the works for this issue specifically?

Admin(+1)

Unfortunately every iframe on the page must participate in the same security headers, so if a third party platform’s iframe embed doesn’t support it then it won’t load. You’ll have to use another solution to embed the widget into the page, like a link or image.

Although this is not the answer I had hoped to read, I appreciate the quick response, thanks! I'll figure out a way around.

In addition to what others and I have already mentioned, it seems jam rating pages don’t show download buttons for entries whose web builds use this. Or is it some other thing at play? I don’t fully understand when those buttons do and don’t show up.

I also wonder if the issue aXu mentioned affects all games that have both downloadable and HTML5 builds with the latter requiring SharedArrayBuffer, or if it only affects those that are set to “No payments”. If the latter, I suspect it might be fixable by simply having the download button open a new tab with the actual download button, but I haven’t really taken the time to experiment with this (I should probably try to see if download pages on devlogs work).

I think the option may also give an error when trying to donate via the download button with Paypal.

To me it just goes to a blank page with "Loading..." and nothing else happens.

Admin

Are you able to link to a page that is having the issue so I can take a closer look?

Thanks

sure: https://atovange.itch.io/dreamcore95idle


I had the same issue even when the game was running in the same page rather than opening in a new tab.


I also tried disconnecting the paypal account and reconnecting it, to no use.

Admin

Hello,

It doesn’t appear to be related to the SharedArrayBuffer support, but rather an error is being thrown by the PayPal API when attempting to create a transaction on your PayPal account. Perhaps there is an issue with your PayPal account?

I'm not sure what the issue would be.

I can give and recieve money just fine and recently recieved a donation.


My account shows no errors.