Merge pull request #79 from Flow-Works/78-fix-security-issues

[🔒] Resolved potential XSS attacks

package-lock.json

@@ -12,8 +12,8 @@
         "@ptkdev/logger": "^1.8.0",
         "eruda": "^3.0.1",
         "filer": "^1.4.1",
-        "prism-code-editor": "^2.2.1",
         "material-symbols": "^0.14.1",
+        "prism-code-editor": "^2.2.1",
         "uuid": "^9.0.1"
       },
       "devDependencies": {

public/uv/uv.bundle.js

@@ -17962,6 +17962,8 @@
   
   function deepAssign(dest, src) {
       for (const key in src) {
+          if (!src.hasOwnProperty(key)) continue;
+          if (key === "__proto__" || key === "constructor") continue;
           if (hasOwnProperty.call(src, key)) {
               if (isObject(dest[key])) {
                   deepAssign(dest[key], copy(src[key]));
@@ -39189,7 +39191,7 @@
           str = new String(str).trim();
           if (!str || this.urlRegex.test(str)) return str;
   
-          if (str.startsWith('javascript:')) {
+          if (str.startsWith('javascript:') || str.startsWith("data:") || str.startsWith("vbscript:")) {
               return 'javascript:' + this.js.rewrite(str.slice('javascript:'.length));
           };
   

src/structures/FlowWindow.ts

@@ -1,6 +1,7 @@
 import { v4 as uuid } from 'uuid'
 import WindowManager from '../instances/WindowManager'
 import { FlowWindowConfig } from '../types'
+import { sanitize } from '../utils'
 
 /**
  * Makes an element draggable.
@@ -108,9 +109,9 @@ class FlowWindow {
     this.element.style.height = `${config.height ?? 200}px`
 
     this.header = document.createElement('window-header')
-    this.header.innerHTML = `<img src="${config.icon}"></img> <div class="title">${config.title}</div><div style="flex:1;"></div><i id="min" class='material-symbols-rounded' style="margin-bottom: 5px;">minimize</i><i id="close" class='material-symbols-rounded'>close</i>`
+    this.header.innerHTML = `<img src="${sanitize(config.icon)}"></img> <div class="title">${sanitize(config.title)}</div><div style="flex:1;"></div><i id="min" class='material-symbols-rounded' style="margin-bottom: 5px;">minimize</i><i id="close" class='material-symbols-rounded'>close</i>`
     if (config.canResize) {
-      this.header.innerHTML = `<img src="${config.icon}"></img> <div class="title">${config.title}</div><div style="flex:1;"></div><i id="min" class='material-symbols-rounded' style="margin-bottom: 5px;">minimize</i><i id="max" class='material-symbols-rounded' style="font-size: 20px;">square</i><i id="close" class='material-symbols-rounded'>close</i>`
+      this.header.innerHTML = `<img src="${sanitize(config.icon)}"></img> <div class="title">${sanitize(config.title)}</div><div style="flex:1;"></div><i id="min" class='material-symbols-rounded' style="margin-bottom: 5px;">minimize</i><i id="max" class='material-symbols-rounded' style="font-size: 20px;">square</i><i id="close" class='material-symbols-rounded'>close</i>`
     }
 
     (this.header.querySelector('#close') as HTMLElement).onclick = () => {

src/utils.ts

@@ -30,3 +30,24 @@ export const getTime = async (): Promise<string> => {
 
   return timeString
 }
+
+/**
+ * Sanitizes a string of all HTML elements.
+ *
+ * @param string String to be sanitized
+ * @returns Sanitized string
+ */
+export const sanitize = (string: string): string => {
+  const map: {
+    [key: string]: string
+  } = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    '\'': '&#x27;',
+    '/': '&#x2F;'
+  }
+  const reg = /[&<>"'/]/ig
+  return string.replace(reg, (match) => (map[match]))
+}