From de4a1a1d882d45fdf84e683be6821ad93a7c558b Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Fri, 2 Oct 2026 11:56:44 +0530 Subject: [PATCH 1/3] SandBox: Fix YouTube embed previews failing in Safari --- packages/components/CHANGELOG.md | 1 + packages/components/src/sandbox/index.tsx | 11 +++++++++++ 2 files changed, 12 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index bfeba66abf52ae..1c57e2f06fdee3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -34,6 +34,7 @@ - `BorderControl`, `BorderBoxControl`: Stop offering `%` as a width unit, since `border-width` does not accept percentages. A width already set in `%` keeps showing its unit ([#83492](https://github.com/WordPress/gutenberg/pull/83492)). - `UnitControl`: After clearing a value whose unit is not in `units`, give the next typed value the unit shown in the select instead of the cleared one ([#83492](https://github.com/WordPress/gutenberg/pull/83492)). - `ResizableBox`: Update `re-resizable` to `6.11.2`, which supports React 18 and renders the top and left handles before the content so focus order matches visual order ([#83754](https://github.com/WordPress/gutenberg/pull/83754)). +- `SandBox`: Send the page URL as the referrer from iframes inside `allowSameOrigin` sandboxes in Safari, fixing embed previews that require a referrer, such as YouTube's "Error 153" ([#76644](https://github.com/WordPress/gutenberg/pull/76644)). - `PaletteEdit`: Keep an item's slug when it is renamed, so blocks and styles that reference the preset keep working ([#83750](https://github.com/WordPress/gutenberg/pull/83750)). ### Internal diff --git a/packages/components/src/sandbox/index.tsx b/packages/components/src/sandbox/index.tsx index 4257cfc7ea28b2..214d46b5614eba 100644 --- a/packages/components/src/sandbox/index.tsx +++ b/packages/components/src/sandbox/index.tsx @@ -437,6 +437,17 @@ function SameOriginSandBox( { // was loaded over the network, so DOM creation and mutation, script // execution, etc. all work as expected. contentDocument.open(); + // Nested iframes should send this page's URL as their `Referer`, which + // YouTube requires. Safari sends none after `open()` until the URL is + // set again with `replaceState()`. Firefox throws here but already + // sends the referrer. See https://bugs.webkit.org/show_bug.cgi?id=169846. + try { + contentDocument.defaultView?.history.replaceState( + null, + '', + window.location.href + ); + } catch {} contentDocument.write( buildSandBoxDocument( { html, From 3e3b2ac9f229f28af7abb2adc39325724ee82da1 Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Fri, 2 Oct 2026 12:27:17 +0530 Subject: [PATCH 2/3] Update SandBox changelog reference --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1c57e2f06fdee3..059aa353af0275 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -34,7 +34,7 @@ - `BorderControl`, `BorderBoxControl`: Stop offering `%` as a width unit, since `border-width` does not accept percentages. A width already set in `%` keeps showing its unit ([#83492](https://github.com/WordPress/gutenberg/pull/83492)). - `UnitControl`: After clearing a value whose unit is not in `units`, give the next typed value the unit shown in the select instead of the cleared one ([#83492](https://github.com/WordPress/gutenberg/pull/83492)). - `ResizableBox`: Update `re-resizable` to `6.11.2`, which supports React 18 and renders the top and left handles before the content so focus order matches visual order ([#83754](https://github.com/WordPress/gutenberg/pull/83754)). -- `SandBox`: Send the page URL as the referrer from iframes inside `allowSameOrigin` sandboxes in Safari, fixing embed previews that require a referrer, such as YouTube's "Error 153" ([#76644](https://github.com/WordPress/gutenberg/pull/76644)). +- `SandBox`: Send the page URL as the referrer from iframes inside `allowSameOrigin` sandboxes in Safari, fixing embed previews that require a referrer, such as YouTube's "Error 153" ([#84014](https://github.com/WordPress/gutenberg/pull/84014)). - `PaletteEdit`: Keep an item's slug when it is renamed, so blocks and styles that reference the preset keep working ([#83750](https://github.com/WordPress/gutenberg/pull/83750)). ### Internal From ef0b3c6f0be576474697a571c12e6eb30383cca0 Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Tue, 6 Oct 2026 22:19:27 +0530 Subject: [PATCH 3/3] Tests: Cover the embed preview referrer in WebKit --- .../specs/editor/various/embedding.spec.js | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/test/e2e/specs/editor/various/embedding.spec.js b/test/e2e/specs/editor/various/embedding.spec.js index 06dd817b274a2e..0e7c7c2bd2b696 100644 --- a/test/e2e/specs/editor/various/embedding.spec.js +++ b/test/e2e/specs/editor/various/embedding.spec.js @@ -150,6 +150,33 @@ test.describe( 'Embedding content', () => { ).toHaveAttribute( 'title', 'Embedded content from cloudup.com' ); } ); + // See https://github.com/WordPress/gutenberg/issues/73288. + test( 'should send a referrer from iframes inside embed previews @webkit', async ( { + page, + embedUtils, + } ) => { + await embedUtils.interceptRequests( { + 'https://www.youtube.com/watch?v=lXMskKTw3Bc': { + ...MOCK_EMBED_VIDEO_SUCCESS_RESPONSE, + html: '', + }, + } ); + const embedRequest = page.waitForRequest( + 'https://www.youtube.com/embed/lXMskKTw3Bc' + ); + await page.route( 'https://www.youtube.com/embed/**', ( route ) => + route.fulfill( { contentType: 'text/html', body: '' } ) + ); + + await embedUtils.insertEmbed( + 'https://www.youtube.com/watch?v=lXMskKTw3Bc' + ); + + expect( await ( await embedRequest ).headerValue( 'referer' ) ).toBe( + `${ new URL( page.url() ).origin }/` + ); + } ); + test( 'should allow the user to convert unembeddable URLs to a paragraph with a link in it', async ( { editor, embedUtils,