Add some simple messaging for parent interaction
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki
parent
20d8d70c51
commit
3afb35e5ee
4 changed files with 114 additions and 13 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,5 +1,8 @@
|
|||
.vscode/*
|
||||
|
||||
# Key for embedding
|
||||
key.json
|
||||
|
||||
# NPM things
|
||||
package.json
|
||||
package-lock.json
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
95
js/webui.js
Normal file
95
js/webui.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
|
@ -4,22 +4,22 @@
|
|||
<meta charset="utf-8" />
|
||||
<title>openOutpaint 🐠</title>
|
||||
<!-- CSS Variables -->
|
||||
<link href="/css/colors.css" rel="stylesheet" />
|
||||
<link href="/css/icons.css" rel="stylesheet" />
|
||||
<link href="../css/colors.css" rel="stylesheet" />
|
||||
<link href="../css/icons.css" rel="stylesheet" />
|
||||
|
||||
<link href="/css/index.css" rel="stylesheet" />
|
||||
<link href="/css/layers.css" rel="stylesheet" />
|
||||
<link href="../css/index.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/layers.css" rel="stylesheet" />
|
||||
<link href="/css/ui/toolbar.css" rel="stylesheet" />
|
||||
<link href="../css/ui/history.css" rel="stylesheet" />
|
||||
<link href="../css/ui/layers.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/stamp.css" rel="stylesheet" />
|
||||
<link href="/css/ui/tool/colorbrush.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/colorbrush.css" rel="stylesheet" />
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue