[Patch WordPress] Ensure block editor iframe is controlled by a servi…

…ce worker Fixes #646 Patches the block editor to use a special ControlledIframe component instead of a regular HTML "iframe" element. The goal is to make the iframe use a plain HTTP URL instead of srcDoc, blob URL and other variations. Why? In Playground, the editor iframe needs to be controlled by Playground's service worker so it can serve CSS and other static assets. Otherwise all the requests originating in that iframe will yield 404s. However, different WordPress versions use a variety of iframe techniques that result in a non-controlled iframe: * 6.3 uses a binary blob URL and the frame isn't controlled by a service worker * <= 6.2 uses srcdoc had a null origin and the frame isn't controlled by a service worker * Other dynamic techniques, such as using a data URL, also fail to produce a controlled iframe HTTP URL src like src="/doc.html" seems to be the only way to create a controlled iframe. And so, this commit ensures that the block editor iframe uses a plain HTTP URL regardless of the WordPress version. Related: WordPress/gutenberg#55152
WordPress · Oct 9, 2023 · 2c850e7 · 2c850e7
1 parent 38fd65d
commit 2c850e7
Show file tree

Hide file tree

Showing 23 changed files with 561 additions and 81 deletions.
diff --git a/packages/playground/compile-wordpress/Dockerfile b/packages/playground/compile-wordpress/Dockerfile
@@ -69,10 +69,16 @@ RUN cp -r wordpress wordpress-static && \
 # below would be removed.
 # 
 # See https://github.com/WordPress/wordpress-playground/issues/42 for more details
-
-RUN echo '<!doctype html>' > wordpress-static/wp-includes/empty.html &&  \
-    sed -E 's#srcDoc:\s*("[^"]+"|[^,\n}]+)#src:"/wp-includes/empty.html"#g' -i wordpress-static/wp-includes/js/dist/block-editor.min.js && \
-    sed -E 's#srcDoc:\s*("[^"]+"|[^,\n}]+)#src:"/wp-includes/empty.html"#g' -i wordpress-static/wp-includes/js/dist/block-editor.js
+COPY ./build-assets/controlled-iframe.js /root/
+
+RUN echo '<!doctype html><script>const hash = window.location.hash.substring(1); if ( hash ) document.write(decodeURIComponent(hash))</script>' > wordpress-static/wp-includes/empty.html
+# Replace a vanilla HTML iframe with Playground's ControlledIframe component in the block editor.
+RUN sed -E 's#\(\s*"iframe",#(__playground_ControlledIframe,#g' -i wordpress-static/wp-includes/js/dist/block-editor.js && \
+    cat /root/controlled-iframe.js wordpress-static/wp-includes/js/dist/block-editor.js >> /root/block-editor.js && \
+    mv /root/block-editor.js wordpress-static/wp-includes/js/dist/ && \
+    sed -E 's#\(\s*"iframe",#(__playground_ControlledIframe,#g' -i wordpress-static/wp-includes/js/dist/block-editor.min.js && \
+    cat /root/controlled-iframe.js wordpress-static/wp-includes/js/dist/block-editor.min.js >> /root/block-editor.min.js && \
+    mv /root/block-editor.min.js wordpress-static/wp-includes/js/dist/;
 
 # Move the static files to the final output directory
 RUN mkdir /root/output/$OUT_FILENAME

