-
-const drawIoUrl = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&proto=json';
let iFrame = null;
-
+let lastApprovedOrigin;
let onInit, onSave;
/**
* Show the draw.io editor.
- * @param onInitCallback - Must return a promise with the xml to load for the editor.
- * @param onSaveCallback - Is called with the drawing data on save.
+ * @param {String} drawioUrl
+ * @param {Function} onInitCallback - Must return a promise with the xml to load for the editor.
+ * @param {Function} onSaveCallback - Is called with the drawing data on save.
*/
-function show(onInitCallback, onSaveCallback) {
+function show(drawioUrl, onInitCallback, onSaveCallback) {
onInit = onInitCallback;
onSave = onSaveCallback;
iFrame = document.createElement('iframe');
iFrame.setAttribute('frameborder', '0');
window.addEventListener('message', drawReceive);
- iFrame.setAttribute('src', drawIoUrl);
+ iFrame.setAttribute('src', drawioUrl);
iFrame.setAttribute('class', 'fullscreen');
iFrame.style.backgroundColor = '#FFFFFF';
document.body.appendChild(iFrame);
+ lastApprovedOrigin = (new URL(drawioUrl)).origin;
}
function close() {
drawEventClose();
}
+/**
+ * Receive and handle a message event from the draw.io window.
+ * @param {MessageEvent} event
+ */
function drawReceive(event) {
if (!event.data || event.data.length < 1) return;
- let message = JSON.parse(event.data);
+ if (event.origin !== lastApprovedOrigin) return;
+
+ const message = JSON.parse(event.data);
if (message.event === 'init') {
drawEventInit();
} else if (message.event === 'exit') {
}
function drawPostMessage(data) {
- iFrame.contentWindow.postMessage(JSON.stringify(data), '*');
+ iFrame.contentWindow.postMessage(JSON.stringify(data), lastApprovedOrigin);
}
async function upload(imageData, pageUploadedToId) {