How to run my html5 game made with godot 4 on my own website?

I have a website made with sveltekit and I want to add a flappy bird made with godot 4, when I export the game and upload it to itch.io the game runs and runs fine, but when I use an iframe to run my game on my website, I get this message:

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)

I asked ChatGPT and he told me to put these headers in my vite.config.ts:

server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp'
    }
  }

But I still have the same problem, I also tried to run my game locally on my website and it's still the same so I tried to run it from an itch.io iframe again, this is the code I'm using to run it:

<script>
    export let src = 'https://html.itch.zone/html/11009302/index.html';
    export let width = "800";
    export let height = "600";
  </script>
  
  <iframe
    src={src}
    width={width}
    height={height}
    class="border-none"
    style="border: none; display: block; margin: auto;"
    title=""
  ></iframe>
  
  <style>
    iframe {
      display: block;
      margin: auto;
    }
  </style>

I want my game that I published on itch.io to run on my website with iframe as well, but I get this error: 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) If it can't be done from itch.io and the game has to be local from my website, nothing happens, but I also tried that and I get the same error.

Solution

Yes, using SharedArray Buffer when developing for the web is problematic. In words of Adam Scott, Godot contributor:

The issue is that during the development of Godot 4, we bet on the wrong horse: we went all-in with using threads with SharedArrayBuffers. We thought it was mainly a question of browser support (which took a step back due to the aforementioned security issues), so when all browsers finally shipped stable releases with SharedArrayBuffer, we streamlined everything around multi-threading.

But we underestimated the difficulty of configuring cross-origin isolated websites.

We know it has been a hurdle for a lot of users trying to publish their jam games on itch.io, which has an experimental SharedArrayBuffer option, but relying upon another feature (coep:credentialless) not supported by Safari or Firefox for Android).

Likewise, most Web games are being published on third-party publishing platforms where the game authors may not even be able to set the required headers for SharedArrayBuffer support.

The good news is that Godot 4.3 can export for the web using single threading solving al those issues, and what's better: it also introduces a fix for the audio problems we previously had when using single threading, so if you are developing for the web your best option is to upgrade to Godot 4.3, which now that is in the RC (Release Candidate) phase, should be stable enough. And given the fact you are already using Godot 4, the upgrade to 4.3 should be easy enough.

You can read the official article on this matter here: https://godotengine.org/article/progress-report-web-export-in-4-3/

And download Godot 4.3 RC 1 here: https://godotengine.org/article/release-candidate-godot-4-3-rc-1/#downloads