Add some simple messaging for parent interaction

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

.gitignore

@@ -1,5 +1,8 @@
 .vscode/*
 
+# Key for embedding
+key.json
+
 # NPM things
 package.json
 package-lock.json

index.html

@@ -299,7 +299,7 @@
 					<button id="settings-btn-close" class="close"></button>
 				</div>
 				<div class="ui separator"></div>
-				<iframe id="page-overlay" src="/pages/configuration.html"></iframe>
+				<iframe id="page-overlay" src="pages/configuration.html"></iframe>
 			</div>
 		</div>
 
@@ -345,5 +345,8 @@
 			src="js/initalize/debug.populate.js"
 			type="text/javascript"></script>
 		<script src="js/initalize/ui.populate.js" type="text/javascript"></script>
+
+		<!-- Deals with webui communication -->
+		<script src="js/webui.js" type="text/javascript"></script>
 	</body>
 </html>

js/webui.js

@@ -0,0 +1,95 @@
+/**
+ * This file should only be actually loaded if we are in a trusted environment.
+ */
+(async () => {
+	// Check if key file exists
+	const response = await fetch("key.json");
+
+	/** @type {{host?: string, trusted?: boolean, key: string}} */
+	let data = null;
+	if (response.status === 200) {
+		data = await response.json();
+		console.info("[webui] key.json loaded successfully");
+	}
+	if (response.status !== 200 || (!data.key && !data.trusted)) {
+		console.warn(
+			"[webui] An accessible key.json file with a 'key' or 'trusted' should be provided to allow for messaging"
+		);
+		console.warn(data);
+		return;
+	}
+
+	const key = data.key;
+
+	// Check if we are running inside an iframe or embed
+	try {
+		const frame = window.frameElement;
+
+		if (frame === null) {
+			console.info("[webui] Not running inside a frame");
+		} else {
+			console.info(
+				`[webui] Window is child of '${window.parent.document.URL}'`
+			);
+			if (data.host && !window.parent.document.URL.startsWith(data.host)) {
+				console.warn(
+					`[webui] Window does not trust parent '${window.parent.document.URL}'`
+				);
+				console.warn("[webui] Will NOT setup message listeners");
+				return;
+			}
+		}
+	} catch (e) {
+		console.warn(
+			`[webui] Running in a third party iframe or embed, and blocked by CORS`
+		);
+		console.warn(e);
+		return;
+	}
+
+	if (data) {
+		let parentWindow = null;
+
+		if (!data.trusted) console.debug(`[webui] Loaded key '${key}'`);
+
+		window.addEventListener("message", ({data, origin, source}) => {
+			if (!data.trusted && data.key !== key) {
+				console.warn(
+					`[webui] Message with incorrect key was received from '${origin}'`
+				);
+				console.warn(data);
+				return;
+			}
+
+			try {
+				switch (data.type) {
+					case "init":
+						parentWindow = source;
+						break;
+					case "add-resource":
+						{
+							const image = document.createElement("img");
+							image.src = data.image.dataURL;
+							image.onload = () => {
+								tools.stamp.state.addResource(
+									data.image.resourceName || "External Resource",
+									image
+								);
+								tools.stamp.enable();
+							};
+						}
+						break;
+					default:
+						console.warn(`[webui] Unsupported message type: ${data.type}`);
+						break;
+				}
+			} catch (e) {
+				console.warn(
+					`[webui] Message of type '${data.type}' has invalid format`
+				);
+				console.warn(e);
+				console.warn(data);
+			}
+		});
+	}
+})();

pages/configuration.html

@@ -4,22 +4,22 @@
 		<meta charset="utf-8" />
 		<title>openOutpaint 🐠</title>
 		<!-- CSS Variables -->
-		<link href="/css/colors.css" rel="stylesheet" />
+		<link href="../css/colors.css" rel="stylesheet" />
-		<link href="/css/icons.css" rel="stylesheet" />
+		<link href="../css/icons.css" rel="stylesheet" />
 
-		<link href="/css/index.css" rel="stylesheet" />
+		<link href="../css/index.css" rel="stylesheet" />
-		<link href="/css/layers.css" rel="stylesheet" />
+		<link href="../css/layers.css" rel="stylesheet" />
 
-		<link href="/css/ui/generic.css" rel="stylesheet" />
+		<link href="../css/ui/generic.css" rel="stylesheet" />
 
-		<link href="/css/ui/history.css" rel="stylesheet" />
+		<link href="../css/ui/history.css" rel="stylesheet" />
-		<link href="/css/ui/layers.css" rel="stylesheet" />
+		<link href="../css/ui/layers.css" rel="stylesheet" />
-		<link href="/css/ui/toolbar.css" rel="stylesheet" />
+		<link href="../css/ui/toolbar.css" rel="stylesheet" />
 
 		<!-- Tool Specific CSS -->
-		<link href="/css/ui/tool/dream.css" rel="stylesheet" />
+		<link href="../css/ui/tool/dream.css" rel="stylesheet" />
-		<link href="/css/ui/tool/stamp.css" rel="stylesheet" />
+		<link href="../css/ui/tool/stamp.css" rel="stylesheet" />
-		<link href="/css/ui/tool/colorbrush.css" rel="stylesheet" />
+		<link href="../css/ui/tool/colorbrush.css" rel="stylesheet" />
 
 		<link rel="icon" type="image/x-icon" href="favicon.ico" />