Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

Experimental SharedArrayBuffer Support

A topic by leafo created Apr 02, 2022 Views: 18,083 Replies: 34
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(+3)

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.

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

(+2)

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?

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.