From 32796244d3c1af9f5a77e45ae271379caaff13a2 Mon Sep 17 00:00:00 2001
From: Alec Geatches <alec.geatches@automattic.com>
Date: Thu, 9 Apr 2026 12:21:06 -0600
Subject: [PATCH 1/7] Remove sandbox "allow-same-origin" attribute, use srcDoc
 instead

---
 packages/components/src/sandbox/index.tsx     | 89 ++++---------------
 .../components/src/sandbox/test/index.tsx     | 88 +++++++++++++-----
 2 files changed, 79 insertions(+), 98 deletions(-)

diff --git a/packages/components/src/sandbox/index.tsx b/packages/components/src/sandbox/index.tsx
index 1cc4652a70a6c6..47b549beb56e8a 100644
--- a/packages/components/src/sandbox/index.tsx
+++ b/packages/components/src/sandbox/index.tsx
@@ -6,6 +6,7 @@ import {
 	useRef,
 	useState,
 	useEffect,
+	useMemo,
 } from '@wordpress/element';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
 
@@ -137,44 +138,13 @@ function SandBox( {
 	const ref = useRef< HTMLIFrameElement >( null );
 	const [ width, setWidth ] = useState( 0 );
 	const [ height, setHeight ] = useState( 0 );
-
-	function isFrameAccessible() {
-		try {
-			return !! ref.current?.contentDocument?.body;
-		} catch {
-			return false;
-		}
-	}
-
-	function trySandBox( forceRerender = false ) {
-		if ( ! isFrameAccessible() ) {
-			return;
-		}
-
-		const { contentDocument, ownerDocument } =
-			ref.current as HTMLIFrameElement & {
-				contentDocument: Document;
-			};
-
-		if (
-			! forceRerender &&
-			null !==
-				contentDocument?.body.getAttribute(
-					'data-resizable-iframe-connected'
-				)
-		) {
-			return;
-		}
-
-		// Put the html snippet into a html document, and then write it to the iframe's document
-		// we can use this in the future to inject custom styles or scripts.
-		// Scripts go into the body rather than the head, to support embedded content such as Instagram
-		// that expect the scripts to be part of the body.
+	// Build the full HTML document as a string for the srcdoc attribute.
+	// This replaces the previous approach of writing to contentDocument,
+	// which required allow-same-origin on the sandbox iframe.
+	const srcDoc = useMemo( () => {
+		const lang = document.documentElement.lang;
 		const htmlDoc = (
-			<html
-				lang={ ownerDocument.documentElement.lang }
-				className={ type }
-			>
+			<html lang={ lang } className={ type }>
 				<head>
 					<title>{ title }</title>
 					<style dangerouslySetInnerHTML={ { __html: style } } />
@@ -203,25 +173,17 @@ function SandBox( {
 			</html>
 		);
 
-		// Writing the document like this makes it act in the same way as if it was
-		// loaded over the network, so DOM creation and mutation, script execution, etc.
-		// all work as expected.
-		contentDocument.open();
-		contentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );
-		contentDocument.close();
-	}
+		return '<!DOCTYPE html>' + renderToString( htmlDoc );
+	}, [ html, title, type, styles, scripts ] );
 
 	useEffect( () => {
-		trySandBox();
-
-		function tryNoForceSandBox() {
-			trySandBox( false );
-		}
-
 		function checkMessageForResize( event: MessageEvent ) {
 			const iframe = ref.current;
 
 			// Verify that the mounted element is the source of the message.
+			// iframe.contentWindow is accessible cross-origin as a
+			// WindowProxy reference, so this check still works without
+			// allow-same-origin.
 			if ( ! iframe || iframe.contentWindow !== event.source ) {
 				return;
 			}
@@ -245,46 +207,25 @@ function SandBox( {
 			setHeight( data.height );
 		}
 
-		const iframe = ref.current;
-		const defaultView = iframe?.ownerDocument?.defaultView;
-
-		// This used to be registered using <iframe onLoad={} />, but it made the iframe blank
-		// after reordering the containing block. See these two issues for more details:
-		// https://github.com/WordPress/gutenberg/issues/6146
-		// https://github.com/facebook/react/issues/18752
-		iframe?.addEventListener( 'load', tryNoForceSandBox, false );
+		const defaultView = ref.current?.ownerDocument?.defaultView;
 		defaultView?.addEventListener( 'message', checkMessageForResize );
 
 		return () => {
-			iframe?.removeEventListener( 'load', tryNoForceSandBox, false );
 			defaultView?.removeEventListener(
 				'message',
 				checkMessageForResize
 			);
 		};
-		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
-		// See https://github.com/WordPress/gutenberg/pull/44378
 	}, [] );
 
-	useEffect( () => {
-		trySandBox();
-		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
-		// See https://github.com/WordPress/gutenberg/pull/44378
-	}, [ title, styles, scripts ] );
-
-	useEffect( () => {
-		trySandBox( true );
-		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
-		// See https://github.com/WordPress/gutenberg/pull/44378
-	}, [ html, type ] );
-
 	return (
 		<iframe
 			ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
 			title={ title }
 			tabIndex={ tabIndex }
 			className="components-sandbox"
-			sandbox="allow-scripts allow-same-origin allow-presentation"
+			sandbox="allow-scripts allow-presentation"
+			srcDoc={ srcDoc }
 			onFocus={ onFocus }
 			width={ Math.ceil( width ) }
 			height={ Math.ceil( height ) }
diff --git a/packages/components/src/sandbox/test/index.tsx b/packages/components/src/sandbox/test/index.tsx
index e1a51814ecab61..bfcda85e871eff 100644
--- a/packages/components/src/sandbox/test/index.tsx
+++ b/packages/components/src/sandbox/test/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -16,10 +16,7 @@ import SandBox from '..';
 describe( 'SandBox', () => {
 	const TestWrapper = () => {
 		const [ html, setHtml ] = useState(
-			// MutationObserver implementation from JSDom does not work as intended
-			// with iframes so we need to ignore it for the time being.
-			'<script type="text/javascript">window.MutationObserver = null;</script>' +
-				'<iframe title="Mock Iframe" src="https://super.embed"></iframe>'
+			'<iframe title="Mock Iframe" src="https://super.embed"></iframe>'
 		);
 
 		const updateHtml = () => {
@@ -38,34 +35,77 @@ describe( 'SandBox', () => {
 		);
 	};
 
-	it( 'should rerender with new emdeded content if html prop changes', () => {
-		render( <TestWrapper /> );
+	it( 'should render with the correct sandbox attribute', () => {
+		render( <SandBox html="<p>Hello</p>" title="Test" /> );
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Test' );
+
+		expect( iframe ).toHaveAttribute(
+			'sandbox',
+			'allow-scripts allow-presentation'
+		);
+	} );
+
+	it( 'should set srcdoc with the provided html content', () => {
+		render( <SandBox html="<p>Hello</p>" title="Test Title" /> );
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Test Title' );
+		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
+
+		expect( srcDoc ).toContain( '<p>Hello</p>' );
+		expect( srcDoc ).toContain( '<title>Test Title</title>' );
+	} );
+
+	it( 'should include custom styles in srcdoc', () => {
+		render(
+			<SandBox
+				html="<p>Styled</p>"
+				title="Styled Test"
+				styles={ [ '.custom { color: red; }' ] }
+			/>
+		);
 
 		const iframe =
-			screen.getByTitle< HTMLIFrameElement >( 'SandBox Title' );
+			screen.getByTitle< HTMLIFrameElement >( 'Styled Test' );
+		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
 
-		if ( ! iframe.contentWindow ) {
-			throw new Error();
-		}
+		expect( srcDoc ).toContain( '.custom { color: red; }' );
+	} );
 
-		let sandboxedIframe = within(
-			iframe.contentWindow.document.body
-		).getByTitle( 'Mock Iframe' );
+	it( 'should include script tags in srcdoc', () => {
+		render(
+			<SandBox
+				html="<p>Script</p>"
+				title="Script Test"
+				scripts={ [ 'https://example.com/embed.js' ] }
+			/>
+		);
+
+		const iframe =
+			screen.getByTitle< HTMLIFrameElement >( 'Script Test' );
+		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
 
-		expect( sandboxedIframe ).toHaveAttribute(
-			'src',
-			'https://super.embed'
+		expect( srcDoc ).toContain(
+			'<script src="https://example.com/embed.js">'
 		);
+	} );
 
-		fireEvent.click( screen.getByRole( 'button' ) );
+	it( 'should update srcdoc when html prop changes', () => {
+		render( <TestWrapper /> );
 
-		sandboxedIframe = within(
-			iframe.contentWindow.document.body
-		).getByTitle( 'Mock Iframe' );
+		const iframe =
+			screen.getByTitle< HTMLIFrameElement >( 'SandBox Title' );
+
+		expect( iframe ).toHaveAttribute(
+			'srcdoc',
+			expect.stringContaining( 'https://super.embed' )
+		);
+
+		fireEvent.click( screen.getByRole( 'button' ) );
 
-		expect( sandboxedIframe ).toHaveAttribute(
-			'src',
-			'https://another.super.embed'
+		expect( iframe ).toHaveAttribute(
+			'srcdoc',
+			expect.stringContaining( 'https://another.super.embed' )
 		);
 	} );
 } );

From fdb839ddd330652fbb95e2d86f737b63e32dab2e Mon Sep 17 00:00:00 2001
From: Alec Geatches <alec.geatches@automattic.com>
Date: Thu, 9 Apr 2026 14:23:13 -0600
Subject: [PATCH 2/7] Add opt-in allowSameOrigin parameter, use it to fix
 embeds while keeping core/html locked down

---
 .../block-library/src/cover/edit/index.js     | 10 +++++++-
 .../block-library/src/embed/embed-preview.js  | 11 +++++----
 packages/components/src/sandbox/index.tsx     |  6 ++++-
 .../components/src/sandbox/test/index.tsx     | 23 ++++++++++++++++++-
 packages/components/src/sandbox/types.ts      | 11 +++++++++
 5 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index a8aee8b4468cb4..060be347b26a5b 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -191,7 +191,14 @@ function CoverEdit( {
 			} );
 		} )();
 		// Update the block only when the featured image changes.
-	}, [ mediaUrl ] );
+		// The other dependencies are stable references (dispatch actions / setters).
+	}, [
+		mediaUrl,
+		__unstableMarkNextChangeAsNotPersistent,
+		setAttributes,
+		setOverlayColor,
+		useFeaturedImage,
+	] );
 
 	// instead of destructuring the attributes
 	// we define the url and background type
@@ -703,6 +710,7 @@ function CoverEdit( {
 						style={ mediaStyle }
 					>
 						<SandBox
+							allowSameOrigin
 							html={ embedHtml }
 							title="Background video"
 							styles={ [
diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js
index c0c7d5942d1d78..4acad2c365fade 100644
--- a/packages/block-library/src/embed/embed-preview.js
+++ b/packages/block-library/src/embed/embed-preview.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { getPhotoHtml } from './util';
-
 /**
  * External dependencies
  */
@@ -17,6 +12,11 @@ import { BlockIcon } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import { getAuthority } from '@wordpress/url';
 
+/**
+ * Internal dependencies
+ */
+import { getPhotoHtml } from './util';
+
 /**
  * Internal dependencies
  */
@@ -75,6 +75,7 @@ export default function EmbedPreview( {
 		) : (
 			<div className="wp-block-embed__wrapper">
 				<SandBox
+					allowSameOrigin
 					html={ html }
 					scripts={ scripts }
 					title={ iframeTitle }
diff --git a/packages/components/src/sandbox/index.tsx b/packages/components/src/sandbox/index.tsx
index 47b549beb56e8a..2168da19abf879 100644
--- a/packages/components/src/sandbox/index.tsx
+++ b/packages/components/src/sandbox/index.tsx
@@ -127,6 +127,7 @@ const style = `
  * ```
  */
 function SandBox( {
+	allowSameOrigin = false,
 	html = '',
 	title = '',
 	type,
@@ -224,7 +225,10 @@ function SandBox( {
 			title={ title }
 			tabIndex={ tabIndex }
 			className="components-sandbox"
-			sandbox="allow-scripts allow-presentation"
+			sandbox={
+				'allow-scripts allow-presentation' +
+				( allowSameOrigin ? ' allow-same-origin' : '' )
+			}
 			srcDoc={ srcDoc }
 			onFocus={ onFocus }
 			width={ Math.ceil( width ) }
diff --git a/packages/components/src/sandbox/test/index.tsx b/packages/components/src/sandbox/test/index.tsx
index bfcda85e871eff..73a4888f645dbd 100644
--- a/packages/components/src/sandbox/test/index.tsx
+++ b/packages/components/src/sandbox/test/index.tsx
@@ -35,7 +35,7 @@ describe( 'SandBox', () => {
 		);
 	};
 
-	it( 'should render with the correct sandbox attribute', () => {
+	it( 'should not include allow-same-origin by default', () => {
 		render( <SandBox html="<p>Hello</p>" title="Test" /> );
 
 		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Test' );
@@ -44,6 +44,27 @@ describe( 'SandBox', () => {
 			'sandbox',
 			'allow-scripts allow-presentation'
 		);
+		expect( iframe.getAttribute( 'sandbox' ) ).not.toContain(
+			'allow-same-origin'
+		);
+	} );
+
+	it( 'should include allow-same-origin when allowSameOrigin is true', () => {
+		render(
+			<SandBox
+				allowSameOrigin
+				html="<p>Embed</p>"
+				title="Same Origin Test"
+			/>
+		);
+
+		const iframe =
+			screen.getByTitle< HTMLIFrameElement >( 'Same Origin Test' );
+
+		expect( iframe ).toHaveAttribute(
+			'sandbox',
+			'allow-scripts allow-presentation allow-same-origin'
+		);
 	} );
 
 	it( 'should set srcdoc with the provided html content', () => {
diff --git a/packages/components/src/sandbox/types.ts b/packages/components/src/sandbox/types.ts
index 76f98da45c8c63..416937b296724b 100644
--- a/packages/components/src/sandbox/types.ts
+++ b/packages/components/src/sandbox/types.ts
@@ -1,4 +1,15 @@
 export type SandBoxProps = {
+	/**
+	 * Whether to include `allow-same-origin` in the iframe's sandbox
+	 * attribute. When true, nested iframes (such as third-party embeds)
+	 * can access their own origin's cookies and storage.
+	 *
+	 * Only enable this for content that is NOT directly user-controlled,
+	 * such as server-fetched oEmbed previews.
+	 *
+	 * @default false
+	 */
+	allowSameOrigin?: boolean;
 	/**
 	 * The HTML to render in the body of the iframe document.
 	 *

From d07656394c9797b9dba781e4553b2a213654a700 Mon Sep 17 00:00:00 2001
From: Alec Geatches <alec.geatches@automattic.com>
Date: Thu, 9 Apr 2026 14:54:55 -0600
Subject: [PATCH 3/7] Fix formatting

---
 packages/components/src/sandbox/test/index.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/sandbox/test/index.tsx b/packages/components/src/sandbox/test/index.tsx
index 73a4888f645dbd..a9d91d82cef398 100644
--- a/packages/components/src/sandbox/test/index.tsx
+++ b/packages/components/src/sandbox/test/index.tsx
@@ -86,8 +86,7 @@ describe( 'SandBox', () => {
 			/>
 		);
 
-		const iframe =
-			screen.getByTitle< HTMLIFrameElement >( 'Styled Test' );
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Styled Test' );
 		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
 
 		expect( srcDoc ).toContain( '.custom { color: red; }' );
@@ -102,8 +101,7 @@ describe( 'SandBox', () => {
 			/>
 		);
 
-		const iframe =
-			screen.getByTitle< HTMLIFrameElement >( 'Script Test' );
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Script Test' );
 		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
 
 		expect( srcDoc ).toContain(

From e7c08f6258de226147778f10f36f1cb9ad6d52f2 Mon Sep 17 00:00:00 2001
From: Alec Geatches <alec.geatches@automattic.com>
Date: Thu, 9 Apr 2026 15:05:22 -0600
Subject: [PATCH 4/7] Use contentDocument.write() when allowSameOrigin is true
 to avoid referer errors

---
 packages/components/src/sandbox/index.tsx     | 58 ++++++++++++++++---
 .../components/src/sandbox/test/index.tsx     | 18 ------
 2 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/packages/components/src/sandbox/index.tsx b/packages/components/src/sandbox/index.tsx
index 2168da19abf879..8c5a5474cfe4a0 100644
--- a/packages/components/src/sandbox/index.tsx
+++ b/packages/components/src/sandbox/index.tsx
@@ -7,6 +7,7 @@ import {
 	useState,
 	useEffect,
 	useMemo,
+	useCallback,
 } from '@wordpress/element';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
 
@@ -139,10 +140,12 @@ function SandBox( {
 	const ref = useRef< HTMLIFrameElement >( null );
 	const [ width, setWidth ] = useState( 0 );
 	const [ height, setHeight ] = useState( 0 );
-	// Build the full HTML document as a string for the srcdoc attribute.
-	// This replaces the previous approach of writing to contentDocument,
-	// which required allow-same-origin on the sandbox iframe.
-	const srcDoc = useMemo( () => {
+
+	/**
+	 * Renders the HTML document string used for both the srcdoc attribute
+	 * and the contentDocument.write() approaches.
+	 */
+	const renderDocument = useCallback( () => {
 		const lang = document.documentElement.lang;
 		const htmlDoc = (
 			<html lang={ lang } className={ type }>
@@ -177,6 +180,44 @@ function SandBox( {
 		return '<!DOCTYPE html>' + renderToString( htmlDoc );
 	}, [ html, title, type, styles, scripts ] );
 
+	// For the isolated (non-same-origin) path, build the document as a
+	// string for the srcdoc attribute. This avoids needing same-origin
+	// access to write to contentDocument.
+	const srcDoc = useMemo( () => {
+		if ( allowSameOrigin ) {
+			return undefined;
+		}
+		return renderDocument();
+	}, [ allowSameOrigin, renderDocument ] );
+
+	// For the same-origin path, write to contentDocument directly.
+	// This preserves the parent page's URL as the iframe's document
+	// URL, which provides a valid Referer header for nested iframes
+	// (required by providers like YouTube).
+	useEffect( () => {
+		if ( ! allowSameOrigin ) {
+			return;
+		}
+
+		const iframe = ref.current;
+		if ( ! iframe ) {
+			return;
+		}
+
+		try {
+			const { contentDocument } = iframe;
+			if ( ! contentDocument ) {
+				return;
+			}
+
+			contentDocument.open();
+			contentDocument.write( renderDocument() );
+			contentDocument.close();
+		} catch {
+			// If the iframe is not accessible, do nothing.
+		}
+	}, [ allowSameOrigin, renderDocument ] );
+
 	useEffect( () => {
 		function checkMessageForResize( event: MessageEvent ) {
 			const iframe = ref.current;
@@ -219,16 +260,17 @@ function SandBox( {
 		};
 	}, [] );
 
+	const sandboxAttr =
+		'allow-scripts allow-presentation' +
+		( allowSameOrigin ? ' allow-same-origin' : '' );
+
 	return (
 		<iframe
 			ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
 			title={ title }
 			tabIndex={ tabIndex }
 			className="components-sandbox"
-			sandbox={
-				'allow-scripts allow-presentation' +
-				( allowSameOrigin ? ' allow-same-origin' : '' )
-			}
+			sandbox={ sandboxAttr }
 			srcDoc={ srcDoc }
 			onFocus={ onFocus }
 			width={ Math.ceil( width ) }
diff --git a/packages/components/src/sandbox/test/index.tsx b/packages/components/src/sandbox/test/index.tsx
index a9d91d82cef398..70af01fd094f2a 100644
--- a/packages/components/src/sandbox/test/index.tsx
+++ b/packages/components/src/sandbox/test/index.tsx
@@ -49,24 +49,6 @@ describe( 'SandBox', () => {
 		);
 	} );
 
-	it( 'should include allow-same-origin when allowSameOrigin is true', () => {
-		render(
-			<SandBox
-				allowSameOrigin
-				html="<p>Embed</p>"
-				title="Same Origin Test"
-			/>
-		);
-
-		const iframe =
-			screen.getByTitle< HTMLIFrameElement >( 'Same Origin Test' );
-
-		expect( iframe ).toHaveAttribute(
-			'sandbox',
-			'allow-scripts allow-presentation allow-same-origin'
-		);
-	} );
-
 	it( 'should set srcdoc with the provided html content', () => {
 		render( <SandBox html="<p>Hello</p>" title="Test Title" /> );
 

From 5a1af1c288c942e947b25771ec1d095d015c20a1 Mon Sep 17 00:00:00 2001
From: Alec Geatches <alec.geatches@automattic.com>
Date: Mon, 13 Apr 2026 12:14:47 -0700
Subject: [PATCH 5/7] Refactor new same-origin disallowed sandbox into
 subcomponent for easier reading

---
 packages/components/src/sandbox/index.tsx | 299 +++++++++++++++++-----
 1 file changed, 235 insertions(+), 64 deletions(-)

diff --git a/packages/components/src/sandbox/index.tsx b/packages/components/src/sandbox/index.tsx
index 8c5a5474cfe4a0..22fdd602a661f4 100644
--- a/packages/components/src/sandbox/index.tsx
+++ b/packages/components/src/sandbox/index.tsx
@@ -7,7 +7,6 @@ import {
 	useState,
 	useEffect,
 	useMemo,
-	useCallback,
 } from '@wordpress/element';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
 
@@ -16,6 +15,8 @@ import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
  */
 import type { SandBoxProps } from './types';
 
+type SandBoxContentProps = Omit< SandBoxProps, 'allowSameOrigin' >;
+
 const observeAndResizeJS = function () {
 	const { MutationObserver } = window;
 
@@ -117,18 +118,154 @@ const style = `
 `;
 
 /**
- * This component provides an isolated environment for arbitrary HTML via iframes.
+ * Builds the full HTML document string for the sandbox iframe content.
+ */
+function buildSandBoxDocument( {
+	html,
+	title,
+	type,
+	styles,
+	scripts,
+}: {
+	html: string;
+	title: string;
+	type?: string;
+	styles: string[];
+	scripts: string[];
+} ): string {
+	const htmlDoc = (
+		<html lang={ document.documentElement.lang } className={ type }>
+			<head>
+				<title>{ title }</title>
+				<style dangerouslySetInnerHTML={ { __html: style } } />
+				{ styles.map( ( rules, i ) => (
+					<style
+						key={ i }
+						dangerouslySetInnerHTML={ { __html: rules } }
+					/>
+				) ) }
+			</head>
+			<body
+				data-resizable-iframe-connected="data-resizable-iframe-connected"
+				className={ type }
+			>
+				<div dangerouslySetInnerHTML={ { __html: html } } />
+				<script
+					type="text/javascript"
+					dangerouslySetInnerHTML={ {
+						__html: `(${ observeAndResizeJS.toString() })();`,
+					} }
+				/>
+				{ scripts.map( ( src ) => (
+					<script key={ src } src={ src } />
+				) ) }
+			</body>
+		</html>
+	);
+
+	return '<!DOCTYPE html>' + renderToString( htmlDoc );
+}
+
+/**
+ * Isolated sandbox that uses the `srcdoc` attribute to render content
+ * without `allow-same-origin`. This is the default for user-controlled
+ * content (e.g., the HTML block) where same-origin access would be a
+ * security risk.
  *
- * ```jsx
- * import { SandBox } from '@wordpress/components';
+ * Because `srcdoc` is a declarative attribute, the browser automatically
+ * re-renders the content when the iframe is moved in the DOM (e.g.,
+ * block reordering), so no `load` event listener is needed.
+ */
+function IsolatedSandBox( {
+	html = '',
+	title = '',
+	type,
+	styles = [],
+	scripts = [],
+	onFocus,
+	tabIndex,
+}: SandBoxContentProps ) {
+	const ref = useRef< HTMLIFrameElement >( null );
+	const [ width, setWidth ] = useState( 0 );
+	const [ height, setHeight ] = useState( 0 );
+
+	const srcDoc = useMemo(
+		() => buildSandBoxDocument( { html, title, type, styles, scripts } ),
+		[ html, title, type, styles, scripts ]
+	);
+
+	useEffect( () => {
+		function checkMessageForResize( event: MessageEvent ) {
+			const iframe = ref.current;
+
+			// Verify that the mounted element is the source of the message.
+			// iframe.contentWindow is accessible cross-origin as a
+			// WindowProxy reference, so this check still works without
+			// allow-same-origin.
+			if ( ! iframe || iframe.contentWindow !== event.source ) {
+				return;
+			}
+
+			// Attempt to parse the message data as JSON if passed as string.
+			let data = event.data || {};
+
+			if ( 'string' === typeof data ) {
+				try {
+					data = JSON.parse( data );
+				} catch {}
+			}
+
+			// Update the state only if the message is formatted as we expect,
+			// i.e. as an object with a 'resize' action.
+			if ( 'resize' !== data.action ) {
+				return;
+			}
+
+			setWidth( data.width );
+			setHeight( data.height );
+		}
+
+		const defaultView = ref.current?.ownerDocument?.defaultView;
+		defaultView?.addEventListener( 'message', checkMessageForResize );
+
+		return () => {
+			defaultView?.removeEventListener(
+				'message',
+				checkMessageForResize
+			);
+		};
+	}, [] );
+
+	return (
+		<iframe
+			ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
+			title={ title }
+			tabIndex={ tabIndex }
+			className="components-sandbox"
+			sandbox="allow-scripts allow-presentation"
+			srcDoc={ srcDoc }
+			onFocus={ onFocus }
+			width={ Math.ceil( width ) }
+			height={ Math.ceil( height ) }
+		/>
+	);
+}
+
+/**
+ * Same-origin sandbox that writes to `contentDocument` directly. This
+ * preserves the parent page's URL as the iframe's document URL, which
+ * provides a valid Referer header for nested iframes (required by
+ * providers like YouTube).
  *
- * const MySandBox = () => (
- * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
- * );
- * ```
+ * Only used when `allowSameOrigin` is true — i.e., for server-fetched
+ * oEmbed previews that are not directly user-controlled.
+ *
+ * This implementation is intentionally kept close to the original
+ * pre-refactor code to preserve past bugfixes:
+ * - load listener for iframe re-initialization after DOM moves (#21916)
+ * - forceRerender guard to avoid unnecessary full rewrites (#20176)
  */
-function SandBox( {
-	allowSameOrigin = false,
+function SameOriginSandBox( {
 	html = '',
 	title = '',
 	type,
@@ -136,19 +273,48 @@ function SandBox( {
 	scripts = [],
 	onFocus,
 	tabIndex,
-}: SandBoxProps ) {
+}: SandBoxContentProps ) {
 	const ref = useRef< HTMLIFrameElement >( null );
 	const [ width, setWidth ] = useState( 0 );
 	const [ height, setHeight ] = useState( 0 );
 
-	/**
-	 * Renders the HTML document string used for both the srcdoc attribute
-	 * and the contentDocument.write() approaches.
-	 */
-	const renderDocument = useCallback( () => {
-		const lang = document.documentElement.lang;
+	function isFrameAccessible() {
+		try {
+			return !! ref.current?.contentDocument?.body;
+		} catch {
+			return false;
+		}
+	}
+
+	function trySandBox( forceRerender = false ) {
+		if ( ! isFrameAccessible() ) {
+			return;
+		}
+
+		const { contentDocument, ownerDocument } =
+			ref.current as HTMLIFrameElement & {
+				contentDocument: Document;
+			};
+
+		if (
+			! forceRerender &&
+			null !==
+				contentDocument?.body.getAttribute(
+					'data-resizable-iframe-connected'
+				)
+		) {
+			return;
+		}
+
+		// Put the html snippet into a html document, and then write it to the iframe's document
+		// we can use this in the future to inject custom styles or scripts.
+		// Scripts go into the body rather than the head, to support embedded content such as Instagram
+		// that expect the scripts to be part of the body.
 		const htmlDoc = (
-			<html lang={ lang } className={ type }>
+			<html
+				lang={ ownerDocument.documentElement.lang }
+				className={ type }
+			>
 				<head>
 					<title>{ title }</title>
 					<style dangerouslySetInnerHTML={ { __html: style } } />
@@ -177,55 +343,25 @@ function SandBox( {
 			</html>
 		);
 
-		return '<!DOCTYPE html>' + renderToString( htmlDoc );
-	}, [ html, title, type, styles, scripts ] );
-
-	// For the isolated (non-same-origin) path, build the document as a
-	// string for the srcdoc attribute. This avoids needing same-origin
-	// access to write to contentDocument.
-	const srcDoc = useMemo( () => {
-		if ( allowSameOrigin ) {
-			return undefined;
-		}
-		return renderDocument();
-	}, [ allowSameOrigin, renderDocument ] );
+		// Writing the document like this makes it act in the same way as if it was
+		// loaded over the network, so DOM creation and mutation, script execution, etc.
+		// all work as expected.
+		contentDocument.open();
+		contentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );
+		contentDocument.close();
+	}
 
-	// For the same-origin path, write to contentDocument directly.
-	// This preserves the parent page's URL as the iframe's document
-	// URL, which provides a valid Referer header for nested iframes
-	// (required by providers like YouTube).
 	useEffect( () => {
-		if ( ! allowSameOrigin ) {
-			return;
-		}
+		trySandBox();
 
-		const iframe = ref.current;
-		if ( ! iframe ) {
-			return;
-		}
-
-		try {
-			const { contentDocument } = iframe;
-			if ( ! contentDocument ) {
-				return;
-			}
-
-			contentDocument.open();
-			contentDocument.write( renderDocument() );
-			contentDocument.close();
-		} catch {
-			// If the iframe is not accessible, do nothing.
+		function tryNoForceSandBox() {
+			trySandBox( false );
 		}
-	}, [ allowSameOrigin, renderDocument ] );
 
-	useEffect( () => {
 		function checkMessageForResize( event: MessageEvent ) {
 			const iframe = ref.current;
 
 			// Verify that the mounted element is the source of the message.
-			// iframe.contentWindow is accessible cross-origin as a
-			// WindowProxy reference, so this check still works without
-			// allow-same-origin.
 			if ( ! iframe || iframe.contentWindow !== event.source ) {
 				return;
 			}
@@ -249,20 +385,38 @@ function SandBox( {
 			setHeight( data.height );
 		}
 
-		const defaultView = ref.current?.ownerDocument?.defaultView;
+		const iframe = ref.current;
+		const defaultView = iframe?.ownerDocument?.defaultView;
+
+		// This used to be registered using <iframe onLoad={} />, but it made the iframe blank
+		// after reordering the containing block. See these two issues for more details:
+		// https://github.com/WordPress/gutenberg/issues/6146
+		// https://github.com/facebook/react/issues/18752
+		iframe?.addEventListener( 'load', tryNoForceSandBox, false );
 		defaultView?.addEventListener( 'message', checkMessageForResize );
 
 		return () => {
+			iframe?.removeEventListener( 'load', tryNoForceSandBox, false );
 			defaultView?.removeEventListener(
 				'message',
 				checkMessageForResize
 			);
 		};
+		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
 	}, [] );
 
-	const sandboxAttr =
-		'allow-scripts allow-presentation' +
-		( allowSameOrigin ? ' allow-same-origin' : '' );
+	useEffect( () => {
+		trySandBox();
+		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+	}, [ title, styles, scripts ] );
+
+	useEffect( () => {
+		trySandBox( true );
+		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+	}, [ html, type ] );
 
 	return (
 		<iframe
@@ -270,8 +424,7 @@ function SandBox( {
 			title={ title }
 			tabIndex={ tabIndex }
 			className="components-sandbox"
-			sandbox={ sandboxAttr }
-			srcDoc={ srcDoc }
+			sandbox="allow-scripts allow-same-origin allow-presentation"
 			onFocus={ onFocus }
 			width={ Math.ceil( width ) }
 			height={ Math.ceil( height ) }
@@ -279,4 +432,22 @@ function SandBox( {
 	);
 }
 
+/**
+ * This component provides an isolated environment for arbitrary HTML via iframes.
+ *
+ * ```jsx
+ * import { SandBox } from '@wordpress/components';
+ *
+ * const MySandBox = () => (
+ * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
+ * );
+ * ```
+ */
+function SandBox( { allowSameOrigin = false, ...contentProps }: SandBoxProps ) {
+	if ( allowSameOrigin ) {
+		return <SameOriginSandBox { ...contentProps } />;
+	}
+	return <IsolatedSandBox { ...contentProps } />;
+}
+
 export default SandBox;

From 3a908d6a36f50e8b678f894888b8e3ef3fd38a59 Mon Sep 17 00:00:00 2001
From: Alec Geatches <alec.geatches@automattic.com>
Date: Mon, 13 Apr 2026 13:57:43 -0700
Subject: [PATCH 6/7] Add CHANGELOG entry

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 3bee0610472802..5eb8a2bf055eef 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -14,6 +14,7 @@
 
 ### Enhancements
 
+-   `Sandbox`: Add `allowSameOrigin` prop to opt in to `allow-same-origin` on the iframe sandbox. The default is now `false`, removing same-origin access for user-controlled content like the Custom HTML block ([#77212](https://github.com/WordPress/gutenberg/pull/77212)).
 -   `FormToggle`: Update disabled styles [#77208](https://github.com/WordPress/gutenberg/pull/77208).
 -   `RadioControl`: Add support for disabled radio group [#77127](https://github.com/WordPress/gutenberg/pull/77127).
 -   `AlignmentMatrixControl`, `Button`, `Calendar`, `CheckboxControl`, `CircularOptionPicker`, `ColorPalette`, `DropdownMenu`, `FormToggle`, `FormTokenField`, `RadioControl`, `Snackbar`, `TabPanel`, `ToggleControl`: Use `--wpds-cursor-control` for interactive cursor styling ([#76786](https://github.com/WordPress/gutenberg/pull/76786)).

From 98d2802888f580d4c970460e8ddc1fda6f9cdf9a Mon Sep 17 00:00:00 2001
From: Alec Geatches <alec.geatches@automattic.com>
Date: Tue, 14 Apr 2026 09:24:28 -0700
Subject: [PATCH 7/7] Reattach resize listener on iframe load event

---
 packages/components/src/sandbox/index.tsx | 32 +++++++++++++++++++----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/sandbox/index.tsx b/packages/components/src/sandbox/index.tsx
index 22fdd602a661f4..b5b2f55753098f 100644
--- a/packages/components/src/sandbox/index.tsx
+++ b/packages/components/src/sandbox/index.tsx
@@ -175,6 +175,8 @@ function buildSandBoxDocument( {
  * Because `srcdoc` is a declarative attribute, the browser automatically
  * re-renders the content when the iframe is moved in the DOM (e.g.,
  * block reordering), so no `load` event listener is needed.
+ * The `message` listener is re-synced on every `load` so
+ * it follows the iframe if it's reparented into a different document.
  */
 function IsolatedSandBox( {
 	html = '',
@@ -195,9 +197,12 @@ function IsolatedSandBox( {
 	);
 
 	useEffect( () => {
-		function checkMessageForResize( event: MessageEvent ) {
-			const iframe = ref.current;
+		const iframe = ref.current;
+		if ( ! iframe ) {
+			return;
+		}
 
+		function checkMessageForResize( event: MessageEvent ) {
 			// Verify that the mounted element is the source of the message.
 			// iframe.contentWindow is accessible cross-origin as a
 			// WindowProxy reference, so this check still works without
@@ -225,11 +230,28 @@ function IsolatedSandBox( {
 			setHeight( data.height );
 		}
 
-		const defaultView = ref.current?.ownerDocument?.defaultView;
-		defaultView?.addEventListener( 'message', checkMessageForResize );
+		let currentView: Window | null = null;
+		function syncListener() {
+			const view = iframe?.ownerDocument?.defaultView ?? null;
+			if ( view === currentView ) {
+				return;
+			}
+
+			currentView?.removeEventListener(
+				'message',
+				checkMessageForResize
+			);
+
+			currentView = view;
+			currentView?.addEventListener( 'message', checkMessageForResize );
+		}
+
+		syncListener();
+		iframe.addEventListener( 'load', syncListener );
 
 		return () => {
-			defaultView?.removeEventListener(
+			iframe.removeEventListener( 'load', syncListener );
+			currentView?.removeEventListener(
 				'message',
 				checkMessageForResize
 			);