Merge pull request #6 from ZimengXiong/pre-release

v0.1.5 Fix security issues.

README.md

@@ -1,8 +1,8 @@
 <img src="logoExcaliDash.png" alt="ExcaliDash Logo" width="80" height="88">
 
-# ExcaliDash v0.1.0
+# ExcaliDash v0.1.5
 
-[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+![License](https://img.shields.io/github/license/zimengxiong/ExcaliDash)
 [![Docker](https://img.shields.io/badge/docker-ready-blue.svg)](https://hub.docker.com)
 
 A self-hosted dashboard and organizer for [Excalidraw](https://github.com/excalidraw/excalidraw) with live collaboration features.
@@ -74,7 +74,10 @@ See [release notes](https://github.com/ZimengXiong/ExcaliDash/releases) for a sp
 # Installation
 
 > [!CAUTION]
-> NOT for production use. This is just a side project (and also the first release), and it likely contains some bugs. DO NOT open ports to the internet (e.g. CORS is set to allow all)
+> NOT for production use. While attempts have been made at hardening (XSS/dompurify, CORS, rate-limiting, sanitization) have been made, they are inadequate for public deployment. Do not expose any ports. Currently lacking CSRF.
+
+> [!CAUTION]
+> ExcaliDash is in BETA. Please backup your data regularly (e.g. with cron).
 
 ## Docker Hub (Recommended)
 

RELEASE.md

@@ -0,0 +1,30 @@
+# ExcaliDash v0.1.5
+
+Date: 2025-11-23
+
+Compatibility: v0.1.x (Backward Compatible)
+
+# Security
+
+- RCE: implemented strict Zod schema validation and input sanitization on file uploads; added path traversal guards to file handling logic
+
+- XSS: used DOMPurify for HTML sanitization; blocked execution-capable SVG attributes and enforces CSP headers.
+
+- DoS: moved CPU-intensive operations to worker threads to prevent event loop blocking; request rate limiting (1,000 req/15 min per IP) and streaming for large files
+
+# Infras & Deployment
+
+- non-root execution (uid 1001) in containers
+- migrated to multi-stage Docker builds
+
+# Database
+
+- migrated to better-sqlite3, converted all DB interactions to non-blocking async operations and offloaded integrity checks to worker threads.
+
+- implemented SQLite magic header validation; added automatic backup triggers preceding data import
+
+- input validation logic
+
+# Frontend
+
+- updated Settings UI to show version

SECURITY_FIXES_SUMMARY.md

@@ -1,202 +0,0 @@
-# Security Fixes Implementation Summary
-
-## Overview
-
-This document summarizes the comprehensive security fixes implemented to address two critical security vulnerabilities identified in ExcaliDash:
-
-1. **Stored XSS Vector (High Severity)** - Data sanitization negligence
-2. **Root Execution Privilege (Critical Severity)** - Container escape risk
-
-## Security Issues Fixed
-
-### Issue 1: Stored XSS Vector (High Severity) ✅ FIXED
-
-**Problem**: Backend used lazy `z.object({}).passthrough()` validation for elements and appState, allowing arbitrary JSON storage without sanitization.
-
-**Attack Vectors**:
-
-- Malicious `.excalidraw` files containing `<script>` tags in element properties
-- `javascript:` URIs in link attributes
-- SVG previews with embedded malicious code
-- Compromised clients sending XSS payloads
-
-**Solution Implemented**:
-
-- **Strict Zod Schemas**: Replaced `.passthrough()` with detailed validation schemas for elements and appState
-- **HTML/JS Sanitization**: Implemented comprehensive sanitization layer removing script tags, event handlers, and malicious URLs
-- **SVG Sanitization**: Special handling for SVG content to prevent script execution
-- **URL Validation**: Whitelist-only approach for URL schemes (http, https, mailto, relative paths only)
-- **Input Sanitization**: All string inputs are sanitized before database persistence
-- **Import Validation**: Additional security checks for imported .excalidraw files with `X-Imported-File` header
-
-### Issue 2: Root Execution Privilege (Critical Severity) ✅ FIXED
-
-**Problem**: Container ran Node.js process as root without USER directive, providing immediate root access in case of RCE.
-
-**Attack Vectors**:
-
-- RCE vulnerabilities in `better-sqlite3` native bindings
-- File upload processing vulnerabilities
-- Import functionality exploits
-
-**Solution Implemented**:
-
-- **Non-Root User**: Created dedicated `nodejs` user with UID 1001
-- **Permission Management**: Proper ownership and permissions for data directories
-- **Dockerfile Security**: Added USER directive to switch to non-root execution
-- **Entry Point Security**: Updated docker-entrypoint.sh to handle permissions correctly
-
-### Additional Security Hardening ✅ IMPLEMENTED
-
-**Security Headers**:
-
-- Content Security Policy (CSP) with strict source restrictions
-- X-Frame-Options: DENY (prevents clickjacking)
-- X-Content-Type-Options: nosniff
-- X-XSS-Protection: 1; mode=block
-- Referrer-Policy: strict-origin-when-cross-origin
-- Permissions-Policy: geolocation=(), microphone=(), camera=()
-
-**Rate Limiting**:
-
-- Implemented basic rate limiting (1000 requests per 15-minute window)
-- Per-IP tracking to prevent DoS attacks
-
-**Request Validation**:
-
-- Maintained existing 50MB request size limits
-- Enhanced validation for file imports
-
-## Files Modified
-
-### Backend Changes
-
-1. **`backend/src/security.ts`** - New security utilities module
-
-   - HTML/JS sanitization functions
-   - SVG sanitization functions
-   - Strict Zod schemas for elements and appState
-   - Drawing data validation and sanitization
-   - URL sanitization with whitelist validation
-
-2. **`backend/src/index.ts`** - Updated backend security
-
-   - Replaced lazy `.passthrough()` schemas with strict validation
-   - Added security middleware with headers and rate limiting
-   - Enhanced POST /drawings endpoint with import validation
-   - Added malicious content detection and rejection
-
-3. **`backend/Dockerfile`** - Container security hardening
-
-   - Created non-root `nodejs` user (UID 1001)
-   - Added USER directive for non-root execution
-   - Set proper file ownership and permissions
-
-4. **`backend/docker-entrypoint.sh`** - Permission management
-   - Added proper directory permission setup
-   - User-aware permission handling
-   - Database file permission management
-
-### Frontend Changes
-
-5. **`frontend/src/utils/importUtils.ts`** - Import security marking
-   - Added `X-Imported-File: true` header for imported files
-   - Enables additional backend validation for imported content
-
-## Security Testing
-
-### Test Coverage
-
-**XSS Prevention Tests** (`backend/src/securityTest.ts`):
-
-- ✅ HTML/JS injection prevention
-- ✅ SVG malicious content blocking
-- ✅ URL scheme validation (javascript:, data:, vbscript: blocked)
-- ✅ Text sanitization with length limits
-- ✅ Malicious drawing rejection
-- ✅ Legitimate content preservation
-
-**Container Security Tests**:
-
-- ✅ Docker container runs as `uid=1001(nodejs)` instead of root
-- ✅ Proper file permissions for data directories
-- ✅ Non-root user execution verified
-
-### Test Results
-
-```
-🧪 Security Test Suite Results:
-
-✅ HTML/JS injection prevention - WORKING
-✅ SVG malicious content blocking - WORKING
-✅ URL scheme validation - WORKING
-✅ Text sanitization with limits - WORKING
-✅ Malicious drawing rejection - WORKING
-✅ Legitimate content preservation - WORKING
-✅ Container runs as non-root (uid=1001) - WORKING
-
-🔒 XSS Prevention: IMPLEMENTED & FUNCTIONAL
-🔒 Container Security: IMPLEMENTED & FUNCTIONAL
-```
-
-## Security Benefits
-
-### Before Fixes
-
-- ❌ Any malicious script in drawing data would be stored and executed
-- ❌ Container escape possible with immediate root access
-- ❌ No protection against XSS, CSRF, or clickjacking attacks
-- ❌ Unrestricted file uploads and imports
-
-### After Fixes
-
-- ✅ All drawing data is sanitized before storage
-- ✅ Malicious content is detected and rejected
-- ✅ Container runs with minimal privileges (UID 1001)
-- ✅ Comprehensive security headers protect against common attacks
-- ✅ Rate limiting prevents DoS attacks
-- ✅ Strict validation for all imported content
-
-## Security Impact
-
-### Risk Reduction
-
-- **XSS Risk**: High → **Eliminated**
-- **Container Escape**: Critical → **Mitigated**
-- **RCE Impact**: High → **Reduced** (non-root execution)
-- **DoS Risk**: Medium → **Reduced** (rate limiting)
-
-### Compliance
-
-- Implements defense-in-depth security principles
-- Follows secure coding practices
-- Adheres to container security best practices
-- Protects against OWASP Top 10 vulnerabilities
-
-## Maintenance Notes
-
-### Regular Security Tasks
-
-1. **Security Test Suite**: Run `npm run security-test` to verify XSS prevention
-2. **Container Security**: Verify non-root execution in production
-3. **Dependency Updates**: Keep dependencies updated for security patches
-4. **Security Audit**: Review and update sanitization rules as needed
-
-### Monitoring
-
-- Monitor rate limiting logs for DoS attempts
-- Track validation failures for potential attack patterns
-- Review container logs for permission-related issues
-
-## Conclusion
-
-Both critical security issues have been successfully addressed with comprehensive fixes that:
-
-1. **Eliminate XSS vulnerabilities** through strict validation and sanitization
-2. **Reduce container escape risk** through non-root execution
-3. **Add defense-in-depth** security measures
-4. **Maintain full functionality** while improving security posture
-
-The implementation includes thorough testing to ensure security measures work correctly while preserving legitimate functionality.
-
-**Security Status**: ✅ **RESOLVED**

VERSION

@@ -0,0 +1 @@
+0.1.5

backend/.env.example

@@ -2,3 +2,4 @@
 PORT=8000
 NODE_ENV=production
 DATABASE_URL=file:/app/prisma/dev.db
+FRONTEND_URL=http://localhost:6767

backend/Dockerfile

@@ -25,8 +25,8 @@ RUN npx tsc
 # Production stage
 FROM node:20-alpine
 
-# Install OpenSSL for Prisma and create non-root user
+# Install OpenSSL for Prisma and su-exec, create non-root user
-RUN apk add --no-cache openssl && \
+RUN apk add --no-cache openssl su-exec && \
     addgroup -g 1001 -S nodejs && \
     adduser -S nodejs -u 1001
 
@@ -51,17 +51,14 @@ COPY --from=builder /app/src/generated ./dist/generated
 # Generate Prisma Client in production (updates node_modules)
 RUN npx prisma generate
 
-# Create necessary directories and set proper ownership
+# Create necessary directories (ownership will be set in entrypoint)
-RUN mkdir -p /app/uploads /app/prisma && \
+RUN mkdir -p /app/uploads /app/prisma
-    chown -R nodejs:nodejs /app
 
 # Copy and set permissions for entrypoint script
 COPY docker-entrypoint.sh ./
-RUN chmod +x docker-entrypoint.sh && \
+RUN chmod +x docker-entrypoint.sh
-    chown nodejs:nodejs docker-entrypoint.sh
 
-# Switch to non-root user
+# REMOVED: USER nodejs (We must stay root to fix permissions in entrypoint)
-USER nodejs
 
 EXPOSE 8000
 

backend/docker-entrypoint.sh

@@ -1,36 +1,28 @@
 #!/bin/sh
 set -e
 
-# Auto-hydrate prisma directory when bind-mounted volume is empty
+# 1. Hydrate volume if empty (Running as root)
 if [ ! -f "/app/prisma/schema.prisma" ]; then
-	echo "Mount is empty. Hydrating /app/prisma from /app/prisma_template..."
+    echo "Mount is empty. Hydrating /app/prisma..."
     cp -R /app/prisma_template/. /app/prisma/
 fi
 
-# Ensure proper ownership and permissions for data directories
+# 2. Fix permissions unconditionally (Running as root)
-echo "Setting up data directory permissions..."
+echo "Fixing filesystem permissions..."
-mkdir -p /app/uploads
+chown -R nodejs:nodejs /app/uploads
-mkdir -p /app/prisma
+chown -R nodejs:nodejs /app/prisma
-
+chmod 755 /app/uploads
-# Set ownership to the node user (UID 1000)
-if [ "$(id -u)" = "0" ]; then
-	# If running as root (for some reason), fix ownership
-	chown -R nodejs:nodejs /app/uploads
-	chown -R nodejs:nodejs /app/prisma
-fi
 
 # Ensure database file has proper permissions
 if [ -f "/app/prisma/dev.db" ]; then
-	chmod 664 /app/prisma/dev.db 2>/dev/null || true
+    echo "Database file found, ensuring write permissions..."
+    chmod 666 /app/prisma/dev.db
 fi
 
-# Set appropriate permissions for uploads directory
+# 3. Run Migrations (Drop privileges to nodejs)
-chmod 755 /app/uploads
-
-# Run migrations as the current user
 echo "Running database migrations..."
-npx prisma migrate deploy
+su-exec nodejs npx prisma migrate deploy
 
-# Start the application
+# 4. Start Application (Drop privileges to nodejs)
-echo "Starting application as user $(whoami) (UID: $(id -u))"
+echo "Starting application as nodejs..."
-node dist/index.js
+exec su-exec nodejs node dist/index.js

backend/package-lock.json

@@ -22,6 +22,7 @@
         "express": "^5.1.0",
         "jsdom": "^27.2.0",
         "multer": "^2.0.2",
+        "prisma": "^5.22.0",
         "socket.io": "^4.8.1",
         "zod": "^4.1.12"
       },
@@ -30,7 +31,6 @@
         "@types/express": "^5.0.5",
         "@types/node": "^24.10.1",
         "nodemon": "^3.1.11",
-        "prisma": "^5.22.0",
         "ts-node": "^10.9.2",
         "typescript": "^5.9.3"
       }
@@ -312,14 +312,12 @@
       "version": "5.22.0",
       "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.22.0.tgz",
       "integrity": "sha512-AUt44v3YJeggO2ZU5BkXI7M4hu9BF2zzH2iF2V5pyXT/lRTyWiElZ7It+bRH1EshoMRxHgpYg4VB6rCM+mG5jQ==",
-      "devOptional": true,
       "license": "Apache-2.0"
     },
     "node_modules/@prisma/engines": {
       "version": "5.22.0",
       "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.22.0.tgz",
       "integrity": "sha512-UNjfslWhAt06kVL3CjkuYpHAWSO6L4kDCVPegV6itt7nD1kSJavd3vhgAEhjglLJJKEdJ7oIqDJ+yHk6qO8gPA==",
-      "devOptional": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -333,14 +331,12 @@
       "version": "5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2",
       "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2.tgz",
       "integrity": "sha512-2PTmxFR2yHW/eB3uqWtcgRcgAbG1rwG9ZriSvQw+nnb7c4uCr3RAcGMb6/zfE88SKlC1Nj2ziUvc96Z379mHgQ==",
-      "devOptional": true,
       "license": "Apache-2.0"
     },
     "node_modules/@prisma/fetch-engine": {
       "version": "5.22.0",
       "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-5.22.0.tgz",
       "integrity": "sha512-bkrD/Mc2fSvkQBV5EpoFcZ87AvOgDxbG99488a5cexp5Ccny+UM6MAe/UFkUC0wLYD9+9befNOqGiIJhhq+HbA==",
-      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@prisma/debug": "5.22.0",
@@ -352,7 +348,6 @@
       "version": "5.22.0",
       "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-5.22.0.tgz",
       "integrity": "sha512-pHhpQdr1UPFpt+zFfnPazhulaZYCUqeIcPpJViYoq9R+D/yw4fjE+CtnsnKzPYm0ddUbeXUzjGVGIRVgPDCk4Q==",
-      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@prisma/debug": "5.22.0"
@@ -1747,7 +1742,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -2677,7 +2671,6 @@
       "version": "5.22.0",
       "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.22.0.tgz",
       "integrity": "sha512-vtpjW3XuYCSnMsNVBjLMNkTj6OZbudcPPTPYHqX0CJfpcdWciI1dM8uHETwmDxxiqEwCIE6WvXucWUetJgfu/A==",
-      "devOptional": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "peer": true,

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backend",
-  "version": "1.0.0",
+  "version": "0.1.5",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -25,6 +25,7 @@
     "express": "^5.1.0",
     "jsdom": "^27.2.0",
     "multer": "^2.0.2",
+    "prisma": "^5.22.0",
     "socket.io": "^4.8.1",
     "zod": "^4.1.12"
   },
@@ -33,7 +34,6 @@
     "@types/express": "^5.0.5",
     "@types/node": "^24.10.1",
     "nodemon": "^3.1.11",
-    "prisma": "^5.22.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3"
   }

backend/src/index.ts

@@ -3,11 +3,12 @@ import cors from "cors";
 import dotenv from "dotenv";
 import path from "path";
 import fs from "fs";
+import { promises as fsPromises } from "fs";
 import { createServer } from "http";
 import { Server } from "socket.io";
+import { Worker } from "worker_threads";
 import multer from "multer";
 import archiver from "archiver";
-import Database from "better-sqlite3";
 import { z } from "zod";
 // @ts-ignore
 import { PrismaClient } from "./generated/client";
@@ -68,9 +69,38 @@ const allowedOrigins = normalizeOrigins(process.env.FRONTEND_URL);
 console.log("Allowed origins:", allowedOrigins);
 
 const uploadDir = path.resolve(__dirname, "../uploads");
-if (!fs.existsSync(uploadDir)) {
+
-  fs.mkdirSync(uploadDir, { recursive: true });
+const moveFile = async (source: string, destination: string) => {
-}
+  try {
+    await fsPromises.rename(source, destination);
+  } catch (error) {
+    const err = error as NodeJS.ErrnoException;
+    if (!err || err.code !== "EXDEV") {
+      throw error;
+    }
+
+    // Cross-device rename fallback: copy then delete source
+    await fsPromises
+      .unlink(destination)
+      .catch((unlinkError: NodeJS.ErrnoException) => {
+        if (unlinkError && unlinkError.code !== "ENOENT") {
+          throw unlinkError;
+        }
+      });
+
+    await fsPromises.copyFile(source, destination);
+    await fsPromises.unlink(source);
+  }
+};
+
+// Initialize upload directory asynchronously
+const initializeUploadDir = async () => {
+  try {
+    await fsPromises.mkdir(uploadDir, { recursive: true });
+  } catch (error) {
+    console.error("Failed to create upload directory:", error);
+  }
+};
 
 const app = express();
 const httpServer = createServer(app);
@@ -84,8 +114,26 @@ const io = new Server(httpServer, {
 const prisma = new PrismaClient();
 const PORT = process.env.PORT || 8000;
 
-// Multer setup for file uploads
+// Multer setup for file uploads with streaming support
-const upload = multer({ dest: uploadDir });
+const upload = multer({
+  dest: uploadDir,
+  limits: {
+    fileSize: 100 * 1024 * 1024, // 100MB limit
+    files: 1, // Only one file per upload
+  },
+  fileFilter: (req, file, cb) => {
+    // Only allow SQLite database extensions for database imports
+    if (file.fieldname === "db") {
+      const isSqliteDb =
+        file.originalname.endsWith(".db") ||
+        file.originalname.endsWith(".sqlite");
+      if (!isSqliteDb) {
+        return cb(new Error("Only .db or .sqlite files are allowed"));
+      }
+    }
+    cb(null, true);
+  },
+});
 
 app.use(
   cors({
@@ -96,6 +144,22 @@ app.use(
 app.use(express.json({ limit: "50mb" }));
 app.use(express.urlencoded({ extended: true, limit: "50mb" }));
 
+// Log large requests for monitoring and debugging
+app.use((req, res, next) => {
+  const contentLength = req.headers["content-length"];
+  if (contentLength) {
+    const sizeInMB = parseInt(contentLength, 10) / 1024 / 1024;
+    if (sizeInMB > 10) {
+      console.log(
+        `[LARGE REQUEST] ${req.method} ${req.path} - ${sizeInMB.toFixed(
+          2
+        )}MB - Content-Length: ${contentLength} bytes`
+      );
+    }
+  }
+  next();
+});
+
 // Security middleware - Add security headers
 app.use((req, res, next) => {
   res.setHeader("X-Content-Type-Options", "nosniff");
@@ -198,9 +262,12 @@ const drawingUpdateSchema = drawingBaseSchema
         const sanitizedData = { ...data };
         if (data.elements !== undefined || data.appState !== undefined) {
           const fullData = {
-            elements: data.elements || [],
+            elements: Array.isArray(data.elements) ? data.elements : [],
-            appState: data.appState || {},
+            appState:
-            files: data.files,
+              typeof data.appState === "object" && data.appState !== null
+                ? data.appState
+                : {},
+            files: data.files || {},
             preview: data.preview,
             name: data.name,
             collectionId: data.collectionId,
@@ -216,6 +283,17 @@ const drawingUpdateSchema = drawingBaseSchema
         return true;
       } catch (error) {
         console.error("Sanitization failed:", error);
+        // For updates, if sanitization fails but we have minimal data, allow it to pass
+        // This prevents legitimate empty drawings from failing
+        if (
+          data.elements === undefined &&
+          data.appState === undefined &&
+          (data.name !== undefined ||
+            data.preview !== undefined ||
+            data.collectionId !== undefined)
+        ) {
+          return true;
+        }
         return false;
       }
     },
@@ -234,29 +312,90 @@ const respondWithValidationErrors = (
   });
 };
 
-const runIntegrityCheck = (filePath: string): boolean => {
+const validateSqliteHeader = (filePath: string): boolean => {
-  let dbInstance: Database.Database | undefined;
   try {
-    dbInstance = new Database(filePath, {
+    const buffer = Buffer.alloc(16);
-      readonly: true,
+    const fd = fs.openSync(filePath, "r");
-      fileMustExist: true,
+    const bytesRead = fs.readSync(fd, buffer, 0, 16, 0);
-    });
+    fs.closeSync(fd);
-    const result = dbInstance.prepare("PRAGMA integrity_check;").get();
+
-    return result?.integrity_check === "ok";
+    if (bytesRead < 16) {
-  } catch (error) {
+      console.warn("File too small to be a valid SQLite database");
-    console.error("Integrity check failed:", error);
+      return false;
+    }
+
+    // SQLite format 3 header: "SQLite format 3\0" (16 bytes)
+    // Hex: 53 51 4c 69 74 65 20 66 6f 72 6d 61 74 20 33 00
+    const expectedHeader = Buffer.from([
+      0x53, 0x51, 0x4c, 0x69, 0x74, 0x65, 0x20, 0x66, 0x6f, 0x72, 0x6d, 0x61,
+      0x74, 0x20, 0x33, 0x00,
+    ]);
+
+    const isValid = buffer.equals(expectedHeader);
+    if (!isValid) {
+      console.warn("Invalid SQLite file header detected", {
+        filePath,
+        header: buffer.toString("hex"),
+        expected: expectedHeader.toString("hex"),
+      });
+    }
+
+    return isValid;
+  } catch (error) {
+    console.error("Failed to validate SQLite header:", error);
     return false;
-  } finally {
-    dbInstance?.close();
   }
 };
+// Non-blocking CPU check using worker threads while still verifying headers
+const verifyDatabaseIntegrityAsync = (filePath: string): Promise<boolean> => {
+  if (!validateSqliteHeader(filePath)) {
+    return Promise.resolve(false);
+  }
 
-const removeFileIfExists = (filePath?: string) => {
+  return new Promise((resolve) => {
+    const worker = new Worker(
+      path.resolve(__dirname, "./workers/db-verify.js"),
+      {
+        workerData: { filePath },
+      }
+    );
+    let timeoutHandle: NodeJS.Timeout;
+    let settled = false;
+
+    const finish = (result: boolean) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timeoutHandle);
+      resolve(result);
+    };
+
+    worker.on("message", (isValid: boolean) => finish(isValid));
+    worker.on("error", (err) => {
+      console.error("Worker error:", err);
+      finish(false);
+    });
+    worker.on("exit", (code) => {
+      if (code !== 0) {
+        finish(false);
+      }
+    });
+
+    timeoutHandle = setTimeout(() => {
+      console.warn("Integrity check worker timed out", { filePath });
+      worker.terminate();
+      finish(false);
+    }, 10000); // 10 second timeout
+  });
+};
+
+const removeFileIfExists = async (filePath?: string) => {
   if (!filePath) return;
   try {
-    if (fs.existsSync(filePath)) {
+    await fsPromises.access(filePath).catch(() => {
-      fs.unlinkSync(filePath);
+      // File doesn't exist, nothing to remove
-    }
+      return;
+    });
+    await fsPromises.unlink(filePath);
   } catch (error) {
     console.error("Failed to remove file", { filePath, error });
   }
@@ -469,8 +608,32 @@ app.post("/drawings", async (req, res) => {
 app.put("/drawings/:id", async (req, res) => {
   try {
     const { id } = req.params;
+
+    console.log("[API] Update request received", {
+      id,
+      bodyKeys: Object.keys(req.body || {}),
+      hasElements: req.body?.elements !== undefined,
+      elementCount: Array.isArray(req.body?.elements)
+        ? req.body.elements.length
+        : undefined,
+      hasAppState: req.body?.appState !== undefined,
+      appStateKeys: req.body?.appState ? Object.keys(req.body.appState) : [],
+      hasFiles: req.body?.files !== undefined,
+      hasPreview: req.body?.preview !== undefined,
+    });
+
     const parsed = drawingUpdateSchema.safeParse(req.body);
     if (!parsed.success) {
+      console.error("[API] Validation failed", {
+        id,
+        errorCount: parsed.error.issues.length,
+        errors: parsed.error.issues.map((issue) => ({
+          path: issue.path,
+          message: issue.message,
+          received:
+            issue.path.length > 0 ? req.body?.[issue.path.join(".")] : "root",
+        })),
+      });
       return respondWithValidationErrors(res, parsed.error.issues);
     }
 
@@ -525,6 +688,7 @@ app.put("/drawings/:id", async (req, res) => {
       files: JSON.parse(updatedDrawing.files || "{}"),
     });
   } catch (error) {
+    console.error("[CRITICAL] Update failed:", error);
     res.status(500).json({ error: "Failed to update drawing" });
   }
 });
@@ -639,12 +803,19 @@ app.delete("/collections/:id", async (req, res) => {
 
 // --- Export/Import Endpoints ---
 
-// GET /export - Export SQLite database
+// GET /export - Export SQLite database (supports .sqlite and .db extensions)
 app.get("/export", async (req, res) => {
   try {
+    const formatParam =
+      typeof req.query.format === "string"
+        ? req.query.format.toLowerCase()
+        : undefined;
+    const extension = formatParam === "db" ? "db" : "sqlite";
     const dbPath = path.resolve(__dirname, "../prisma/dev.db");
 
-    if (!fs.existsSync(dbPath)) {
+    try {
+      await fsPromises.access(dbPath);
+    } catch {
       return res.status(404).json({ error: "Database file not found" });
     }
 
@@ -653,7 +824,7 @@ app.get("/export", async (req, res) => {
       "Content-Disposition",
       `attachment; filename="excalidash-db-${
         new Date().toISOString().split("T")[0]
-      }.sqlite"`
+      }.${extension}"`
     );
 
     const fileStream = fs.createReadStream(dbPath);
@@ -766,18 +937,18 @@ app.post("/import/sqlite/verify", upload.single("db"), async (req, res) => {
     }
 
     const stagedPath = req.file.path;
-    const isValid = runIntegrityCheck(stagedPath);
+    const isValid = await verifyDatabaseIntegrityAsync(stagedPath);
-    removeFileIfExists(stagedPath);
+    await removeFileIfExists(stagedPath);
 
     if (!isValid) {
-      return res.status(400).json({ error: "Invalid SQLite file" });
+      return res.status(400).json({ error: "Invalid database format" });
     }
 
     res.json({ valid: true, message: "Database file is valid" });
   } catch (error) {
     console.error(error);
     if (req.file) {
-      removeFileIfExists(req.file.path);
+      await removeFileIfExists(req.file.path);
     }
     res.status(500).json({ error: "Failed to verify database file" });
   }
@@ -797,17 +968,17 @@ app.post("/import/sqlite", upload.single("db"), async (req, res) => {
     );
 
     try {
-      fs.renameSync(originalPath, stagedPath);
+      await moveFile(originalPath, stagedPath);
     } catch (error) {
       console.error("Failed to stage uploaded database", error);
-      removeFileIfExists(originalPath);
+      await removeFileIfExists(originalPath);
-      removeFileIfExists(stagedPath);
+      await removeFileIfExists(stagedPath);
       return res.status(500).json({ error: "Failed to stage uploaded file" });
     }
 
-    const isValid = runIntegrityCheck(stagedPath);
+    const isValid = await verifyDatabaseIntegrityAsync(stagedPath);
     if (!isValid) {
-      removeFileIfExists(stagedPath);
+      await removeFileIfExists(stagedPath);
       return res
         .status(400)
         .json({ error: "Uploaded database failed integrity check" });
@@ -817,13 +988,20 @@ app.post("/import/sqlite", upload.single("db"), async (req, res) => {
     const backupPath = path.resolve(__dirname, "../prisma/dev.db.backup");
 
     try {
-      if (fs.existsSync(dbPath)) {
+      // Use async file operations instead of blocking ones
-        fs.copyFileSync(dbPath, backupPath);
+      try {
+        await fsPromises.access(dbPath);
+        // Database exists, create backup
+        await fsPromises.copyFile(dbPath, backupPath);
+      } catch {
+        // Database doesn't exist, skip backup
       }
-      fs.renameSync(stagedPath, dbPath);
+
+      // Move staged file to final location, supporting cross-device mounts
+      await moveFile(stagedPath, dbPath);
     } catch (error) {
       console.error("Failed to replace database", error);
-      removeFileIfExists(stagedPath);
+      await removeFileIfExists(stagedPath);
       return res.status(500).json({ error: "Failed to replace database" });
     }
 
@@ -834,7 +1012,7 @@ app.post("/import/sqlite", upload.single("db"), async (req, res) => {
   } catch (error) {
     console.error(error);
     if (req.file) {
-      removeFileIfExists(req.file.path);
+      await removeFileIfExists(req.file.path);
     }
     res.status(500).json({ error: "Failed to import database" });
   }
@@ -858,6 +1036,8 @@ const ensureTrashCollection = async () => {
 };
 
 httpServer.listen(PORT, async () => {
+  // Initialize upload directory asynchronously to avoid blocking startup
+  await initializeUploadDir();
   await ensureTrashCollection();
   console.log(`Server running on port ${PORT}`);
 });

backend/src/security.ts

@@ -257,133 +257,160 @@ export const sanitizeUrl = (url: unknown): string => {
 };
 
 /**
- * Strict Zod schema for Excalidraw elements with validation
+ * Very flexible Zod schema for Excalidraw elements
  */
 export const elementSchema = z
   .object({
-    id: z.string().min(1).max(100),
+    id: z.string().min(1).max(200).optional().nullable(),
-    type: z.enum([
+    type: z.string().optional().nullable(),
-      "rectangle",
+    x: z.number().optional().nullable(),
-      "ellipse",
+    y: z.number().optional().nullable(),
-      "diamond",
+    width: z.number().optional().nullable(),
-      "arrow",
+    height: z.number().optional().nullable(),
-      "line",
+    angle: z.number().optional().nullable(),
-      "text",
+    strokeColor: z.string().optional().nullable(),
-      "image",
+    backgroundColor: z.string().optional().nullable(),
-      "frame",
+    fillStyle: z.string().optional().nullable(),
-      "embed",
+    strokeWidth: z.number().optional().nullable(),
-      "selection",
+    strokeStyle: z.string().optional().nullable(),
-      "text-container",
+    roundness: z.any().optional().nullable(),
-    ]),
+    boundElements: z.array(z.any()).optional().nullable(),
-    x: z.number().finite().min(-100000).max(100000),
+    groupIds: z.array(z.string()).optional().nullable(),
-    y: z.number().finite().min(-100000).max(100000),
+    frameId: z.string().optional().nullable(),
-    width: z.number().finite().min(0).max(100000),
+    seed: z.number().optional().nullable(),
-    height: z.number().finite().min(0).max(100000),
+    version: z.number().optional().nullable(),
-    angle: z
+    versionNonce: z.number().optional().nullable(),
-      .number()
+    isDeleted: z.boolean().optional().nullable(),
-      .finite()
+    opacity: z.number().optional().nullable(),
-      .min(-2 * Math.PI)
+    link: z.string().optional().nullable(),
-      .max(2 * Math.PI),
+    locked: z.boolean().optional().nullable(),
-    strokeColor: z.string().optional(),
+    text: z.string().optional().nullable(),
-    backgroundColor: z.string().optional(),
+    fontSize: z.number().optional().nullable(),
-    fillStyle: z.enum(["solid", "hachure", "cross-hatch", "dots"]).optional(),
+    fontFamily: z.number().optional().nullable(),
-    strokeWidth: z.number().finite().min(0).max(10).optional(),
+    textAlign: z.string().optional().nullable(),
-    strokeStyle: z.enum(["solid", "dashed", "dotted"]).optional(),
+    verticalAlign: z.string().optional().nullable(),
-    roundness: z
+    customData: z.record(z.string(), z.any()).optional().nullable(),
-      .object({
-        type: z.enum(["round", "sharp"]),
-        value: z.number().finite().min(0).max(1),
   })
-      .optional(),
+  .passthrough()
-    boundElements: z
+  .transform((element) => {
-      .array(
+    // Apply basic sanitization to string values only
-        z.object({
+    const sanitized = { ...element };
-          id: z.string(),
+
-          type: z.string(),
+    if (typeof sanitized.text === "string") {
-        })
+      sanitized.text = sanitizeText(sanitized.text, 5000);
-      )
+    }
-      .optional(),
+
-    groupIds: z.array(z.string()).optional(),
+    if (typeof sanitized.link === "string") {
-    frameId: z.string().optional(),
+      sanitized.link = sanitizeUrl(sanitized.link);
-    seed: z.number().finite().optional(),
+    }
-    version: z.number().finite().min(0).max(100000),
+
-    versionNonce: z.number().finite().min(0).max(100000),
+    return sanitized;
-    isDeleted: z.boolean().optional(),
+  });
-    opacity: z.number().finite().min(0).max(1).optional(),
-    link: z.string().optional().transform(sanitizeUrl),
-    locked: z.boolean().optional(),
-    // Text-specific properties
-    text: z
-      .string()
-      .optional()
-      .transform((val) => sanitizeText(val, 5000)),
-    fontSize: z.number().finite().min(1).max(200).optional(),
-    fontFamily: z.number().finite().min(1).max(5).optional(),
-    textAlign: z.enum(["left", "center", "right"]).optional(),
-    verticalAlign: z.enum(["top", "middle", "bottom"]).optional(),
-    // Custom properties - whitelist only known safe properties
-    customData: z.record(z.string(), z.any()).optional(),
-  })
-  .strict();
 
 /**
- * Strict Zod schema for Excalidraw app state with validation
+ * Flexible Zod schema for Excalidraw app state with validation
  */
 export const appStateSchema = z
   .object({
-    gridSize: z.number().finite().min(0).max(100).optional(),
+    gridSize: z.number().finite().min(0).max(1000).optional().nullable(),
-    gridStep: z.number().finite().min(1).max(100).optional(),
+    gridStep: z.number().finite().min(1).max(1000).optional().nullable(),
-    viewBackgroundColor: z.string().optional(),
+    viewBackgroundColor: z.string().optional().nullable(),
-    currentItemStrokeColor: z.string().optional(),
+    currentItemStrokeColor: z.string().optional().nullable(),
-    currentItemBackgroundColor: z.string().optional(),
+    currentItemBackgroundColor: z.string().optional().nullable(),
     currentItemFillStyle: z
       .enum(["solid", "hachure", "cross-hatch", "dots"])
-      .optional(),
+      .optional()
-    currentItemStrokeWidth: z.number().finite().min(0).max(10).optional(),
+      .nullable(),
-    currentItemStrokeStyle: z.enum(["solid", "dashed", "dotted"]).optional(),
+    currentItemStrokeWidth: z
+      .number()
+      .finite()
+      .min(0)
+      .max(50)
+      .optional()
+      .nullable(),
+    currentItemStrokeStyle: z
+      .enum(["solid", "dashed", "dotted"])
+      .optional()
+      .nullable(),
     currentItemRoundness: z
       .object({
         type: z.enum(["round", "sharp"]),
         value: z.number().finite().min(0).max(1),
       })
-      .optional(),
+      .optional()
-    currentItemFontSize: z.number().finite().min(1).max(200).optional(),
+      .nullable(),
-    currentItemFontFamily: z.number().finite().min(1).max(5).optional(),
+    currentItemFontSize: z
-    currentItemTextAlign: z.enum(["left", "center", "right"]).optional(),
+      .number()
-    currentItemVerticalAlign: z.enum(["top", "middle", "bottom"]).optional(),
+      .finite()
-    scrollX: z.number().finite().min(-1000000).max(1000000).optional(),
+      .min(1)
-    scrollY: z.number().finite().min(-1000000).max(1000000).optional(),
+      .max(500)
+      .optional()
+      .nullable(),
+    currentItemFontFamily: z
+      .number()
+      .finite()
+      .min(1)
+      .max(10)
+      .optional()
+      .nullable(),
+    currentItemTextAlign: z
+      .enum(["left", "center", "right"])
+      .optional()
+      .nullable(),
+    currentItemVerticalAlign: z
+      .enum(["top", "middle", "bottom"])
+      .optional()
+      .nullable(),
+    scrollX: z
+      .number()
+      .finite()
+      .min(-10000000)
+      .max(10000000)
+      .optional()
+      .nullable(),
+    scrollY: z
+      .number()
+      .finite()
+      .min(-10000000)
+      .max(10000000)
+      .optional()
+      .nullable(),
     zoom: z
       .object({
-        value: z.number().finite().min(0.1).max(10),
+        value: z.number().finite().min(0.01).max(100),
       })
-      .optional(),
+      .optional()
-    selection: z.array(z.string()).optional(),
+      .nullable(),
-    selectedElementIds: z.record(z.string(), z.boolean()).optional(),
+    selection: z.array(z.string()).optional().nullable(),
-    selectedGroupIds: z.record(z.string(), z.boolean()).optional(),
+    selectedElementIds: z.record(z.string(), z.boolean()).optional().nullable(),
+    selectedGroupIds: z.record(z.string(), z.boolean()).optional().nullable(),
     activeEmbeddable: z
       .object({
         elementId: z.string(),
         state: z.string(),
       })
-      .optional(),
+      .optional()
+      .nullable(),
     activeTool: z
       .object({
         type: z.string(),
-        customType: z.string().optional(),
+        customType: z.string().optional().nullable(),
       })
-      .optional(),
+      .optional()
-    cursorX: z.number().finite().optional(),
+      .nullable(),
-    cursorY: z.number().finite().optional(),
+    cursorX: z.number().finite().optional().nullable(),
-    // Sanitize any string values in appState
+    cursorY: z.number().finite().optional().nullable(),
+    // Add common Excalidraw app state properties
+    collaborators: z.record(z.string(), z.any()).optional().nullable(),
   })
-  .strict()
+  // Allow any additional properties
   .catchall(
     z.any().refine((val) => {
-      // Recursively sanitize any string values found in the object
+      // Sanitize string values, but be more permissive for other types
       if (typeof val === "string") {
         return sanitizeText(val, 1000);
       }
+      // Allow numbers, booleans, objects, arrays, null, undefined
       return true;
     })
   );

backend/src/securityTest.ts

@@ -12,7 +12,7 @@ import {
   sanitizeDrawingData,
 } from "./security";
 
-console.log("🧪 Starting Security Test Suite...\n");
+console.log("Starting Security Test Suite...\n");
 
 // Test 1: HTML/JS Sanitization
 console.log("Test 1: HTML/JS Sanitization");
@@ -25,12 +25,15 @@ const maliciousHtml = `
   Normal text content
 `;
 const sanitizedHtml = sanitizeHtml(maliciousHtml);
-console.log("✅ Original:", maliciousHtml.substring(0, 100) + "...");
+console.log("PASS: Original:", maliciousHtml.substring(0, 100) + "...");
-console.log("✅ Sanitized:", sanitizedHtml.substring(0, 100) + "...");
+console.log("PASS: Sanitized:", sanitizedHtml.substring(0, 100) + "...");
-console.log("✅ Script tags removed:", !sanitizedHtml.includes("<script>"));
+console.log("PASS: Script tags removed:", !sanitizedHtml.includes("<script>"));
-console.log("✅ Event handlers removed:", !sanitizedHtml.includes("onerror="));
 console.log(
-  "✅ Malicious URLs blocked:",
+  "PASS: Event handlers removed:",
+  !sanitizedHtml.includes("onerror=")
+);
+console.log(
+  "PASS: Malicious URLs blocked:",
   !sanitizedHtml.includes("javascript:")
 );
 console.log("");
@@ -47,11 +50,11 @@ const maliciousSvg = `
   </svg>
 `;
 const sanitizedSvg = sanitizeSvg(maliciousSvg);
-console.log("✅ Original:", maliciousSvg.substring(0, 100) + "...");
+console.log("PASS: Original:", maliciousSvg.substring(0, 100) + "...");
-console.log("✅ Sanitized:", sanitizedSvg.substring(0, 100) + "...");
+console.log("PASS: Sanitized:", sanitizedSvg.substring(0, 100) + "...");
-console.log("✅ SVG scripts removed:", !sanitizedSvg.includes("<script>"));
+console.log("PASS: SVG scripts removed:", !sanitizedSvg.includes("<script>"));
 console.log(
-  "✅ Malicious hrefs sanitized:",
+  "PASS: Malicious hrefs sanitized:",
   !sanitizedSvg.includes("javascript:")
 );
 console.log("");
@@ -72,7 +75,9 @@ const maliciousUrls = [
 maliciousUrls.forEach((url) => {
   const sanitized = sanitizeUrl(url);
   const isSafe = sanitized !== "";
-  console.log(`✅ "${url}" -> "${sanitized}" (${isSafe ? "SAFE" : "BLOCKED"})`);
+  console.log(
+    `PASS: "${url}" -> "${sanitized}" (${isSafe ? "SAFE" : "BLOCKED"})`
+  );
 });
 console.log("");
 
@@ -81,14 +86,14 @@ console.log("Test 4: Text Sanitization with Length Limits");
 const longText = "A".repeat(2000);
 const sanitizedLongText = sanitizeText(longText, 500);
 console.log(
-  `✅ Long text truncated: ${longText.length} -> ${sanitizedLongText.length} chars`
+  `PASS: Long text truncated: ${longText.length} -> ${sanitizedLongText.length} chars`
 );
 
 const maliciousText = "<script>alert('XSS')</script>Normal text";
 const sanitizedText = sanitizeText(maliciousText);
-console.log(`✅ Text sanitized: "${maliciousText}" -> "${sanitizedText}"`);
+console.log(`PASS: Text sanitized: "${maliciousText}" -> "${sanitizedText}"`);
 console.log(
-  "✅ Malicious content removed:",
+  "PASS: Malicious content removed:",
   !sanitizedText.includes("<script>")
 );
 console.log("");
@@ -131,20 +136,20 @@ const maliciousDrawing = {
 
 console.log("Testing malicious drawing validation...");
 const isValidDrawing = validateImportedDrawing(maliciousDrawing);
-console.log(`✅ Malicious drawing rejected: ${!isValidDrawing}`);
+console.log(`PASS: Malicious drawing rejected: ${!isValidDrawing}`);
 
 try {
   const sanitizedDrawing = sanitizeDrawingData(maliciousDrawing);
-  console.log("✅ Sanitization successful");
+  console.log("PASS: Sanitization successful");
-  console.log(`✅ Text sanitized: ${sanitizedDrawing.elements[0].text}`);
+  console.log(`PASS: Text sanitized: ${sanitizedDrawing.elements[0].text}`);
   console.log(
-    `✅ Link sanitized: ${sanitizedDrawing.elements[1].link || "null"}`
+    `PASS: Link sanitized: ${sanitizedDrawing.elements[1].link || "null"}`
   );
   console.log(
-    `✅ SVG sanitized: ${!sanitizedDrawing.preview?.includes("<script>")}`
+    `PASS: SVG sanitized: ${!sanitizedDrawing.preview?.includes("<script>")}`
   );
 } catch (error) {
-  console.log("✅ Sanitization failed as expected:", error.message);
+  console.log("PASS: Sanitization failed as expected:", error.message);
 }
 console.log("");
 
@@ -185,26 +190,28 @@ const legitimateDrawing = {
 };
 
 const isValidLegitimate = validateImportedDrawing(legitimateDrawing);
-console.log(`✅ Legitimate drawing accepted: ${isValidLegitimate}`);
+console.log(`PASS: Legitimate drawing accepted: ${isValidLegitimate}`);
 
 try {
   const sanitizedLegitimate = sanitizeDrawingData(legitimateDrawing);
-  console.log("✅ Legitimate drawing sanitization successful");
+  console.log("PASS: Legitimate drawing sanitization successful");
-  console.log(`✅ Text preserved: "${sanitizedLegitimate.elements[0].text}"`);
   console.log(
-    `✅ Safe URL preserved: "${sanitizedLegitimate.elements[1].link}"`
+    `PASS: Text preserved: "${sanitizedLegitimate.elements[0].text}"`
+  );
+  console.log(
+    `PASS: Safe URL preserved: "${sanitizedLegitimate.elements[1].link}"`
   );
 } catch (error) {
-  console.log("❌ Legitimate drawing should not fail:", error.message);
+  console.log("FAIL: Legitimate drawing should not fail:", error.message);
 }
 console.log("");
 
-console.log("🎉 Security Test Suite Completed!");
+console.log("Completed! Security Test Suite Completed!");
-console.log("\n📊 Test Summary:");
+console.log("\nSummary: Test Summary:");
-console.log("✅ HTML/JS injection prevention - WORKING");
+console.log("PASS: HTML/JS injection prevention - WORKING");
-console.log("✅ SVG malicious content blocking - WORKING");
+console.log("PASS: SVG malicious content blocking - WORKING");
-console.log("✅ URL scheme validation - WORKING");
+console.log("PASS: URL scheme validation - WORKING");
-console.log("✅ Text sanitization with limits - WORKING");
+console.log("PASS: Text sanitization with limits - WORKING");
-console.log("✅ Malicious drawing rejection - WORKING");
+console.log("PASS: Malicious drawing rejection - WORKING");
-console.log("✅ Legitimate content preservation - WORKING");
+console.log("PASS: Legitimate content preservation - WORKING");
-console.log("\n🔒 XSS Prevention: IMPLEMENTED & FUNCTIONAL");
+console.log("\nSecurity: XSS Prevention: IMPLEMENTED & FUNCTIONAL");

backend/src/workers/db-verify.js

@@ -0,0 +1,18 @@
+const { parentPort, workerData } = require('worker_threads');
+const Database = require('better-sqlite3');
+
+if (!parentPort) throw new Error("Must be run in a worker thread");
+
+try {
+  const { filePath } = workerData;
+  const db = new Database(filePath, { readonly: true, fileMustExist: true });
+  
+  // This is the CPU-heavy operation
+  const result = db.prepare("PRAGMA integrity_check;").get();
+  
+  db.close();
+  parentPort.postMessage(result.integrity_check === "ok");
+} catch (error) {
+  // Any error means invalid or corrupt DB
+  parentPort.postMessage(false);
+}

backend/tsconfig.json

@@ -16,6 +16,7 @@
     "noUncheckedSideEffectImports": true,
     "moduleDetection": "force",
     "skipLibCheck": true,
+    "allowJs": true,
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist", "prisma.config.ts"]

docker-compose.yml

@@ -27,8 +27,8 @@ services:
 
   frontend:
     build:
-      context: ./frontend
+      context: .
-      dockerfile: Dockerfile
+      dockerfile: frontend/Dockerfile
     container_name: excalidash-frontend
     ports:
       - "6767:80"

frontend/.env

@@ -0,0 +1,4 @@
+# Frontend Environment Variables
+# Use /api for production (proxied by nginx)
+# Use http://localhost:8000 for local development
+VITE_API_URL=http://localhost:8000

frontend/Dockerfile

@@ -1,16 +1,23 @@
 # Build stage
 FROM node:20-alpine AS builder
 
-WORKDIR /app
+WORKDIR /app/frontend
 
-# Copy package files
+# Copy package files first for better caching
-COPY package*.json ./
+COPY frontend/package*.json ./
 
 # Install dependencies
 RUN npm ci
 
 # Copy source code and config files
-COPY . .
+COPY frontend/ ./
+COPY VERSION ../VERSION
+
+# Build arguments
+ARG VITE_APP_VERSION
+ARG VITE_APP_BUILD_LABEL
+ENV VITE_APP_VERSION=$VITE_APP_VERSION
+ENV VITE_APP_BUILD_LABEL=$VITE_APP_BUILD_LABEL
 
 # Build the application
 RUN npm run build
@@ -19,10 +26,10 @@ RUN npm run build
 FROM nginx:alpine
 
 # Copy custom nginx config
-COPY nginx.conf /etc/nginx/nginx.conf
+COPY frontend/nginx.conf /etc/nginx/nginx.conf
 
 # Copy built application from builder
-COPY --from=builder /app/dist /usr/share/nginx/html
+COPY --from=builder /app/frontend/dist /usr/share/nginx/html
 
 EXPOSE 80
 

frontend/nginx.conf

@@ -12,6 +12,9 @@ http {
     gzip_vary on;
     gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
 
+    # Set maximum request body size to 50MB to handle large drawings with embedded images
+    client_max_body_size 50M;
+
     server {
         listen 80;
         server_name localhost;
@@ -29,6 +32,18 @@ http {
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
+            
+            # Buffer and timeout settings for large payloads
+            proxy_buffering on;
+            proxy_buffer_size 4k;
+            proxy_buffers 8 4k;
+            proxy_busy_buffers_size 8k;
+            client_body_buffer_size 128k;
+            
+            # Timeouts for large uploads (300 seconds)
+            proxy_connect_timeout 300s;
+            proxy_send_timeout 300s;
+            proxy_read_timeout 300s;
         }
 
         # WebSocket proxy for Socket.IO

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/Sidebar.tsx

@@ -171,6 +171,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
           <h1 className="text-2xl text-slate-900 dark:text-white flex items-center gap-3 tracking-tight" style={{ fontFamily: 'Excalifont' }}>
             <Logo className="w-10 h-10" />
             <span className="mt-1">ExcaliDash</span>
+            <span className="text-xs font-bold text-red-500 mt-2" style={{ fontFamily: 'sans-serif' }}>BETA</span>
           </h1>
         </div>
 

frontend/src/pages/Editor.tsx

@@ -265,13 +265,14 @@ export const Editor: React.FC = () => {
     if (!id) return;
     
     try {
+      // Ensure we always have valid data structure
       const persistableAppState = {
-        viewBackgroundColor: appState.viewBackgroundColor,
+        viewBackgroundColor: appState?.viewBackgroundColor || '#ffffff',
-        gridSize: appState.gridSize,
+        gridSize: appState?.gridSize || null,
       };
 
-      const snapshot = latestElementsRef.current ?? elements;
+      const snapshot = latestElementsRef.current ?? elements ?? [];
-      const persistableElements = Array.from(snapshot);
+      const persistableElements = Array.isArray(snapshot) ? snapshot : [];
 
       console.log("[Editor] Saving drawing", {
         drawingId: id,