Fix embeds in Chrome

[swissspidy]

See #383 — this only fixes YouTube embeds but not Twitter embeds for example

Props @adamziel for the hint

Updates the MutationObserver instance to work inside the editor-canvas__iframe iframe and apply attributes to the .components-sandbox iframe as well.

Attributes do not need to be added to the YouTube iframe itself apparently.

All I had to do was ensure the .components-sandbox iframe has a src attribute set, even if it's empty.

To-do:

• Add tests

Demo:

[github-actions]

Size Change: +147 B (0%)

Total Size: 3.04 MB

Filename	Size	Change
build/media-experiments.js	64.3 kB	+147 B (0%)

ℹ️ View Unchanged

Filename	Size
build/100.js	83 kB
build/534.js	7.54 kB
build/699.js	2.36 MB
build/blurhash.worker.js	3.19 kB
build/canvas.worker.js	2.77 kB
build/chunk-ffmpeg.js	5.9 kB
build/chunk-selfie-segmentation.js	16.3 kB
build/dominant-color.worker.js	4.46 kB
build/ffmpeg.js	1.1 kB
build/heif.worker.js	424 kB
build/media-experiments-blocks-rtl.css	298 B
build/media-experiments-blocks.css	297 B
build/media-experiments-rtl.css	764 B
build/media-experiments.css	765 B
build/pdf.js	564 B
build/subtitles.js	864 B
build/upload-requests-modal-rtl.css	267 B
build/upload-requests-modal.css	268 B
build/upload-requests-modal.js	801 B
build/view-upload-request-view-rtl.css	714 B
build/view-upload-request-view.css	716 B
build/view-upload-request.js	16.8 kB
build/vips.worker.js	42.1 kB

_{compressed-size-action}

[swissspidy]

Unfortunately Twitter embeds don't work yet, https://platform.twitter.com/widgets.js doesn't send the necessary headers to work with cross-origin isolation.

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

[swissspidy]

Explanation from the Chrome issues tab:

Because your site has the Cross-Origin Embedder Policy (COEP) enabled, each resource must specify a suitable Cross-Origin Resource Policy (CORP). This behavior prevents a document from loading cross-origin resources which don’t > explicitly grant permission to be loaded.

To solve this, add the following to the resource’ response header:

• Cross-Origin-Resource-Policy: same-site if the resource and your site are served from the same site.
• Cross-Origin-Resource-Policy: cross-origin if the resource is served from another location than your website.
  ⚠️ If you set this header, any website can embed this resource.

Alternatively, the document can use the variant: Cross-Origin-Embedder-Policy: credentialless instead of require-corp. It allows loading the resource, despite the missing CORP header, at the cost of requesting it without credentials like Cookies.

Cross-Origin-Embedder-Policy: credentialless is interesting as it's at least supported by Firefox and Chrome.

Unfortunately it does not make the Twitter embed work. widgets.js will be loaded, but after that it seems to silently fail.
In the DOM somewhere it says "platform.twitter.com refused to connect.

There is this https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fmexp.local iframe that is not loading. Weirdly with the same recommendation about Cross-Origin-Embedder-Policy: credentialless despite that being set.

[swissspidy]

WICG/anonymous-iframe#14 gave me the right idea:

The sandbox iframe should be credentialless, but the tweet script itself should not be modified.

Tweet embeds are working now!

[swissspidy]

Just to clarify: this is only for Chrome and browsers that support credentialless, so the twitter embed is still broken in Safari and Firefox.

See https://developer.chrome.com/blog/iframe-credentialless

[adamziel]

Good explorations here @swissspidy! TIL about Cross-Origin-Embedder-Policy: credentialless. It seems like the cross origin separation is still settling down – I wonder how these platforms will adjust their embeds over time.