Issue with cross-origin isolation

[swissspidy]

I’m not 100% sure whether this issue I’m having needs fixing in playground or Gutenberg.

I’m trying to get my Media Experiments plugin running in playground. To try it: https://playground.wordpress.net/?mode=seamless&blueprint-url=https://github.com/swissspidy/media-experiments/main/blueprints/playground.json

The plugin sets Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp HTTP headers on the post editor page to force cross-origin isolation.
The block editor is iframed. The Iframe component tries to access node.contentDocument but because the iframe seems to be on a different origin, that property is null and the editor crashes.

Do you have any idea how this issue could be resolved? I’d really love folks to be able to test my plugin in playground.

[adamziel]

This is an interesting problem @swissspidy! And it goes deep.

So first, Gutenberg uses a blob as a source for that iframe. Unfortunately, blob-based iframes cannot be controlled by service workers so that wouldn't work in Playground. Therefore, Playground patches Gutenberg to load the document as follows: src="/empty.html".

This means there's a network request involved, and so there is also a HTTP response where specific cross-origin headers may be required. My last attempt to use these Cross-Origin headers broke YouTube embeds, though. I just tried making the editor iframe credentialless (via <iframe credentialless>), but that also made it uncontrolled by the Service Worker.

I'm not sure if there's a good solution here, given how easily Service Workers give up. Could you perhaps disable the Cross-Origin isolation when the plugin is running in Playground?

Here's some related resources:

• Missing CSS and images because the Gutenberg iframe isn't controlled by the service worker #646
• Privacy Sandbox compatibility #586
• Web: YouTube embeds broken #411
• Remove Cross-Origin-*-Policy headers #695

[swissspidy]

Could you perhaps disable the Cross-Origin isolation when the plugin is running in Playground?

What I just tried now though is disabling the editor iframing in Gutenberg by registering a fake block with an old API version. See swissspidy/media-experiments@91b983d

That now makes the post editor at least work again, but turns out SharedArrayBuffer is still not available because of #695.

Unfortunately the majority of the plugin's features, such as using wasm-vips to compress images, require SharedArrayBuffer and thus cross-origin isolation.

I'll try to see whether I can turn off those features to have at least a very trimmed down version working in playground. Can't hurt to add some hardening for such cases in my plugin.

[adamziel]

Surfacing an in-person chat on CloudFest:

The only solution seems to be adding an on/off switch to Playground to enable/disable the CORP headers. Both modes have value:

• Without CORP headers, media embeds and external scripts typically work as expected
• With CORP headers, SharedArrayBuffer works as expected

There doesn't seem to be a middle-ground where we can get both at the same time.

[adamziel]

Related: swissspidy/media-experiments#384