Merge pull request #56 from gitmotion/fix/escape-html-xss

Add html escaping to frontend uploader for xss security

.env.example

@@ -5,7 +5,8 @@
 # Port for the server (default: 3000)
 PORT=3000
 
-# Base URL for the application (default: http://localhost:PORT)
+# Base URL for the application (default: http://localhost:PORT) - 
+# You must update this to the url you use to access your site
 BASE_URL=http://localhost:3000/
 
 # Node environment (default: development)

.github/workflows/docker-publish.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main # Trigger the workflow on pushes to the main branch
+      - dev  # Trigger the workflow on pushes to the dev branch
 
 jobs:
   build-and-push:
@@ -39,6 +40,8 @@ jobs:
           images: |
             name=dumbwareio/dumbdrop
           tags: |
+            # Add :dev tag for pushes to the dev branch
+            type=raw,value=dev,enable=${{ github.ref == 'refs/heads/dev' }}
             # the semantic versioning tags add "latest" when a version tag is present
             # but since version tags aren't being used (yet?) let's add "latest" anyway
             type=raw,value=latest

README.md

@@ -52,6 +52,7 @@ services:
             # Upload without clicking button
             AUTO_UPLOAD: false
             # The base URL for the application
+            # You must update this to the url you use to access your site
             BASE_URL: http://localhost:3000
 ```
 Then run:

docker-compose.yml

@@ -13,7 +13,7 @@ services:
             MAX_FILE_SIZE: 1024  # Maximum file size in MB
             DUMBDROP_PIN: 123456  # Optional PIN protection (4-10 digits, leave empty to disable)
             AUTO_UPLOAD: true  # Upload without clicking button
-            BASE_URL: http://localhost:3000  # The base URL for the application
+            BASE_URL: http://localhost:3000  # The base URL for the application, You must update this to the url you use to access your site
             
             # Additional available environment variables (commented out with defaults)
             # PORT: 3000  # Server port (default: 3000)

package-lock.json

@@ -1871,9 +1871,9 @@
       }
     },
     "node_modules/nodemon/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -2542,9 +2542,9 @@
       }
     },
     "node_modules/simple-update-notifier/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
       "dev": true,
       "license": "ISC",
       "bin": {

public/assets/icon.svg

@@ -1,14 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <!-- Background -->
-    <rect width="256" height="256" rx="32" fill="#4CAF50"/>
-    
-    <!-- File outline -->
-    <path d="M76 56C76 47.1634 83.1634 40 92 40H140L180 80V200C180 208.837 172.837 216 164 216H92C83.1634 216 76 208.837 76 200V56Z" fill="white"/>
-    
-    <!-- Folded corner -->
-    <path d="M140 40L180 80H148C143.582 80 140 76.4183 140 72V40Z" fill="#E8E8E8"/>
-    
-    <!-- Arrow -->
-    <path d="M128 96L96 128H116V168H140V128H160L128 96Z" fill="#4CAF50"/>
-</svg> 
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><circle cx="256" cy="256" r="232.7" style="opacity:.2;fill:#487bb7"/><path d="M256 512C114.8 512 0 397.2 0 256S114.8 0 256 0s256 114.8 256 256-114.8 256-256 256m0-465.4c-115.5 0-209.5 94-209.5 209.5s94 209.5 209.5 209.5 209.5-94 209.5-209.5c0-115.6-94-209.5-209.5-209.5M175.9 353H336c3.3 0 5.9 2.9 5.9 6.5V377c0 3.6-2.6 6.5-5.9 6.5H175.9c-3.3 0-5.9-2.9-5.9-6.5v-17.5c0-3.5 2.7-6.5 5.9-6.5m75.3-238.6-79.3 81.1c-4.1 4.2-1.1 11.3 4.8 11.3h36.9c3.7 0 6.7 3 6.7 6.7v108.4c0 3.7 3 6.7 6.7 6.7h58c3.7 0 6.7-3 6.7-6.7V213.5c0-3.7 3-6.7 6.7-6.7h36.9c5.9 0 8.9-7.1 4.8-11.3l-79.3-81.1c-2.6-2.6-7-2.6-9.6 0" style="fill:#487bb7"/></svg>

public/index.html

@@ -88,6 +88,17 @@
             return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
         }
 
+        // Security helper to escape HTML to prevent XSS
+        function escapeHtml(text) {
+            if (!text) return '';
+            return String(text)
+                .replace(/&/g, '&')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#039;');
+        }
+
         class FileUploader {
             constructor(file, batchId) {
                 this.file = file;
@@ -288,7 +299,8 @@
                 
                 const label = document.createElement('div');
                 label.className = 'progress-label';
-                label.textContent = this.file.webkitRelativePath || this.file.name;
+                const fileName = this.file.webkitRelativePath || this.file.name;
+                label.textContent = escapeHtml(fileName);
 
                 const progress = document.createElement('div');
                 progress.className = 'progress';
@@ -809,7 +821,7 @@
                     return relativePath.split('/').length === 1;
                 }).length;
                 
-                folderItem.innerHTML = `📁 ${folder.name}/ (${formatFileSize(folder.size)} - ${totalFiles} files)`;
+                folderItem.textContent = `📁 ${escapeHtml(folder.name)}/ (${formatFileSize(folder.size)} - ${totalFiles} files)`;
                 
                 // Add files in folder
                 const filesList = document.createElement('div');
@@ -824,7 +836,7 @@
                         const fileItem = document.createElement('div');
                         fileItem.className = 'file-item nested';
                         const relativePath = file.webkitRelativePath.substring(folder.name.length + 1);
-                        fileItem.innerHTML = `📄 ${relativePath} (${formatFileSize(file.size)})`;
+                        fileItem.textContent = `📄 ${escapeHtml(relativePath)} (${formatFileSize(file.size)})`;
                         filesList.appendChild(fileItem);
                     });
                 
@@ -846,7 +858,7 @@
                 .forEach(file => {
                     const fileItem = document.createElement('div');
                     fileItem.className = 'file-item';
-                    fileItem.innerHTML = `📄 ${file.name} (${formatFileSize(file.size)})`;
+                    fileItem.textContent = `📄 ${escapeHtml(file.name)} (${formatFileSize(file.size)})`;
                     fileList.appendChild(fileItem);
                 });