diff --git a/packages/playground/compile-wordpress/build-assets/controlled-iframe.js b/packages/playground/compile-wordpress/build-assets/controlled-iframe.js
@@ -0,0 +1,44 @@
+/**
+ * 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);
+	}
+}
+
+window.__playground_ControlledIframe = window.wp.element.forwardRef(function (props, ref) {
+    const source = window.wp.element.useMemo(function () {
+        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
+		})
+	)
+});
diff --git a/packages/playground/remote/public/wp-5.9/wp-includes/empty.html b/packages/playground/remote/public/wp-5.9/wp-includes/empty.html
@@ -1 +1 @@
-<!doctype html>
+<!doctype html><script>const hash = window.location.hash.substring(1); if ( hash ) document.write(decodeURIComponent(hash))</script>
diff --git a/packages/playground/remote/public/wp-5.9/wp-includes/js/dist/block-editor.js b/packages/playground/remote/public/wp-5.9/wp-includes/js/dist/block-editor.js
@@ -1,4 +1,47 @@
-this["wp"] = this["wp"] || {}; this["wp"]["blockEditor"] =
+/**
+ * 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);
+	}
+}
+
+window.__playground_ControlledIframe = window.wp.element.forwardRef(function (props, ref) {
+    const source = window.wp.element.useMemo(function () {
+        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
+		})
+	)
+});this["wp"] = this["wp"] || {}; this["wp"]["blockEditor"] =
 /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -32271,7 +32314,7 @@ function Iframe(_ref3, ref) {
       key: id
     });
   }), head);
-  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, tabIndex >= 0 && before, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("iframe", Object(_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"])({}, props, {
+  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, tabIndex >= 0 && before, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(__playground_ControlledIframe, Object(_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"])({}, props, {
     ref: Object(_wordpress_compose__WEBPACK_IMPORTED_MODULE_4__["useMergeRefs"])([ref, setRef]),
     tabIndex: tabIndex,
     title: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Editor canvas')

diff --git a/packages/playground/remote/public/wp-5.9/wp-includes/js/dist/block-editor.min.js b/packages/playground/remote/public/wp-5.9/wp-includes/js/dist/block-editor.min.js
diff --git a/packages/playground/remote/public/wp-6.0/wp-includes/empty.html b/packages/playground/remote/public/wp-6.0/wp-includes/empty.html
@@ -1 +1 @@
-<!doctype html>
+<!doctype html><script>const hash = window.location.hash.substring(1); if ( hash ) document.write(decodeURIComponent(hash))</script>
diff --git a/packages/playground/remote/public/wp-6.0/wp-includes/js/dist/block-editor.js b/packages/playground/remote/public/wp-6.0/wp-includes/js/dist/block-editor.js
@@ -1,4 +1,47 @@
-/******/ (function() { // webpackBootstrap
+/**
+ * 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);
+	}
+}
+
+window.__playground_ControlledIframe = window.wp.element.forwardRef(function (props, ref) {
+    const source = window.wp.element.useMemo(function () {
+        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
+		})
+	)
+});/******/ (function() { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
 /***/ 6411:
@@ -20940,11 +20983,11 @@ function Iframe(_ref3, ref) {
       key: id
     });
   }), head);
