🔒 Fixed a number of minor security issues

motorlatitude · motorlatitude · commit 6e826cfa1e9b · 2020-02-18T11:08:35.000Z
Also improved code formatting and added comments in areas
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,22 +1,23 @@
 {
-    "env": {
-        "browser": true,
-        "commonjs": true,
-        "es6": true
-    },
-    "extends": [
-        "google",
-        "plugin:prettier/recommended"
-    ],
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parserOptions": {
-        "ecmaVersion": 2018
-    },
-    "plugins": ["prettier"],
-    "rules": {
-        "prettier/prettier": "error"
-    }
-}
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true
+  },
+  "extends": [
+    "google",
+    "plugin:security-node/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018
+  },
+  "plugins": ["security-node", "prettier"],
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-security-node": "^1.0.11",
     "prettier": "^1.19.1"
   },
   "dependencies": {
diff --git a/src/main/resources/ColorFormats.js b/src/main/resources/ColorFormats.js
@@ -56,6 +56,9 @@ class ColorFormats {
       } else {
         log.log("Plugins:", files);
         files.forEach((pluginPath, index) => {
+          // eslint rule disabled here, to enable a plugin system 3rd-party code
+          // must be allowed to load and run here
+          // eslint-disable-next-line security-node/detect-non-literal-require-calls
           const plug = require(pluginPath);
           const plugConfigParams = plug.config();
           if (plugConfigParams.type === "format") {
@@ -64,7 +67,19 @@ class ColorFormats {
               sub_title: plugConfigParams.format.displayFormat,
               icon: plugConfigParams.format.icon,
               value: plugConfigParams.name,
-              convertFromHex: hexColor => plug.convertHexColor(hexColor)
+              convertFromHex: hexColor => {
+                const r = parseInt("0x" + hexColor.substring(0, 2));
+                const g = parseInt("0x" + hexColor.substring(2, 4));
+                const b = parseInt("0x" + hexColor.substring(4, 6));
+                plug.convertColor({
+                  hex: hexColor,
+                  rgb: {
+                    r,
+                    g,
+                    b
+                  }
+                });
+              }
             });
           } else {
             log.error(
diff --git a/src/main/resources/formats/css_hex.js b/src/main/resources/formats/css_hex.js
@@ -10,6 +10,6 @@ exports.config = () => ({
 });
 
 // convert the inputted hex color format into another format and return the final string value
-exports.convertHexColor = hexColor => {
-  return "#" + hexColor.toUpperCase();
+exports.convertColor = color => {
+  return "#" + color.hex.toUpperCase();
 };
diff --git a/src/main/resources/formats/css_hsl.js b/src/main/resources/formats/css_hsl.js
@@ -10,14 +10,11 @@ exports.config = () => ({
 });
 
 // convert the inputted hex color format into another format and return the final string value
-exports.convertHexColor = hexColor => {
-  const r = parseInt("0x" + hexColor.substring(0, 2));
-  const g = parseInt("0x" + hexColor.substring(2, 4));
-  const b = parseInt("0x" + hexColor.substring(4, 6));
+exports.convertColor = color => {
   // L
-  const rp = r / 255;
-  const gp = g / 255;
-  const bp = b / 255;
+  const rp = color.rgb.r / 255;
+  const gp = color.rgb.g / 255;
+  const bp = color.rgb.b / 255;
   const maxL = Math.max(rp, gp, bp);
   const minL = Math.min(rp, gp, bp);
   const luminescence = Math.ceil(((maxL + minL) / 2) * 100);
diff --git a/src/main/resources/formats/css_hsla.js b/src/main/resources/formats/css_hsla.js
@@ -10,14 +10,11 @@ exports.config = () => ({
 });
 
 // convert the inputted hex color format into another format and return the final string value
-exports.convertHexColor = hexColor => {
-  const r = parseInt("0x" + hexColor.substring(0, 2));
-  const g = parseInt("0x" + hexColor.substring(2, 4));
-  const b = parseInt("0x" + hexColor.substring(4, 6));
+exports.convertColor = color => {
   // L
-  const rp = r / 255;
-  const gp = g / 255;
-  const bp = b / 255;
+  const rp = color.rgb.r / 255;
+  const gp = color.rgb.g / 255;
+  const bp = color.rgb.b / 255;
   const maxL = Math.max(rp, gp, bp);
   const minL = Math.min(rp, gp, bp);
   const luminescence = Math.ceil(((maxL + minL) / 2) * 100);
diff --git a/src/main/resources/formats/css_rgb.js b/src/main/resources/formats/css_rgb.js
@@ -10,9 +10,6 @@ exports.config = () => ({
 });
 
 // convert the inputted hex color format into another format and return the final string value
-exports.convertHexColor = hexColor => {
-  const r = parseInt("0x" + hexColor.substring(0, 2));
-  const g = parseInt("0x" + hexColor.substring(2, 4));
-  const b = parseInt("0x" + hexColor.substring(4, 6));
-  return "rgb(" + r + "," + g + "," + b + ")";
+exports.convertColor = color => {
+  return "rgb(" + color.rgb.r + "," + color.rgb.g + "," + color.rgb.b + ")";
 };
diff --git a/src/main/resources/formats/css_rgba.js b/src/main/resources/formats/css_rgba.js
@@ -10,9 +10,6 @@ exports.config = () => ({
 });
 
 // convert the inputted hex color format into another format and return the final string value
-exports.convertHexColor = hexColor => {
-  const r = parseInt("0x" + hexColor.substring(0, 2));
-  const g = parseInt("0x" + hexColor.substring(2, 4));
-  const b = parseInt("0x" + hexColor.substring(4, 6));
-  return "rgb(" + r + "," + g + "," + b + ",1)";
+exports.convertColor = color => {
+  return "rgb(" + color.rgb.r + "," + color.rgb.g + "," + color.rgb.b + ",1)";
 };
diff --git a/src/main/windows/HistoryWindowController.js b/src/main/windows/HistoryWindowController.js
@@ -25,14 +25,7 @@ class HistoryWindowController {
     // and load the index.html of the app.
     this.window.loadFile(__dirname + "./../../views/history.html");
 
-    // Open the DevTools.
-    // historyWindow.webContents.openDevTools({detached: true})
-
-    // Emitted when the window is closed.
     this.window.on("closed", () => {
-      // Dereference the window object, usually you would store windows
-      // in an array if your app supports multi windows, this is the time
-      // when you should delete the corresponding element.
       this.window = null;
     });
 
diff --git a/src/main/windows/PopoverWindowController.js b/src/main/windows/PopoverWindowController.js
@@ -16,6 +16,7 @@ class PopoverWindowController {
    * @memberof PopoverWindowController
    */
   constructor(wm, options, position) {
+    // eslint-disable-next-line security-node/detect-insecure-randomness
     this._windowId = Math.random()
       .toString(36)
       .substr(2, 9);
@@ -60,7 +61,11 @@ class PopoverWindowController {
    * @param {[{clickHandler: function, title: string, sub_title: string, icon: string, isSeparator: boolean, value: string}]} [options] popover window option items
    */
   setOptions(options) {
+    // Setup IPC event listeners for each option item that isn't a separator so
+    // that click handlers are called in the main process rather than render
+    // process
     const opts = options.map(val => {
+      // eslint-disable-next-line security-node/detect-insecure-randomness
       val._id = Math.random()
         .toString(36)
         .substr(2, 15);
@@ -74,6 +79,7 @@ class PopoverWindowController {
       }
       return val;
     });
+    // Send options to renderer
     this.window.webContents.send("options", {
       id: this._windowId,
       options: opts
diff --git a/src/main/windows/SettingsWindowController.js b/src/main/windows/SettingsWindowController.js
@@ -29,14 +29,7 @@ class SettingsWindowController {
     // and load the index.html of the app.
     this.window.loadFile(__dirname + "./../../views/settings.html");
 
-    // Open the DevTools.
-    // historyWindow.webContents.openDevTools({detached: true})
-
-    // Emitted when the window is closed.
     this.window.on("closed", e => {
-      // Dereference the window object, usually you would store windows
-      // in an array if your app supports multi windows, this is the time
-      // when you should delete the corresponding element.
       this.window = null;
     });
 
diff --git a/src/render/HistoryWindow/HistoryWindow.js b/src/render/HistoryWindow/HistoryWindow.js
@@ -79,7 +79,6 @@ class HistoryWindow {
         type: "IS_VISIBLE",
         windowName: "popover"
       });
-      console.log(dropdownState);
       if (!dropdownState.visible) {
         ipcRenderer.invoke("WINDOW", { type: "SHOW", windowName: "popover" });
         document.getElementById("select").classList.add("active");
diff --git a/src/render/HistoryWindow/Palette.js b/src/render/HistoryWindow/Palette.js
@@ -84,19 +84,10 @@ class Palette {
       if (!elColorListDeleteOption.classList.contains("disabled")) {
         ipcRenderer.invoke("PALETTE", { type: "DELETE", args: this._ID });
         this.removePalette(elColorList);
-        const windowBounds = await ipcRenderer.invoke("WINDOW", {
-          type: "GET_BOUNDS",
-          windowName: "history"
-        });
-        ipcRenderer.invoke("WINDOW", {
-          type: "SET_BOUNDS",
-          windowName: "history",
-          args: {
-            height: windowBounds.height - 110,
-            y: windowBounds.y + 110,
-            animate: true
-          }
-        });
+        this.changeHistoryWindowBounds(
+          windowBounds.height - 110,
+          windowBounds.y + 110
+        );
       }
     });
 
@@ -111,6 +102,31 @@ class Palette {
     return elColorList;
   }
 
+  /**
+   * Change the bounds of the history window for adding/removing palettes. This
+   * will increase or decrease the height and adjust the y coordinate
+   * accordingly
+   *
+   * @param {number} heightModifier the amount to increase or decrease the height
+   * @param {number} yModifier the amount to increase or decrease the y coordinate
+   * @memberof Palette
+   */
+  async changeHistoryWindowBounds(heightModifier, yModifier) {
+    const windowBounds = await ipcRenderer.invoke("WINDOW", {
+      type: "GET_BOUNDS",
+      windowName: "history"
+    });
+    ipcRenderer.invoke("WINDOW", {
+      type: "SET_BOUNDS",
+      windowName: "history",
+      args: {
+        height: windowBounds.height + heightModifier,
+        y: windowBounds.y + yModifier,
+        animate: true
+      }
+    });
+  }
+
   /**
    * Append a new palette to the list
    * @param {*} el the created element from this.CreateElement()
@@ -195,19 +211,7 @@ class Palette {
         e.dataTransfer.dropEffect = "copy";
 
         // Increase size of window to accommodate
-        const windowBounds = await ipcRenderer.invoke("WINDOW", {
-          type: "GET_BOUNDS",
-          windowName: "history"
-        });
-        ipcRenderer.invoke("WINDOW", {
-          type: "SET_BOUNDS",
-          windowName: "history",
-          args: {
-            height: windowBounds.height + 110,
-            y: windowBounds.y - 110,
-            animate: true
-          }
-        });
+        this.changeHistoryWindowBounds(110, -110);
         [
           temporaryPalette,
           temporaryPaletteElement
@@ -233,19 +237,7 @@ class Palette {
           });
           [temporaryPalette, temporaryPaletteElement] = [undefined, undefined];
         } else {
-          const windowBounds = await ipcRenderer.invoke("WINDOW", {
-            type: "GET_BOUNDS",
-            windowName: "history"
-          });
-          ipcRenderer.invoke("WINDOW", {
-            type: "SET_BOUNDS",
-            windowName: "history",
-            args: {
-              height: windowBounds.height - 110,
-              y: windowBounds.y + 110,
-              animate: true
-            }
-          });
+          this.changeHistoryWindowBounds(-110, 110);
           // remove temp palette
           temporaryPalette.removePalette(temporaryPaletteElement);
           [temporaryPalette, temporaryPaletteElement] = [undefined, undefined];
@@ -267,6 +259,7 @@ class Palette {
     const p = new Palette({
       colors: [],
       name: "New Color Palette",
+      // eslint-disable-next-line security-node/detect-insecure-randomness
       id: Math.random()
         .toString(36)
         .substr(2, 9)
diff --git a/src/render/PickerWindow/PickerWindow.js b/src/render/PickerWindow/PickerWindow.js
@@ -84,7 +84,6 @@ class PickerWindow {
     });
 
     window.addEventListener("keyup", event => {
-      console.log(event.key);
       if (
         event.key === "Escape" ||
         event.key === "Esc" ||
diff --git a/src/render/SettingsWindow/SettingsWindow.js b/src/render/SettingsWindow/SettingsWindow.js
@@ -44,7 +44,6 @@ class SettingsWindow {
 
         // Checkboxes
         const setCheckbox = (key, value) => {
-          console.log("setting", key);
           switch (key) {
             case "isHistoryLimit":
               if (value === true) {
@@ -201,7 +200,6 @@ class SettingsWindow {
           ipcRenderer
             .invoke("SETTING", { type: "CHECK_UPDATE" })
             .then(data => {
-              console.log(data);
               if (data.error !== null) {
                 console.error(data.error);
                 document.getElementById("update-status").innerHTML =
