diff --git a/packages/playground/remote/iframes-trap.js b/packages/playground/remote/iframes-trap.js
new file mode 100644
index 0000000000..21bbc4f598
--- /dev/null
+++ b/packages/playground/remote/iframes-trap.js
@@ -0,0 +1,545 @@
+'use strict';
+
+/**
+ * Controlled iframe bootstrap.
+ * Converts srcdoc/blob/data/about:blank iframes into real navigations that stay
+ * under the page's Service Worker control. Also rescues already-inserted
+ * same-origin iframes by virtualizing their DOM and reloading through a loader.
+ *
+ * This file is loaded in multiple contexts (loader, wp-admin, etc.). It must be
+ * safe to include more than once, so we guard on a global flag and avoid
+ * top-level const redefinitions.
+ */
+function setupIframesTrap() {
+	// Document.prototype.write = function (html) {
+	// 	console.log('intercepting document.write', html);
+	// 	// return Native.write.call(this, html);
+	// };
+
+	if (!window.__controlled_iframes_loaded__) {
+		window.__controlled_iframes_loaded__ = true;
+
+		const iframeCacheBucket = 'iframe-virtual-docs-v1';
+
+		// Best-effort synchronous scope guess so we can seed src immediately in createElement.
+		const inferredSiteScope =
+			document.currentScript?.dataset.scope ??
+			location.pathname.match(/^\/scope:[^/]+/)?.[0] ??
+			'';
+
+		// Authoritative scope from the SW registration (async fallback to sync guess).
+		const scopePromise = (async () => {
+			try {
+				const reg = await navigator.serviceWorker.ready;
+				return new URL(reg.scope).pathname.replace(/\/$/, '');
+			} catch {
+				return inferredSiteScope.replace(/\/$/, '');
+			}
+		})();
+
+		const scopedPaths = (scope) => {
+			const base = scope.replace(/\/$/, '');
+			return {
+				VIRTUAL_PREFIX: `${base}/__iframes/`,
+				LOADER_PATH: `${base}/wp-includes/empty.html`,
+			};
+		};
+
+		// Snapshot natives before we patch prototypes.
+		const Native = {
+			write: Document.prototype.write,
+			createElement: Document.prototype.createElement,
+			setAttribute: Element.prototype.setAttribute,
+			iframeSrc: Object.getOwnPropertyDescriptor(
+				HTMLIFrameElement.prototype,
+				'src'
+			),
+			iframeSrcdoc: Object.getOwnPropertyDescriptor(
+				HTMLIFrameElement.prototype,
+				'srcdoc'
+			),
+			src: Object.getOwnPropertyDescriptor(
+				HTMLIFrameElement.prototype,
+				'src'
+			),
+			srcdoc: Object.getOwnPropertyDescriptor(
+				HTMLIFrameElement.prototype,
+				'srcdoc'
+			),
+			contentWindow: Object.getOwnPropertyDescriptor(
+				HTMLIFrameElement.prototype,
+				'contentWindow'
+			),
+			contentDocument: Object.getOwnPropertyDescriptor(
+				HTMLIFrameElement.prototype,
+				'contentDocument'
+			),
+		};
+
+		const setIframeSrc = (iframe, url) => {
+			if (Native.iframeSrc?.set) {
+				Native.iframeSrc.set.call(iframe, url);
+			} else {
+				Native.setAttribute.call(iframe, 'src', url);
+			}
+		};
+
+		const uid = () =>
+			`${Date.now().toString(36)}-${Math.random()
+				.toString(36)
+				.slice(2, 10)}`;
+
+		async function cacheIframeContents(id, html) {
+			const cache = await caches.open(iframeCacheBucket);
+			const scope = await scopePromise;
+			const { VIRTUAL_PREFIX } = scopedPaths(scope);
+			await cache.put(
+				`${VIRTUAL_PREFIX}${id}.html`,
+				new Response(html, {
+					headers: { 'Content-Type': 'text/html; charset=utf-8' },
+				})
+			);
+		}
+
+		async function toLoaderUrl({
+			id,
+			prettyUrl = '',
+			base = document.baseURI,
+		} = {}) {
+			const scope = await scopePromise;
+			const { LOADER_PATH } = scopedPaths(scope);
+			const queryString = new URLSearchParams({ base, url: prettyUrl });
+			if (id) {
+				queryString.set('id', id);
+			}
+			return `${LOADER_PATH}#${queryString.toString()}`;
+		}
+
+		async function rewriteSrcdoc(iframe, html, opts = {}) {
+			const id = uid();
+			await cacheIframeContents(id, html);
+			const url = await toLoaderUrl({ id, ...opts });
+			setIframeSrc(iframe, url);
+			iframe.setAttribute('data-controlled', '1');
+		}
+
+		async function rewriteDataOrBlob(el, url) {
+			const res = await fetch(url);
+			const html = await res.text();
+			await rewriteSrcdoc(el, html);
+		}
+
+		// --- Interceptors ---
+		Document.prototype.write = function (html) {
+			console.log('intercepting document.write', html);
+			// @TODO: parse etc.
+			// Ensure <base> is correctly set before writing HTML to the document
+			if (typeof html === 'string' && html.trim().length > 0) {
+				let baseHref = document.baseURI;
+				let baseTag = `<base href="${baseHref.replace(
+					/"/g,
+					'&quot;'
+				)}">`;
+				// Only inject <base> if one does not exist in the html being written
+				if (!/<base[\s\S]*?href[\s\S]*?=/.test(html)) {
+					// Try to insert right after <head>, or at the top if <head> not present
+					if (/<head[\s\S]*?>/i.test(html)) {
+						html = html.replace(
+							/(<head[\s\S]*?>)/i,
+							`$1${baseTag}`
+						);
+					} else {
+						html = baseTag + html;
+					}
+				}
+			}
+			return Native.write.call(this, html);
+		};
+
+		// Stash this realm's native createElement on both Document and HTMLDocument
+		// so other realms (or our own helpers) can find it without re-entering the wrapper.
+		for (const proto of [
+			Document.prototype,
+			HTMLDocument?.prototype,
+		].filter(Boolean)) {
+			if (!proto.__playground_native_createElement) {
+				Object.defineProperty(
+					proto,
+					'__playground_native_createElement',
+					{
+						value: Native.createElement,
+						configurable: true,
+					}
+				);
+			}
+		}
+
+		const createElementWrapper = function (...args) {
+			/**
+			 * Always call the native createElement belonging to the receiver's realm.
+			 * Using a cached native from a different realm triggers "Illegal invocation".
+			 */
+			const receiver = this ?? document;
+			// Same realm: safe to call our captured native.
+			if (receiver instanceof Document) {
+				return handleCreateElement(
+					callRealmCreateElement(receiver, args),
+					args
+				);
+			}
+
+			// Other realm: reach for that realm's native createElement if exposed.
+			const element = callRealmCreateElement(receiver, args);
+			return element;
+		};
+
+		function callRealmCreateElement(receiver, args) {
+			const attempts = [];
+
+			// 1) Receiver's own realm-native (if we, or that realm, stashed it).
+			const proto = receiver && Object.getPrototypeOf(receiver);
+			if (proto?.__playground_native_createElement) {
+				attempts.push(proto.__playground_native_createElement);
+			}
+
+			// 2) Receiver prototype's current createElement (native if that realm
+			// hasn't been patched yet; safe if it's not our wrapper).
+			if (
+				proto?.createElement &&
+				proto.createElement !== createElementWrapper
+			) {
+				attempts.push(proto.createElement);
+			}
+
+			// 3) Our own captured native for this realm.
+			attempts.push(Native.createElement);
+
+			// 4) Bound document.createElement as a last resort.
+			attempts.push(document.createElement.bind(document));
+
+			for (const fn of attempts) {
+				if (typeof fn !== 'function') {
+					continue;
+				}
+				try {
+					return Reflect.apply(fn, receiver, args);
+				} catch (e) {
+					// Try the next candidate.
+				}
+			}
+
+			throw new Error('createElement failed across all candidates');
+		}
+
+		function handleCreateElement(element, args) {
+			const tagName = args[0];
+			const options = args[1];
+			if (String(tagName).toLowerCase() === 'iframe') {
+				const iframe = element;
+				try {
+					// console.log(
+					// 	'intercepting iframe createElement',
+					// 	tagName,
+					// 	options
+					// );
+					const { LOADER_PATH } = scopedPaths(inferredSiteScope);
+					if (
+						!iframe.hasAttribute('src') &&
+						!iframe.hasAttribute('srcdoc')
+					) {
+						// console.log('initializing to loader', LOADER_PATH);
+						if (LOADER_PATH) {
+							// console.log('setting iframe src', LOADER_PATH);
+							const url = `${LOADER_PATH}#${new URLSearchParams({
+								base: document.baseURI,
+							}).toString()}`;
+							setIframeSrc(iframe, url);
+							iframe.setAttribute('data-controlled', '1');
+						}
+					} else {
+						const script = document.createElement('script');
+						script.src = `${LOADER_PATH}#${new URLSearchParams({
+							base: document.baseURI,
+						}).toString()}`;
+						iframe.contentDocument.head.prepend(script);
+					}
+					// On every iframe load, disable document.write in it
+					iframe.addEventListener('load', function () {
+						try {
+							if (
+								iframe.contentWindow &&
+								iframe.contentWindow.document
+							) {
+								iframe.contentWindow.document.write =
+									function () {
+										throw new Error(
+											'document.write is disabled in this iframe'
+										);
+									};
+							}
+						} catch (e) {
+							// Could be cross-origin or not ready, ignore
+						}
+					});
+				} catch (error) {
+					console.error('error setting iframe src', iframe);
+					console.error(error);
+					/* ignore */
+				}
+			}
+			return element;
+		}
+
+		// 1) createElement: seed blank iframes with a real loader src synchronously.
+		Document.prototype.createElement = createElementWrapper;
+
+		// 2) Attribute setter patch.
+		Element.prototype.setAttribute = function (name, value) {
+			if (this instanceof HTMLIFrameElement) {
+				const nameLower = name.toLowerCase();
+				const valueString = String(value);
+				if (nameLower === 'srcdoc') {
+					// console.log('intercepting iframe srcdoc', valueString);
+					void rewriteSrcdoc(this, valueString);
+					return;
+				}
+				if (nameLower === 'src') {
+					// console.log('intercepting iframe set src', valueString);
+					if (
+						valueString.startsWith('data:text/html') ||
+						valueString.startsWith('blob:')
+					) {
+						void rewriteDataOrBlob(this, valueString);
+						return;
+					}
+					if (
+						valueString === 'about:blank' ||
+						valueString === '' ||
+						valueString.startsWith('javascript:')
+					) {
+						// Treat javascript:/blank src as a request for a controlled, empty doc.
+						// We route it through the loader so the iframe is SW-controlled from
+						// the very first real navigation.
+						void rewriteSrcdoc(this, '<!doctype html>', {
+							base: document.baseURI,
+							prettyUrl: location.href,
+						});
+						return;
+					}
+				}
+			}
+			return Native.setAttribute.call(this, name, value);
+		};
+
+		Object.defineProperty(HTMLIFrameElement.prototype, 'src', {
+			configurable: true,
+			enumerable: Native.src?.enumerable ?? true,
+			get() {
+				return Native.src.get.call(this);
+			},
+			set(v) {
+				console.log('intercepting iframe src', v);
+				Element.prototype.setAttribute.call(this, 'src', String(v));
+			},
+		});
+
+		Object.defineProperty(HTMLIFrameElement.prototype, 'srcdoc', {
+			configurable: true,
+			enumerable: Native.srcdoc?.enumerable ?? true,
+			get() {
+				return Native.srcdoc.get.call(this);
+			},
+			set(v) {
+				console.log('intercepting iframe srcdoc', v);
+				Element.prototype.setAttribute.call(this, 'srcdoc', String(v));
+			},
+		});
+
+		Object.defineProperty(HTMLIFrameElement.prototype, 'contentWindow', {
+			configurable: true,
+			enumerable: Native.contentWindow?.enumerable ?? true,
+			get() {
+				// console.trace('intercepting iframe contentWindow get', this);
+				const iframe = this;
+				const contentWindow = Native.contentWindow.get.call(this);
+				if (contentWindow) {
+					// contentDocument may be undefined, so wait for iframe to load before injecting script
+					const injectScript = () => {
+						const doc =
+							contentWindow.document ||
+							contentWindow.contentDocument;
+						// console.log('pre inject script', doc);
+						if (doc && doc.head) {
+							// console.log('injecting script', setupIframesTrap);
+							// const script = document.createElement('script');
+							// script.src =
+							// 	setupIframesTrap + ';setupIframesTrap();';
+							// doc.head.prepend(script);
+						}
+					};
+					// attach event; contentWindow.frameElement is the <iframe>
+					const frame = contentWindow.frameElement;
+					if (frame) {
+						// If already loaded, inject immediately. Otherwise, onload.
+						if (
+							frame.contentDocument?.readyState === 'complete' ||
+							frame.contentDocument?.readyState === 'interactive'
+						) {
+							injectScript();
+						} else {
+							frame.addEventListener('load', injectScript, {
+								capture: true,
+								once: true,
+							});
+						}
+					}
+				}
+				return new Proxy(contentWindow, {
+					get(target, prop, receiver) {
+						if (prop === 'document') {
+							return iframe.contentDocument;
+						}
+						console.log('Get contentWindow property', prop);
+						return target[prop];
+					},
+				});
+			},
+			set(v) {
+				Element.prototype.setAttribute.call(
+					this,
+					'contentWindow',
+					String(v)
+				);
+			},
+		});
+
+		Object.defineProperty(HTMLIFrameElement.prototype, 'contentDocument', {
+			configurable: true,
+			enumerable: Native.contentDocument?.enumerable ?? true,
+			get() {
+				// console.trace('intercepting iframe contentDocument get', this);
+				const contentDocument = Native.contentDocument.get.call(this);
+
+				if (contentDocument) {
+					// contentDocument is available; inject the script if possible
+					const injectScript = () => {
+						const doc = contentDocument;
+						// console.log('pre inject script (contentDocument)', doc);
+						if (doc && doc.head) {
+							// console.log('injecting script', setupIframesTrap);
+							// const script = document.createElement('script');
+							// script.src =
+							// 	setupIframesTrap + ';setupIframesTrap();';
+							// doc.head.prepend(script);
+						}
+					};
+
+					// this is the <iframe>
+					const frame = this;
+					if (
+						contentDocument?.readyState === 'complete' ||
+						contentDocument?.readyState === 'interactive'
+					) {
+						injectScript();
+					} else {
+						frame.addEventListener('load', injectScript, {
+							capture: true,
+							once: true,
+						});
+					}
+				}
+
+				return new Proxy(contentDocument, {
+					get(target, prop, receiver) {
+						console.log('Get contentDocument property', prop);
+						if (prop === 'write') {
+							return function (source) {
+								if (!source.includes('setupIframesTrap')) {
+									source = source.replace(
+										/<head>/g,
+										'<head><base href="' +
+											document.baseURI +
+											'"><script>' +
+											setupIframesTrap +
+											';setupIframesTrap();</' +
+											'script>'
+									);
+								}
+								return contentDocument.write(source);
+								// throw new Error(
+								// 	'document.write is disabled on this contentDocument'
+								// );
+							};
+						}
+						console.log({ contentDocument, prop, receiver });
+						const value = contentDocument[prop];
+						return typeof value === 'function'
+							? value.bind(target)
+							: value;
+					},
+				});
+			},
+			set(v) {
+				Element.prototype.setAttribute.call(
+					this,
+					'contentDocument',
+					String(v)
+				);
+			},
+		});
+
+		// 4) Catch iframes added via innerHTML, templating, etc.
+		const mutationObserver = new MutationObserver((mutations) => {
+			for (const mutation of mutations) {
+				for (const node of mutation.addedNodes) {
+					if (node instanceof HTMLIFrameElement) {
+						// console.log('intercepting iframe added', node);
+						if (
+							!node.hasAttribute('src') &&
+							!node.hasAttribute('srcdoc')
+						) {
+							const { LOADER_PATH } =
+								scopedPaths(inferredSiteScope);
+							const url = `${LOADER_PATH}#${new URLSearchParams({
+								base: document.baseURI,
+							}).toString()}`;
+							setIframeSrc(node, url);
+							node.setAttribute('data-controlled', '1');
+						} else {
+							const base = document.createElement('base');
+							base.setAttribute('href', document.baseURI);
+							node.contentDocument.head.prepend(base);
+						}
+					} else if (node instanceof Element) {
+						node.querySelectorAll(
+							'iframe:not([src]):not([srcdoc])'
+						).forEach((iframe) => {
+							console.log(
+								'intercepting iframe added element',
+								iframe
+							);
+							const { LOADER_PATH } =
+								scopedPaths(inferredSiteScope);
+							const url = `${LOADER_PATH}#${new URLSearchParams({
+								base: document.baseURI,
+							}).toString()}`;
+							setIframeSrc(iframe, url);
+							iframe.setAttribute('data-controlled', '1');
+						});
+					}
+				}
+			}
+		});
+		mutationObserver.observe(document.documentElement, {
+			childList: true,
+			subtree: true,
+		});
+
+		// Anti-flash while the rewrite happens.
+		const style = document.createElement('style');
+		style.textContent = `iframe{visibility:hidden} iframe[data-controlled="1"]{visibility:visible}`;
+		document.documentElement.appendChild(style);
+	}
+}
+
+setupIframesTrap();
diff --git a/packages/playground/remote/service-worker.ts b/packages/playground/remote/service-worker.ts
index 8603ee987b..8e7ae0f793 100644
--- a/packages/playground/remote/service-worker.ts
+++ b/packages/playground/remote/service-worker.ts
@@ -121,14 +121,8 @@ import {
 	shouldCacheUrl,
 } from './src/lib/offline-mode-cache';
 