-  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, tabIndex >= 0 && before, (0,external_wp_element_namespaceObject.createElement)("iframe", _extends({}, props, {
+  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, tabIndex >= 0 && before, (0,external_wp_element_namespaceObject.createElement)(__playground_ControlledIframe, _extends({}, props, {
     ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, setRef]),
     tabIndex: tabIndex // Correct doctype is required to enable rendering in standards mode
     ,
-    src:"/wp-includes/empty.html",
+    srcDoc: "<!doctype html>",
     title: (0,external_wp_i18n_namespaceObject.__)('Editor canvas')
   }), iframeDocument && (0,external_wp_element_namespaceObject.createPortal)((0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)("head", {
     ref: headRef

diff --git a/packages/playground/remote/public/wp-6.0/wp-includes/js/dist/block-editor.min.js b/packages/playground/remote/public/wp-6.0/wp-includes/js/dist/block-editor.min.js
diff --git a/packages/playground/remote/public/wp-6.1/wp-includes/empty.html b/packages/playground/remote/public/wp-6.1/wp-includes/empty.html
@@ -1 +1 @@
-<!doctype html>
+<!doctype html><script>const hash = window.location.hash.substring(1); if ( hash ) document.write(decodeURIComponent(hash))</script>
diff --git a/packages/playground/remote/public/wp-6.1/wp-includes/js/dist/block-editor.js b/packages/playground/remote/public/wp-6.1/wp-includes/js/dist/block-editor.js
@@ -1,4 +1,47 @@
-/******/ (function() { // webpackBootstrap
+/**
+ * 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);
+	}
+}
+
+window.__playground_ControlledIframe = window.wp.element.forwardRef(function (props, ref) {
+    const source = window.wp.element.useMemo(function () {
+        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
+		})
+	)
+});/******/ (function() { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
 /***/ 6411:
@@ -22993,11 +23036,11 @@ function Iframe(_ref3, ref) {
       key: id
     });
   }), head);
-  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, tabIndex >= 0 && before, (0,external_wp_element_namespaceObject.createElement)("iframe", _extends({}, props, {
+  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, tabIndex >= 0 && before, (0,external_wp_element_namespaceObject.createElement)(__playground_ControlledIframe, _extends({}, props, {
     ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, setRef]),
     tabIndex: tabIndex // Correct doctype is required to enable rendering in standards mode
     ,
-    src:"/wp-includes/empty.html",
+    srcDoc: "<!doctype html>",
     title: (0,external_wp_i18n_namespaceObject.__)('Editor canvas')
   }), iframeDocument && (0,external_wp_element_namespaceObject.createPortal)((0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)("head", {
     ref: headRef

diff --git a/packages/playground/remote/public/wp-6.1/wp-includes/js/dist/block-editor.min.js b/packages/playground/remote/public/wp-6.1/wp-includes/js/dist/block-editor.min.js
diff --git a/packages/playground/remote/public/wp-6.2/wp-includes/empty.html b/packages/playground/remote/public/wp-6.2/wp-includes/empty.html
@@ -1 +1 @@
-<!doctype html>
+<!doctype html><script>const hash = window.location.hash.substring(1); if ( hash ) document.write(decodeURIComponent(hash))</script>
diff --git a/packages/playground/remote/public/wp-6.2/wp-includes/js/dist/block-editor.js b/packages/playground/remote/public/wp-6.2/wp-includes/js/dist/block-editor.js
@@ -1,4 +1,47 @@
-/******/ (function() { // webpackBootstrap
+/**
+ * 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);
+	}
+}
+
+window.__playground_ControlledIframe = window.wp.element.forwardRef(function (props, ref) {
+    const source = window.wp.element.useMemo(function () {
+        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
+		})
+	)
+});/******/ (function() { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
 /***/ 6411:
@@ -20326,13 +20369,13 @@ function Iframe(_ref2) {
   const srcDoc = (0,external_wp_element_namespaceObject.useMemo)(() => {
     return '<!doctype html>' + (0,external_wp_element_namespaceObject.renderToString)(styleAssets);
   }, []);
-  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, tabIndex >= 0 && before, (0,external_wp_element_namespaceObject.createElement)("iframe", _extends({}, props, {
+  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, tabIndex >= 0 && before, (0,external_wp_element_namespaceObject.createElement)(__playground_ControlledIframe, _extends({}, props, {
     ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, setRef]),
     tabIndex: tabIndex // Correct doctype is required to enable rendering in standards
     // mode. Also preload the styles to avoid a flash of unstyled
     // content.
     ,
-    src:"/wp-includes/empty.html",
+    srcDoc: srcDoc,
     title: (0,external_wp_i18n_namespaceObject.__)('Editor canvas')
   }), iframeDocument && (0,external_wp_element_namespaceObject.createPortal)((0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)("head", {
     ref: headRef

diff --git a/packages/playground/remote/public/wp-6.2/wp-includes/js/dist/block-editor.min.js b/packages/playground/remote/public/wp-6.2/wp-includes/js/dist/block-editor.min.js
diff --git a/packages/playground/remote/public/wp-6.3/wp-includes/empty.html b/packages/playground/remote/public/wp-6.3/wp-includes/empty.html
@@ -1 +1 @@
-<!doctype html>
+<!doctype html><script>const hash = window.location.hash.substring(1); if ( hash ) document.write(decodeURIComponent(hash))</script>
diff --git a/packages/playground/remote/public/wp-6.3/wp-includes/js/dist/block-editor.js b/packages/playground/remote/public/wp-6.3/wp-includes/js/dist/block-editor.js
@@ -1,4 +1,47 @@
-/******/ (function() { // webpackBootstrap
+/**
+ * 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);
+	}
+}
+
+window.__playground_ControlledIframe = window.wp.element.forwardRef(function (props, ref) {
+    const source = window.wp.element.useMemo(function () {
+        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
+		})
+	)
+});/******/ (function() { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
 /***/ 6411:
@@ -25235,7 +25278,7 @@ function Iframe({
   // top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
 
   const marginFromScaling = contentHeight * (1 - scale) / 2;
-  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, tabIndex >= 0 && before, (0,external_wp_element_namespaceObject.createElement)("iframe", { ...props,
+  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, tabIndex >= 0 && before, (0,external_wp_element_namespaceObject.createElement)(__playground_ControlledIframe, { ...props,
     style: { ...props.style,
       height: expand ? contentHeight : props.style?.height,
       marginTop: scale !== 1 ? -marginFromScaling + frameSize : props.style?.marginTop,
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html>
		<!doctype html><script>const hash = window.location.hash.substring(1); if ( hash ) document.write(decodeURIComponent(hash))</script>