WebDev/VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: restored image upload

Browse Source 
* only use readonly id when storing image to prevent leaking of the editable id
This commit is contained in:
Florent Chehab 2020-05-12 21:55:43 +02:00
parent 14e1ee5391
commit 2c2c104bbf
No known key found for this signature in database
GPG Key ID: 9A0CE018889EA246
3 changed files with 60 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
scripts/server-backend.js
View File

@ -89,32 +89,37 @@ function startBackendServer(port) {
function progressUploadFormData(formData, callback) { function progressUploadFormData(formData, callback) {
console.log("Progress new Form Data"); console.log("Progress new Form Data");
var fields = escapeAllContentStrings(formData.fields); const fields = escapeAllContentStrings(formData.fields);
var files = formData.files; const wid = fields["whiteboardId"];
var whiteboardId = fields["whiteboardId"]; if (ReadOnlyBackendService.isReadOnly(wid)) return;
var name = fields["name"] || ""; const readOnlyWid = ReadOnlyBackendService.getReadOnlyId(wid);
var date = fields["date"] || +new Date();
var filename = whiteboardId + "_" + date + ".png"; const name = fields["name"] || "";
var webdavaccess = fields["webdavaccess"] || false; const date = fields["date"] || +new Date();
const filename = `${readOnlyWid}_${date}.png`;
let webdavaccess = fields["webdavaccess"] || false;
try { try {
webdavaccess = JSON.parse(webdavaccess); webdavaccess = JSON.parse(webdavaccess);
} catch (e) { } catch (e) {
webdavaccess = false; webdavaccess = false;
} }
fs.ensureDir("./public/uploads", function (err) {
const savingDir = path.join("./public/uploads", readOnlyWid);
fs.ensureDir(savingDir, function (err) {
if (err) { if (err) {
console.log("Could not create upload folder!", err); console.log("Could not create upload folder!", err);
return; return;
} }
var imagedata = fields["imagedata"]; let imagedata = fields["imagedata"];
if (imagedata && imagedata != "") { if (imagedata && imagedata != "") {
//Save from base64 data //Save from base64 data
imagedata = imagedata imagedata = imagedata
.replace(/^data:image\/png;base64,/, "") .replace(/^data:image\/png;base64,/, "")
.replace(/^data:image\/jpeg;base64,/, ""); .replace(/^data:image\/jpeg;base64,/, "");
console.log(filename, "uploaded"); console.log(filename, "uploaded");
fs.writeFile("./public/uploads/" + filename, imagedata, "base64", function (err) { const savingPath = path.join(savingDir, filename);
fs.writeFile(savingPath, imagedata, "base64", function (err) {
if (err) { if (err) {
console.log("error", err); console.log("error", err);
callback(err); callback(err);
@ -122,19 +127,16 @@ function startBackendServer(port) {
if (webdavaccess) { if (webdavaccess) {
//Save image to webdav //Save image to webdav
if (enableWebdav) { if (enableWebdav) {
saveImageToWebdav( saveImageToWebdav(savingPath, filename, webdavaccess, function (
"./public/uploads/" + filename, err
filename, ) {
webdavaccess, if (err) {
function (err) { console.log("error", err);
if (err) { callback(err);
console.log("error", err); } else {
callback(err); callback();
} else {
callback();
}
} }
); });
} else { } else {
callback("Webdav is not enabled on the server!"); callback("Webdav is not enabled on the server!");
} }
@ -152,10 +154,10 @@ function startBackendServer(port) {
function saveImageToWebdav(imagepath, filename, webdavaccess, callback) { function saveImageToWebdav(imagepath, filename, webdavaccess, callback) {
if (webdavaccess) { if (webdavaccess) {
var webdavserver = webdavaccess["webdavserver"] || ""; const webdavserver = webdavaccess["webdavserver"] || "";
var webdavpath = webdavaccess["webdavpath"] || "/"; const webdavpath = webdavaccess["webdavpath"] || "/";
var webdavusername = webdavaccess["webdavusername"] || ""; const webdavusername = webdavaccess["webdavusername"] || "";
var webdavpassword = webdavaccess["webdavpassword"] || ""; const webdavpassword = webdavaccess["webdavpassword"] || "";
const client = createClient(webdavserver, { const client = createClient(webdavserver, {
username: webdavusername, username: webdavusername,
@ -164,7 +166,7 @@ function startBackendServer(port) {
client client
.getDirectoryContents(webdavpath) .getDirectoryContents(webdavpath)
.then((items) => { .then((items) => {
var cloudpath = webdavpath + "" + filename; const cloudpath = webdavpath + "" + filename;
console.log("webdav saving to:", cloudpath); console.log("webdav saving to:", cloudpath);
fs.createReadStream(imagepath).pipe(client.createWriteStream(cloudpath)); fs.createReadStream(imagepath).pipe(client.createWriteStream(cloudpath));
callback(); callback();
@ -244,7 +246,9 @@ function startBackendServer(port) {
socket.emit("whiteboardConfig", { socket.emit("whiteboardConfig", {
common: config.frontend, common: config.frontend,
whiteboardSpecific: { whiteboardSpecific: {
correspondingReadOnlyId: ReadOnlyBackendService.getReadOnlyId(whiteboardId), correspondingReadOnlyWid: ReadOnlyBackendService.getReadOnlyId(
whiteboardId
),
isReadOnly: ReadOnlyBackendService.isReadOnly(whiteboardId), isReadOnly: ReadOnlyBackendService.isReadOnly(whiteboardId),
}, },
}); });

8
src/js/main.js
View File

@ -706,7 +706,7 @@ function initWhiteboard() {
); );
function uploadImgAndAddToWhiteboard(base64data) { function uploadImgAndAddToWhiteboard(base64data) {
var date = +new Date(); const date = +new Date();
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: document.URL.substr(0, document.URL.lastIndexOf("/")) + "/api/upload", url: document.URL.substr(0, document.URL.lastIndexOf("/")) + "/api/upload",
@ -717,9 +717,11 @@ function initWhiteboard() {
at: accessToken, at: accessToken,
}, },
success: function (msg) { success: function (msg) {
var filename = whiteboardId + "_" + date + ".png"; const { correspondingReadOnlyWid } = ConfigService;
const filename = `${correspondingReadOnlyWid}_${date}.png`;
const rootUrl = document.URL.substr(0, document.URL.lastIndexOf("/"));
whiteboard.addImgToCanvasByUrl( whiteboard.addImgToCanvasByUrl(
document.URL.substr(0, document.URL.lastIndexOf("/")) + "/uploads/" + filename `${rootUrl}/uploads/${correspondingReadOnlyWid}/${filename}`
); //Add image to canvas ); //Add image to canvas
console.log("Image uploaded!"); console.log("Image uploaded!");
}, },

23
src/js/services/ConfigService.js
View File

@ -12,6 +12,23 @@ class ConfigService {
return this.#configFromServer; return this.#configFromServer;
} }
/**
* Associated read-only id for this whiteboad
* @type {string}
*/
#correspondingReadOnlyWid = "";
get correspondingReadOnlyWid() {
return this.#correspondingReadOnlyWid;
}
/**
* @type {boolean}
*/
#isReadOnly = true;
get isReadOnly() {
return this.#isReadOnly;
}
/** /**
* @type {{displayInfo: boolean, setReadOnly: boolean}} * @type {{displayInfo: boolean, setReadOnly: boolean}}
* @readonly * @readonly
@ -97,6 +114,12 @@ class ConfigService {
this.#backgroundGridImage = backgroundGridImage; this.#backgroundGridImage = backgroundGridImage;
this.#refreshInfoInterval = 1000 / performance.refreshInfoFreq; this.#refreshInfoInterval = 1000 / performance.refreshInfoFreq;
const { whiteboardSpecific } = configFromServer;
const { correspondingReadOnlyWid, isReadOnly } = whiteboardSpecific;
this.#correspondingReadOnlyWid = correspondingReadOnlyWid;
this.#isReadOnly = isReadOnly;
console.log("Whiteboard config from server:", configFromServer, "parsed:", this); console.log("Whiteboard config from server:", configFromServer, "parsed:", this);
} }