-if (!(self as any).document) {
-	// Workaround: vite translates import.meta.url
-	// to document.currentScript which fails inside of
-	// a service worker because document is undefined
-	// @ts-ignore
-	// eslint-disable-next-line no-global-assign
-	self.document = {};
-}
+// @ts-ignore
+import iframesTrapScriptContent from './iframes-trap.js?raw';
 
 /**
  * Forces the browser to always use the latest service worker.
@@ -170,7 +164,6 @@ self.addEventListener('install', (event) => {
  * intercepted here.
  *
  * However, the initial Playground load already downloads a few large assets,
- * like a 12MB wordpress-static.zip file. We need to cache them these requests.
  * Otherwise they'll be fetched again on the next page load.
  *
  * client.claim() only affects pages loaded before the initial servie worker
@@ -193,13 +186,162 @@ self.addEventListener('activate', function (event) {
 	event.waitUntil(doActivate());
 });
 
+/**
+ * Make all iframes controlled by the service worker.
+ *
+ * ## The problem
+ *
+ * Iframes created as about:blank / srcdoc / data / blob are not controlled by this
+ * service worker. This means that all network calls initiated by these iframes are
+ * sent directly to the network. This means Gutenberg cannot load any CSS files,
+ * TInyMCE can't load media images, etc.
+ *
+ * Only iframes created with `src` pointing to a URL already controlled by this service worker
+ * are themselves controlled.
+ *
+ * ## The solution
+ *
+ * We inject a `iframes-trap.js` script into every HTML page to override a set of DOM
+ * methods used to create iframes. Whenever an src/srcdoc attribute is set on an iframe,
+ * we intercept that and:
+ *
+ * 1) Store the initial HTML of the iframe in CacheStorage.
+ * 2) Set the iframe's src to iframeLoaderUrl (coming from a controlled URL).
+ * 3) The loader replaces the iframe's content with the cached HTML.
+ * 4) The loader ensures `iframes-trap.js` is also loaded and executed inside the iframe
+ *    to cover any nested iframes.
+ *
+ * As a result, every same-origin iframe is forced onto a real navigation that the SW can control,
+ * so all fetches (including <img> inside editors like TinyMCE) go through our handler
+ * without per-product patches. This replaces the former Gutenberg-only shim.
+ *
+ * References
+ *
+ * - Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=880768
+ * - Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1293277
+ * - Spec discussion: https://github.com/w3c/ServiceWorker/issues/765
+ * - Gutenberg context: https://github.com/WordPress/gutenberg/pull/38855
+ * - Playground historical issue: https://github.com/WordPress/wordpress-playground/issues/42
+ */
+
+/**
+ * The CacheStorage bucked used by iframes-trap.js to store the HTML contents
+ * of iframes initialized from srcdoc/data/blob.
+ */
+const iframeCacheBucket = 'iframe-virtual-docs-v1';
+const SW_SCOPE = new URL(self.registration.scope).pathname.replace(/\/$/, '');
+
+/**
+ * A unique path prefix for all the cached iframe markup. It helps the service worker
+ * decide whether the incoming request is related to a cached iframe markup.
+ */
+const iframeCacheKeyPrefix = `${SW_SCOPE}/__iframes/`;
+
+/**
+ * Service worker serves `./iframes-trap.js` at this path:
+ */
+const iframeTrapScriptUrl = `${SW_SCOPE}/__bootstrap/iframes-trap.js`;
+
+/**
+ * Service worker serves `iframeLoaderHtml` at this path. It's used
+ * to initialize new iframes.
+ */
+const iframeLoaderPath = `${SW_SCOPE}/wp-includes/empty.html`;
+
+/**
+ * The HTML content of the iframe loader. This is the inital page
+ * every iframe is forced to load when it's created.
+ */
+const iframeLoaderHtml = `<!doctype html><meta charset="utf-8">
+<script>
+(() => {
+  function ensureBaseAndAgent() {
+    const safeBase = String(window.base || location.href).replace(/"/g,'&quot;');
+    if (!document.head) {
+      document.documentElement.insertBefore(
+	  	document.createElement('head'),
+	  	document.documentElement.firstChild
+	  );
+    }
+    if (!document.head.querySelector('base')) {
+      const base = document.createElement('base');
+	  base.setAttribute('href', safeBase);
+      document.head.insertBefore(base, document.head.firstChild);
+    }
+    if (![...document.scripts].some(script => script.src.endsWith('/iframes-trap.js'))) {
+      const script = document.createElement('script');
+      script.type = 'module';
+      script.src = ${JSON.stringify(iframeTrapScriptUrl)};
+	  script.dataset.scope = ${JSON.stringify(SW_SCOPE)};
+      document.head.appendChild(script);
+    }
+  }
+
+  const nativeClose = Document.prototype.close;
+  Document.prototype.close = function() {
+    const returnValue = nativeClose.apply(this, arguments);
+
+    /**
+	 * Defer to next microtask so close() finishes flushing the document
+	 * before we inject <base> and the agent script. Mutating inside the
+     * close() can race with the final flush, causing re-entrancy/partial-DOM
+	 * quirks across browsers.
+	 */
+    Promise.resolve().then(ensureBaseAndAgent);
+    return returnValue;
+  };
+
+  const searchParams = new URLSearchParams(location.hash.slice(1));
+  const id   = searchParams.get('id');
+  const base = searchParams.get('base') || '';
+  const url  = searchParams.get('url')  || '';
+
+  /**
+   * Fetches a virtual iframe document from CacheStorage.
+   */
+  async function fetchCachedIframeDocument() {
+  	const path = ${JSON.stringify(iframeCacheKeyPrefix)} + id + '.html';
+
+    /**
+	 * Retry a few times. The loader may request the cached iframe
+	 * document before caches.put() (started by the trap) finishes
+	 * writing it. 
+	 */
+    for (let i = 0; i < 6; i++) {
+      const response = await fetch(path, { cache: 'no-store' });
+      if (response.ok) {
+		  return response;
+	  }
+      await new Promise(r => setTimeout(r, 30));
+    }
+    return await fetch(path, { cache: 'no-store' });
+  }
+
+	(async () => {
+		let html = '';
+		if (id) {
+			html = await (await fetchCachedIframeDocument()).text();
+		}
+
+		// Write (possibly empty) HTML; our close() hook injects base + agent
+		document.open();
+		document.write(html);
+		document.close();
+
+		if (!url) {
+			return;
+		}
+		history.replaceState({}, '', url);
+	})();
+})();
+</script>`;
+
 self.addEventListener('fetch', (event) => {
 	if (!isCurrentServiceWorkerActive()) {
 		return;
 	}
 
 	const url = new URL(event.request.url);
-
 	// Don't handle requests to the service worker script itself.
 	if (url.pathname.startsWith(self.location.pathname)) {
 		return;
@@ -212,6 +354,49 @@ self.addEventListener('fetch', (event) => {
 		return;
 	}
 
+	// Serve the iframe loader
+	if (
+		event.request.mode === 'navigate' &&
+		url.pathname === iframeLoaderPath
+	) {
+		event.respondWith(
+			new Response(iframeLoaderHtml, {
+				headers: { 'Content-Type': 'text/html; charset=utf-8' },
+			})
+		);
+		return;
+	}
+
+	// Serve the cached iframe contents (written by iframe-trap.js)
+	if (url.pathname.startsWith(iframeCacheKeyPrefix)) {
+		event.respondWith(
+			(async () => {
+				const cache = await caches.open(iframeCacheBucket);
+				const match = await cache.match(event.request);
+				return (
+					match ||
+					new Response('<!doctype html>Not found', {
+						status: 404,
+						headers: { 'Content-Type': 'text/html; charset=utf-8' },
+					})
+				);
+			})()
+		);
+		return;
+	}
+
+	// Serve the iframe-trap.js script
+	if (url.pathname === iframeTrapScriptUrl) {
+		event.respondWith(
+			new Response(iframesTrapScriptContent, {
+				headers: {
+					'Content-Type': 'application/javascript; charset=utf-8',
+				},
+			})
+		);
+		return;
+	}
+
 	if (isURLScoped(url)) {
 		return event.respondWith(handleScopedRequest(event, getURLScope(url)!));
 	}
@@ -320,12 +505,6 @@ self.addEventListener('fetch', (event) => {
  * but initiated by a scoped referer (e.g. fetch() from a block editor iframe).
  */
 async function handleScopedRequest(event: FetchEvent, scope: string) {
-	const fullUrl = new URL(event.request.url);
-	const unscopedUrl = removeURLScope(fullUrl);
-	if (fullUrl.pathname.endsWith('/wp-includes/empty.html')) {
-		return emptyHtml();
-	}
-
 	const workerResponse = await convertFetchEventToPHPRequest(event);
 
 	if (
@@ -388,26 +567,18 @@ async function handleScopedRequest(event: FetchEvent, scope: string) {
 		});
 	}
 
-	// Path the block-editor.js file to ensure the site editor's iframe
-	// inherits the service worker.
-	// @see controlledIframe below for more details.
-	if (
-		// WordPress Core version of block-editor.js
-		unscopedUrl.pathname.endsWith('/block-editor.js') ||
-		unscopedUrl.pathname.endsWith('/block-editor.min.js') ||
-		// Gutenberg version of block-editor.js
-		unscopedUrl.pathname.endsWith('/block-editor/index.js') ||
-		unscopedUrl.pathname.endsWith('/block-editor/index.min.js')
-	) {
-		const script = await workerResponse.text();
-		const newScript = `${controlledIframe} ${script.replace(
-			/\(\s*"iframe",/,
-			'(__playground_ControlledIframe,'
-		)}`;
-		return new Response(newScript, {
-			status: workerResponse.status,
-			statusText: workerResponse.statusText,
+	/**
+	 * Inject the iframe-trap.js script into the response.
+	 */
+	if (workerResponse.headers.get('content-type')?.startsWith('text/html')) {
+		const body = await workerResponse.text();
+		const newBody = body.replace(
+			/<head>/,
+			`<head><script src="${iframeTrapScriptUrl}"></script>`
+		);
+		return new Response(newBody, {
 			headers: workerResponse.headers,
+			status: workerResponse.status,
 		});
 	}
 
@@ -416,107 +587,6 @@ async function handleScopedRequest(event: FetchEvent, scope: string) {
 
 reportServiceWorkerMetrics(self);
 
-/**
- * Pair the site editor's nested iframe to the Service Worker.
- *
- * Without the patch below, the site editor initiates network requests that
- * aren't routed through the service worker. That's a known browser issue:
- *
- * * https://bugs.chromium.org/p/chromium/issues/detail?id=880768
- * * https://bugzilla.mozilla.org/show_bug.cgi?id=1293277
- * * https://github.com/w3c/ServiceWorker/issues/765
- *
- * The problem with iframes using srcDoc and src="about:blank" as they
- * fail to inherit the root site's service worker.
- *
- * Gutenberg loads the site editor using <iframe srcDoc="<!doctype html">
- * to force the standards mode and not the quirks mode:
- *
- * https://github.com/WordPress/gutenberg/pull/38855
- *
- * This commit patches the site editor to achieve the same result via
- * <iframe src="/doctype.html"> and a doctype.html file containing just
- * `<!doctype html>`. This allows the iframe to inherit the service worker
- * and correctly load all the css, js, fonts, images, and other assets.
- *
- * Ideally this issue would be fixed directly in Gutenberg and the patch
- * below would be removed.
- *
- * See https://github.com/WordPress/wordpress-playground/issues/42 for more details
- *
- * ## Why does this code live in the service worker?
- *
- * There's many ways to install the Gutenberg plugin:
- *
- * * Install plugin step
- * * Import a site
- * * Install Gutenberg from the plugin directory
- * * Upload a Gutenberg zip
- *
- * It's too difficult to patch Gutenberg in all these cases, so we
- * blanket-patch all the scripts requested over the network whose names seem to
- * indicate they're related to the Gutenberg plugin.
- */
-const controlledIframe = `
-window.__playground_ControlledIframe = window.wp.element.forwardRef(function (props, ref) {
-	const source = window.wp.element.useMemo(function () {
-		/**
-		 * A synchronous function to read a blob URL as text.
-		 *
-		 * @param {string} url
-		 * @returns {string}
-		 */
-		const __playground_readBlobAsText = function (url) {
-			try {
-				let xhr = new XMLHttpRequest();
-				xhr.open('GET', url, false);
-				xhr.overrideMimeType('text/plain;charset=utf-8');
-				xhr.send();
-				return xhr.responseText;
-			} catch(e) {
-				return '';
-			} finally {
-				URL.revokeObjectURL(url);
-			}
-		};
-		if (props.srcDoc) {
-			// WordPress <= 6.2 uses a srcDoc that only contains a doctype.
-			return '/wp-includes/empty.html';
-		} else if (props.src && props.src.startsWith('blob:')) {
-			// WordPress 6.3 uses a blob URL with doctype and a list of static assets.
-			// Let's pass the document content to empty.html and render it there.
-			return '/wp-includes/empty.html#' + encodeURIComponent(__playground_readBlobAsText(props.src));
-		} else {
-			// WordPress >= 6.4 uses a plain HTTPS URL that needs no correction.
-			return props.src;
-		}
-	}, [props.src]);
-	return (
-		window.wp.element.createElement('iframe', {
-			...props,
-			ref: ref,
-			src: source,
-			// Make sure there's no srcDoc, as it would interfere with the src.
-			srcDoc: undefined
-		})
-	)
-});`;
-
-/**
- * The empty HTML file loaded by the patched editor iframe.
- */
-function emptyHtml() {
-	return new Response(
-		'<!doctype html><script>const hash = window.location.hash.substring(1); if ( hash ) document.write(decodeURIComponent(hash))</script>',
-		{
-			status: 200,
-			headers: {
-				'content-type': 'text/html',
-			},
-		}
-	);
-}
-
 type WPModuleDetails = {
 	staticAssetsDirectory?: string;
 };
diff --git a/packages/playground/remote/src/lib/playground-mu-plugin/0-playground.php b/packages/playground/remote/src/lib/playground-mu-plugin/0-playground.php
index 920e846d54..018767aeac 100644
--- a/packages/playground/remote/src/lib/playground-mu-plugin/0-playground.php
+++ b/packages/playground/remote/src/lib/playground-mu-plugin/0-playground.php
@@ -29,14 +29,42 @@ function ( $message ) {
  * https://github.com/WordPress/wordpress-playground/issues/927
  *
  */
-add_action('admin_head', function () {
-	echo '<style>
+// Load the iframe trap as early as possible in wp-admin so it can patch
+// Document.prototype before TinyMCE and other scripts create iframes.
+add_action(
+	'admin_head',
+	function () {
+		?>
+		<script>
+			(function () {
+				// Derive scope hint from current path (works for /scope:foo/...).
+				const scopeMatch = location.pathname.match(/^\/scope:[^/]+/);
+				const scope = scopeMatch ? scopeMatch[0] : '';
+				const existing = Array.from(document.scripts).some((s) =>
+					s.src.endsWith('/__bootstrap/iframes-trap.js')
+				);
+				if (existing) {
+					return;
+				}
+				const s = document.createElement('script');
+				// Classic script to execute synchronously during parsing.
+				s.src = new URL('/__bootstrap/iframes-trap.js', document.baseURI);
+				if (scope) {
+					s.dataset.scope = scope;
+				}
+				document.head.appendChild(s);
+			})();
+		</script>
+		<style>
 				:is(.plugins-popular-tags-wrapper:has(div.networking_err_msg),
 				button.button.try-again) {
 						display: none;
 				}
-		</style>';
-});
+		</style>
+		<?php
+	},
+	0
+);
 
 add_action('init', 'networking_disabled');
 function networking_disabled() {
diff --git a/packages/playground/remote/tsconfig.lib.json b/packages/playground/remote/tsconfig.lib.json
index 85d36e813b..a0d53f8bed 100644
--- a/packages/playground/remote/tsconfig.lib.json
+++ b/packages/playground/remote/tsconfig.lib.json
@@ -12,6 +12,7 @@
 	"include": [
 		"src/**/*.ts",
 		"service-worker.ts",
+		"iframes-trap.ts",
 		"../../php-wasm/web/src/lib/tls/1_2/connection.ts",
 		"../../php-wasm/web/src/lib/tls/certificates.ts",
 		"../common/src/create-memoized-fetch.spec.ts",
diff --git a/packages/playground/website/playwright/e2e/controlled-iframes.spec.ts b/packages/playground/website/playwright/e2e/controlled-iframes.spec.ts
new file mode 100644
index 0000000000..38bd97999d
--- /dev/null
+++ b/packages/playground/website/playwright/e2e/controlled-iframes.spec.ts
@@ -0,0 +1,50 @@
+import { expect, test } from '../playground-fixtures.ts';
+
+test('new iframes are SW-controlled (about:blank)', async ({ website }) => {
+	await website.goto('./');
+	// Ensure WordPress iframe is mounted
+	await website.waitForNestedIframes();
+
+	const result = await website.page.evaluate(async () => {
+		const wpIframe = document.querySelector<HTMLIFrameElement>('#wp');
+		if (!wpIframe || !wpIframe.contentWindow || !wpIframe.contentDocument) {
+			throw new Error('WordPress iframe is not ready');
+		}
+
+		const wpDoc = wpIframe.contentDocument;
+		const child = wpDoc.createElement('iframe');
+		wpDoc.body.appendChild(child);
+
+		const start = performance.now();
+		while (performance.now() - start < 5000) {
+			const controlled = child.getAttribute('data-controlled');
+			const hasController = (() => {
+				try {
+					return !!child.contentWindow?.navigator?.serviceWorker
+						?.controller;
+				} catch {
+					return false;
+				}
+			})();
+			if (controlled === '1' && hasController) {
+				return { controlled, hasController };
+			}
+			await new Promise((resolve) => setTimeout(resolve, 50));
+		}
+
+		return {
+			controlled: child.getAttribute('data-controlled'),
+			hasController: (() => {
+				try {
+					return !!child.contentWindow?.navigator?.serviceWorker
+						?.controller;
+				} catch {
+					return false;
+				}
+			})(),
+		};
+	});
+
+	expect(result.controlled).toBe('1');
+	expect(result.hasController).toBeTruthy();
+});