diff --git a/.gitignore b/.gitignore index e9ef3a2..621ea6d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,12 @@ .vscode/* +# Key for embedding +key.json + # NPM things package.json package-lock.json node_modules/ # Yarn things -yarn.lock \ No newline at end of file +yarn.lock diff --git a/index.html b/index.html index 852619c..e091f19 100644 --- a/index.html +++ b/index.html @@ -299,7 +299,7 @@
- + @@ -345,5 +345,8 @@ src="js/initalize/debug.populate.js" type="text/javascript"> + + + diff --git a/js/webui.js b/js/webui.js new file mode 100644 index 0000000..417bca0 --- /dev/null +++ b/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); + } + }); + } +})(); diff --git a/pages/configuration.html b/pages/configuration.html index 7203f32..7e375ea 100644 --- a/pages/configuration.html +++ b/pages/configuration.html @@ -4,22 +4,22 @@ openOutpaint 🐠 - - + + - - + + - + - - - + + + - - - + + +