Cross origin isolation and SharedArrayBuffer issue in godot4 game on iframe load

Question

I have built a game using godot4 and hosted it on a Linux server.

In-game server .htacess

Header set Cross-Origin-Opener-Policy: "same-origin"
Header set Cross-Origin-Resource-Policy "cross-origin"
Header set Cross-Origin-Embedder-Policy: "require-corp"

After then I load this game using iFrame on my other site. The site is built using nextJs.

<iframe
      src="https://my-godot-game.com/game1" width="600" height="600"
    ></iframe>

In-game site (Where iframe is implemented) Apache config file

<IfModule mod_headers.c>
        Header set Cross-Origin-Opener-Policy "same-origin"
        Header set Cross-Origin-Embedder-Policy "require-corp"
    </IfModule>

When I run the site URL in Mozila, then iframe load the game properly and it works. But when I run the site in Chrome browser the iFrame doesn't load the game and it shows an 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)

How can I fix this issue?

Answer 1

Before you read further, note that the answer below is sort of a "hacky" workaround I found myself. Also, my method was only tested with nginx server and local port forwarding.

First, you set up proxy in your second site's server configuration to mirror the site providing game files. Speaking of Apache in particular, this guide might be helpful. The final goal is to make all the resources needed for embedding accessible without client-side cross-origin requests.

After that, the <iframe> tag will be able to request the HTML page generated by Godot from the same domain

<!-- /game1 must point to https://my-godot-game.com/game1 -->
<iframe src="/game1/game1.html"></iframe>

In my nginx configuration file, both sites have these mandatory headers enabled

Name	Value
Cross-Origin-Opener-Policy	same-origin
Cross-Origin-Embedder-Policy	require-corp

Expected result examples

Embedded game in Google Chrome on Windows

---

Embedded game in Brave (Chromium-based browser) on Android

---

Initial game website

---

Other browsers tested: Firefox, Microsoft Edge