Relay postMessage events with { type: "relay" } from WordPress onto t…

…he outside app

packages/playground/remote/src/lib/boot-playground-remote.ts

@@ -141,6 +141,7 @@ export async function bootPlaygroundRemote() {
 		serviceWorkerUrl + '',
 		serviceWorkerVersion
 	);
+	setupPostMessageRelay(wpFrame, getOrigin(await playground.absoluteUrl));
 	wpFrame.src = await playground.pathToInternalUrl('/');
 
 	setAPIReady();
@@ -152,6 +153,31 @@ export async function bootPlaygroundRemote() {
 	return playground;
 }
 
+function getOrigin(url: string) {
+	return new URL(url, 'https://example.com').origin;
+}
+
+function setupPostMessageRelay(
+	wpFrame: HTMLIFrameElement,
+	expectedOrigin: string
+) {
+	window.addEventListener('message', (event) => {
+		if (event.source !== wpFrame.contentWindow) {
+			return;
+		}
+
+		if (event.origin !== expectedOrigin) {
+			return;
+		}
+
+		if (typeof event.data !== 'object' || event.data.type !== 'relay') {
+			return;
+		}
+
+		window.parent.postMessage(event.data, '*');
+	});
+}
+
 function parseVersion<T>(value: string | undefined | null, latest: T) {
 	if (!value || value === 'latest') {
 		return (latest as string).replace('.', '_');