IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

JS-SDK: Added checkCSP method. Added error if CSP header not contain current domain. Fixed onAppError call.

Browse Source
This commit is contained in:
Ilya Oleshko 2023-12-12 13:49:33 +03:00
parent 4336588119
commit 2f852443ce
1 changed files with 45 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
public/scripts/api.js
View File

@ -47,12 +47,31 @@
onSelectCallback: null, onSelectCallback: null,
onCloseCallback: null, onCloseCallback: null,
onAppReady: null, onAppReady: null,
onAppError: null, onAppError: (e) => console.log("onAppError", e),
onEditorCloseCallback: null, onEditorCloseCallback: null,
onAuthSuccess: null, onAuthSuccess: null,
}, },
}; };
const checkCSP = async (targetSrc, onAppError) => {
let allow = false;
const currentSrc = window.location.origin;
try {
const cspSettings = await fetch(`${targetSrc}/api/2.0/security/csp`);
const res = await cspSettings.json();
const { header } = res.response;
allow =
header.indexOf(window.location.origin) !== -1 ||
targetSrc === currentSrc;
} catch (e) {
onAppError(e);
}
return allow;
};
const getConfigFromParams = () => { const getConfigFromParams = () => {
const src = decodeURIComponent(document.currentScript.src); const src = decodeURIComponent(document.currentScript.src);
@ -83,6 +102,7 @@
class DocSpace { class DocSpace {
#iframe; #iframe;
#isConnected = false; #isConnected = false;
#cspInstalled = false;
#callbacks = []; #callbacks = [];
#tasks = []; #tasks = [];
#classNames = ""; #classNames = "";
@ -173,18 +193,28 @@
iframe.name = config.name; iframe.name = config.name;
iframe.id = config.frameId; iframe.id = config.frameId;
iframe.align = "top"; iframe.loading = "lazy";
iframe.frameBorder = 0;
iframe.allowFullscreen = true; iframe.allowFullscreen = true;
iframe.setAttribute("allowfullscreen", ""); iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute("allow", "autoplay"); iframe.setAttribute("allow", "autoplay");
//iframe.referrerpolicy = "unsafe-url";
if (config.type == "mobile") { if (config.type == "mobile") {
iframe.style.position = "fixed"; iframe.style.position = "fixed";
iframe.style.overflow = "hidden"; iframe.style.overflow = "hidden";
document.body.style.overscrollBehaviorY = "contain"; document.body.style.overscrollBehaviorY = "contain";
} }
if (!this.#cspInstalled) {
const errorMessage =
"Current domain not set in Content Security Policy (CSP) settings. Please add it on developer tools page.";
config.events.onAppError(errorMessage);
const html = `<body>${errorMessage}</body>`;
iframe.srcdoc = html;
}
return iframe; return iframe;
}; };
@ -250,7 +280,9 @@
}; };
#executeMethod = (methodName, params, callback) => { #executeMethod = (methodName, params, callback) => {
if (!this.#isConnected) { if (!this.#isConnected) {
console.log("Message bus is not connected with frame"); this.config.events.onAppError(
"Message bus is not connected with frame"
);
return; return;
} }
@ -270,12 +302,17 @@
this.#sendMessage(message); this.#sendMessage(message);
}; };
initFrame(config) { async initFrame(config) {
const configFull = { ...defaultConfig, ...config }; const configFull = Object.assign(defaultConfig, config);
this.config = { ...this.config, ...configFull }; this.config = Object.assign(this.config, configFull);
const target = document.getElementById(this.config.frameId); const target = document.getElementById(this.config.frameId);
this.#cspInstalled = await checkCSP(
this.config.src,
this.config.events.onAppError
);
if (target) { if (target) {
this.#iframe = this.#createIframe(this.config); this.#iframe = this.#createIframe(this.config);
this.#classNames = target.className; this.#classNames = target.className;
@ -284,6 +321,7 @@
target.parentNode.replaceChild(this.#iframe, target); target.parentNode.replaceChild(this.#iframe, target);
window.addEventListener("message", this.#onMessage, false); window.addEventListener("message", this.#onMessage, false);
this.#isConnected = true; this.#isConnected = true;
} }