How to disable isolated/partitioned resources (and service workers) from cross origin Iframe

276 Views Asked by At

I'm building a fully client side web development environment which hosted in separate domain, one is the code editor and the other one is for previewing the code.

enter image description here

The communication works by registering and sharing MessageChannel port to previewer's service worker by opening preview-example.com on an iframe element in editor-example.com. This way, my app can automatically establish a connection via service worker even if the preview-example.com tab is closed or yet to be opened. I use postMessage to establish the initial connection.

Everthing works fine until I updated ChromeOS recently. I noticed that now I have 2 active service workers registered for preview-example.com, both registered for the same origin and same scope ...

enter image description here

... except that now the one opened inside an iframe has its own partitioned storage and presumably workers. Notice the (^) symbol for local storage domain. Hence my app can't reestablished the connection automatically.

enter image description here

My website works fine in current Chrome version on windows 10, so I'm guessing it has something to do with recent Chrome updates but I can't find any solid information on how to revert back or disable this default behaviour.

Things I've Tried

Right now I have a workaround by sharing MessageChannel port directly to the service worker of newly opened preview-example.com tab/window. The limitation is that, because service worker seems to died after 10-20 seconds, my app need to manually reestablish the connection by reopening preview-example.com from editor.com.

I'm hosting my app on firebase.

Response Header Settings

Based on information from below articles :

firebase.json

"headers": [
  {
    "source": "**",
      "headers": [
        {
          "key": "Origin-Agent-Cluster",
          "value": "?0"
        },
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "unsafe-none"
        },
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "unsafe-none"
        },
        {
          "key": "Cross-Origin-Resource-Policy",
          "value": "cross-origin"
        }
      ]
  }
]

No luck so far.

The storage and worker doesn't get partitioned when I tried serving the app through Github codespace (localhost5000.example.com, localhost5005.example.com).

Registering a sub domain or building browser extension is not an option right now.

My ChromeOS version where I encounter this issue : Version 111.0.5563.71 (Official Build) (64-bit)

0

There are 0 best solutions below