diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a6020c19660eae..8f3c7c4eb10293 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -38,6 +38,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" ([#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)). - `FocalPointPicker`: End a drag when the pointer is released outside the control, including over the editor canvas ([#83348](https://github.com/WordPress/gutenberg/pull/83348)). - `ContentEditableControl`: Keep a disabled field focusable (out of the tab order), so a field disabled while it has focus keeps it instead of dropping focus on the body ([#84083](https://github.com/WordPress/gutenberg/pull/84083)). 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, 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,