convert all sync op to async, implemented streaming

README.md

@@ -1,9 +1,8 @@
 <img src="logoExcaliDash.png" alt="ExcaliDash Logo" width="80" height="88">
 
-# ExcaliDash v0.1.5
+# ExcaliDash v0.1.0
 
-![License](https://img.shields.io/github/license/zimengxiong/ExcaliDash)
-![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 [![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.
@@ -75,10 +74,7 @@ See [release notes](https://github.com/ZimengXiong/ExcaliDash/releases) for a sp
 # Installation
 
 > [!CAUTION]
-> NOT for production use. While attempts have been made at hardening (XSS/dompurify, CORS, rate-limiting, sanitization), 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).
+> 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)
 
 ## Docker Hub (Recommended)
 

RELEASE.md

@@ -1,30 +0,0 @@
-# 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

VERSION

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

backend/.env.example

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

backend/Dockerfile

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

backend/docker-entrypoint.sh

@@ -1,28 +1,14 @@
 #!/bin/sh
 set -e
 
-# 1. Hydrate volume if empty (Running as root)
+# Auto-hydrate prisma directory when bind-mounted volume is empty
 if [ ! -f "/app/prisma/schema.prisma" ]; then
-    echo "Mount is empty. Hydrating /app/prisma..."
-    cp -R /app/prisma_template/. /app/prisma/
+	echo "Mount is empty. Hydrating /app/prisma from /app/prisma_template..."
+	cp -R /app/prisma_template/. /app/prisma/
 fi
 
-# 2. Fix permissions unconditionally (Running as root)
-echo "Fixing filesystem permissions..."
-chown -R nodejs:nodejs /app/uploads
-chown -R nodejs:nodejs /app/prisma
-chmod 755 /app/uploads
+# Run migrations
+npx prisma migrate deploy
 
-# Ensure database file has proper permissions
-if [ -f "/app/prisma/dev.db" ]; then
-    echo "Database file found, ensuring write permissions..."
-    chmod 666 /app/prisma/dev.db
-fi
-
-# 3. Run Migrations (Drop privileges to nodejs)
-echo "Running database migrations..."
-su-exec nodejs npx prisma migrate deploy
-
-# 4. Start Application (Drop privileges to nodejs)
-echo "Starting application as nodejs..."
-exec su-exec nodejs node dist/index.js
+# Start the application
+node dist/index.js

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backend",
-  "version": "0.1.5",
+  "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -14,18 +14,14 @@
   "dependencies": {
     "@prisma/client": "^5.22.0",
     "@types/archiver": "^7.0.0",
-    "@types/jsdom": "^27.0.0",
     "@types/multer": "^2.0.0",
     "@types/socket.io": "^3.0.1",
     "archiver": "^7.0.1",
     "better-sqlite3": "^12.4.6",
     "cors": "^2.8.5",
-    "dompurify": "^3.3.0",
     "dotenv": "^17.2.3",
     "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"
   },
@@ -34,6 +30,7 @@
     "@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

@@ -6,20 +6,12 @@ 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";
-import {
-  sanitizeDrawingData,
-  validateImportedDrawing,
-  sanitizeText,
-  sanitizeSvg,
-  elementSchema,
-  appStateSchema,
-} from "./security";
 
 dotenv.config();
 
@@ -70,29 +62,6 @@ console.log("Allowed origins:", allowedOrigins);
 
 const uploadDir = path.resolve(__dirname, "../uploads");
 
-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 {
@@ -119,17 +88,11 @@ 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"));
-      }
+    // Only allow .db files for SQLite imports
+    if (file.fieldname === "db" && !file.originalname.endsWith(".db")) {
+      return cb(new Error("Only .db files are allowed"));
     }
     cb(null, true);
   },
@@ -144,73 +107,9 @@ 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();
-});
+const elementsSchema = z.array(z.object({}).passthrough());
 
-// Security middleware - Add security headers
-app.use((req, res, next) => {
-  res.setHeader("X-Content-Type-Options", "nosniff");
-  res.setHeader("X-Frame-Options", "DENY");
-  res.setHeader("X-XSS-Protection", "1; mode=block");
-  res.setHeader("Referrer-Policy", "strict-origin-when-cross-origin");
-  res.setHeader(
-    "Permissions-Policy",
-    "geolocation=(), microphone=(), camera=()"
-  );
-
-  // Content Security Policy - restrict sources
-  res.setHeader(
-    "Content-Security-Policy",
-    "default-src 'self'; " +
-      "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net https://unpkg.com; " +
-      "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; " +
-      "font-src 'self' https://fonts.gstatic.com; " +
-      "img-src 'self' data: blob: https:; " +
-      "connect-src 'self' ws: wss:; " +
-      "frame-ancestors 'none';"
-  );
-
-  next();
-});
-
-// Rate limiting middleware (basic implementation)
-const requestCounts = new Map<string, { count: number; resetTime: number }>();
-const RATE_LIMIT_WINDOW = 15 * 60 * 1000; // 15 minutes
-const RATE_LIMIT_MAX_REQUESTS = 1000; // Max requests per window
-
-app.use((req, res, next) => {
-  const ip = req.ip || req.connection.remoteAddress || "unknown";
-  const now = Date.now();
-  const clientData = requestCounts.get(ip);
-
-  if (!clientData || now > clientData.resetTime) {
-    requestCounts.set(ip, { count: 1, resetTime: now + RATE_LIMIT_WINDOW });
-    return next();
-  }
-
-  if (clientData.count >= RATE_LIMIT_MAX_REQUESTS) {
-    return res.status(429).json({
-      error: "Rate limit exceeded",
-      message: "Too many requests, please try again later",
-    });
-  }
-
-  clientData.count++;
-  next();
-});
+const appStateSchema = z.object({}).passthrough();
 
 const filesFieldSchema = z
   .union([z.record(z.string(), z.any()), z.null()])
@@ -223,84 +122,17 @@ const drawingBaseSchema = z.object({
   preview: z.string().nullable().optional(),
 });
 
-// Use strict schemas from security module with sanitization
-const drawingCreateSchema = drawingBaseSchema
-  .extend({
-    elements: elementSchema.array().default([]),
-    appState: appStateSchema.default({}),
-    files: filesFieldSchema,
-  })
-  .refine(
-    (data) => {
-      // Apply sanitization before database persistence
-      try {
-        const sanitized = sanitizeDrawingData(data);
-        // Merge sanitized data back with original properties
-        Object.assign(data, sanitized);
-        return true;
-      } catch (error) {
-        console.error("Sanitization failed:", error);
-        return false;
-      }
-    },
-    {
-      message: "Invalid or malicious drawing data detected",
-    }
-  );
+const drawingCreateSchema = drawingBaseSchema.extend({
+  elements: elementsSchema.default([]),
+  appState: appStateSchema.default({}),
+  files: filesFieldSchema,
+});
 
-const drawingUpdateSchema = drawingBaseSchema
-  .extend({
-    elements: elementSchema.array().optional(),
-    appState: appStateSchema.optional(),
-    files: filesFieldSchema,
-  })
-  .refine(
-    (data) => {
-      // Apply sanitization before database persistence
-      try {
-        // Only sanitize provided fields
-        const sanitizedData = { ...data };
-        if (data.elements !== undefined || data.appState !== undefined) {
-          const fullData = {
-            elements: Array.isArray(data.elements) ? data.elements : [],
-            appState:
-              typeof data.appState === "object" && data.appState !== null
-                ? data.appState
-                : {},
-            files: data.files || {},
-            preview: data.preview,
-            name: data.name,
-            collectionId: data.collectionId,
-          };
-          const sanitized = sanitizeDrawingData(fullData);
-          sanitizedData.elements = sanitized.elements;
-          sanitizedData.appState = sanitized.appState;
-          if (data.files !== undefined) sanitizedData.files = sanitized.files;
-          if (data.preview !== undefined)
-            sanitizedData.preview = sanitized.preview;
-          Object.assign(data, sanitizedData);
-        }
-        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;
-      }
-    },
-    {
-      message: "Invalid or malicious drawing data detected",
-    }
-  );
+const drawingUpdateSchema = drawingBaseSchema.extend({
+  elements: elementsSchema.optional(),
+  appState: appStateSchema.optional(),
+  files: filesFieldSchema,
+});
 
 const respondWithValidationErrors = (
   res: express.Response,
@@ -312,80 +144,35 @@ const respondWithValidationErrors = (
   });
 };
 
-const validateSqliteHeader = (filePath: string): boolean => {
+const runIntegrityCheck = (filePath: string): boolean => {
+  let dbInstance: Database.Database | undefined;
   try {
-    const buffer = Buffer.alloc(16);
-    const fd = fs.openSync(filePath, "r");
-    const bytesRead = fs.readSync(fd, buffer, 0, 16, 0);
-    fs.closeSync(fd);
+    // Use readonly mode and file locking to be more conservative with system resources
+    dbInstance = new Database(filePath, {
+      readonly: true,
+      fileMustExist: true,
+      timeout: 5000, // 5 second timeout for integrity check
+    });
 
-    if (bytesRead < 16) {
-      console.warn("File too small to be a valid SQLite database");
-      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;
+    // Run integrity check with timeout
+    const result = dbInstance.prepare("PRAGMA integrity_check;").get();
+    return result?.integrity_check === "ok";
   } catch (error) {
-    console.error("Failed to validate SQLite header:", error);
+    console.error("Integrity check failed:", error);
     return false;
-  }
-};
-// Non-blocking CPU check using worker threads while still verifying headers
-const verifyDatabaseIntegrityAsync = (filePath: string): Promise<boolean> => {
-  if (!validateSqliteHeader(filePath)) {
-    return Promise.resolve(false);
-  }
-
-  return new Promise((resolve) => {
-    const worker = new Worker(
-      path.resolve(__dirname, "./workers/db-verify.js"),
-      {
-        workerData: { filePath },
+  } finally {
+    // Always close database connection to free resources
+    if (dbInstance) {
+      try {
+        dbInstance.close();
+      } catch (closeError) {
+        console.warn(
+          "Failed to close database after integrity check:",
+          closeError
+        );
       }
-    );
-    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) => {
@@ -560,17 +347,6 @@ app.get("/drawings/:id", async (req, res) => {
 // POST /drawings
 app.post("/drawings", async (req, res) => {
   try {
-    // Additional security validation for imported data
-    const isImportedDrawing = req.headers["x-imported-file"] === "true";
-
-    if (isImportedDrawing && !validateImportedDrawing(req.body)) {
-      return res.status(400).json({
-        error: "Invalid imported drawing file",
-        message:
-          "The imported file contains potentially malicious content or invalid structure",
-      });
-    }
-
     const parsed = drawingCreateSchema.safeParse(req.body);
     if (!parsed.success) {
       return respondWithValidationErrors(res, parsed.error.issues);
@@ -599,7 +375,6 @@ app.post("/drawings", async (req, res) => {
       files: JSON.parse(newDrawing.files || "{}"),
     });
   } catch (error) {
-    console.error("Failed to create drawing:", error);
     res.status(500).json({ error: "Failed to create drawing" });
   }
 });
@@ -608,32 +383,8 @@ 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);
     }
 
@@ -688,7 +439,6 @@ 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" });
   }
 });
@@ -803,14 +553,9 @@ app.delete("/collections/:id", async (req, res) => {
 
 // --- Export/Import Endpoints ---
 
-// GET /export - Export SQLite database (supports .sqlite and .db extensions)
+// GET /export - Export SQLite database
 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");
 
     try {
@@ -824,7 +569,7 @@ app.get("/export", async (req, res) => {
       "Content-Disposition",
       `attachment; filename="excalidash-db-${
         new Date().toISOString().split("T")[0]
-      }.${extension}"`
+      }.sqlite"`
     );
 
     const fileStream = fs.createReadStream(dbPath);
@@ -937,11 +682,11 @@ app.post("/import/sqlite/verify", upload.single("db"), async (req, res) => {
     }
 
     const stagedPath = req.file.path;
-    const isValid = await verifyDatabaseIntegrityAsync(stagedPath);
+    const isValid = runIntegrityCheck(stagedPath);
     await removeFileIfExists(stagedPath);
 
     if (!isValid) {
-      return res.status(400).json({ error: "Invalid database format" });
+      return res.status(400).json({ error: "Invalid SQLite file" });
     }
 
     res.json({ valid: true, message: "Database file is valid" });
@@ -968,7 +713,8 @@ app.post("/import/sqlite", upload.single("db"), async (req, res) => {
     );
 
     try {
-      await moveFile(originalPath, stagedPath);
+      // Use async rename instead of blocking renameSync
+      await fsPromises.rename(originalPath, stagedPath);
     } catch (error) {
       console.error("Failed to stage uploaded database", error);
       await removeFileIfExists(originalPath);
@@ -976,7 +722,7 @@ app.post("/import/sqlite", upload.single("db"), async (req, res) => {
       return res.status(500).json({ error: "Failed to stage uploaded file" });
     }
 
-    const isValid = await verifyDatabaseIntegrityAsync(stagedPath);
+    const isValid = runIntegrityCheck(stagedPath);
     if (!isValid) {
       await removeFileIfExists(stagedPath);
       return res
@@ -997,8 +743,8 @@ app.post("/import/sqlite", upload.single("db"), async (req, res) => {
         // Database doesn't exist, skip backup
       }
 
-      // Move staged file to final location, supporting cross-device mounts
-      await moveFile(stagedPath, dbPath);
+      // Move staged file to final location
+      await fsPromises.rename(stagedPath, dbPath);
     } catch (error) {
       console.error("Failed to replace database", error);
       await removeFileIfExists(stagedPath);

backend/src/security.ts

@@ -1,495 +0,0 @@
-/**
- * Security utilities for XSS prevention and data sanitization
- */
-
-import { z } from "zod";
-import DOMPurify from "dompurify";
-import { JSDOM } from "jsdom";
-
-// Create a DOM environment for DOMPurify (Node.js compatibility)
-const window = new JSDOM("").window;
-const purify = DOMPurify(window);
-
-/**
- * Sanitize HTML/JS content using DOMPurify (battle-tested library)
- */
-export const sanitizeHtml = (input: string): string => {
-  if (typeof input !== "string") return "";
-
-  return purify
-    .sanitize(input, {
-      ALLOWED_TAGS: [
-        // Allow basic text formatting that might be in drawings
-        "b",
-        "i",
-        "u",
-        "em",
-        "strong",
-        "p",
-        "br",
-        "span",
-        "div",
-      ],
-      ALLOWED_ATTR: [], // No attributes allowed by default for security
-      FORBID_TAGS: [
-        // Explicitly forbid dangerous tags
-        "script",
-        "iframe",
-        "object",
-        "embed",
-        "link",
-        "style",
-        "form",
-        "input",
-        "button",
-        "select",
-        "textarea",
-        "svg",
-        "foreignObject",
-      ],
-      FORBID_ATTR: [
-        // Explicitly forbid dangerous attributes
-        "onload",
-        "onclick",
-        "onerror",
-        "onmouseover",
-        "onfocus",
-        "onblur",
-        "onchange",
-        "onsubmit",
-        "onreset",
-        "onkeydown",
-        "onkeyup",
-        "onkeypress",
-        "href",
-        "src",
-        "action",
-        "formaction",
-      ],
-      KEEP_CONTENT: true, // Keep content even if tags are removed
-    })
-    .trim();
-};
-
-/**
- * Sanitize SVG content using DOMPurify with strict SVG restrictions
- */
-export const sanitizeSvg = (svgContent: string): string => {
-  if (typeof svgContent !== "string") return "";
-
-  // For SVG content, we'll be very restrictive since SVG can execute JavaScript
-  // We only allow basic geometric shapes without any scripts or external references
-  return purify
-    .sanitize(svgContent, {
-      ALLOWED_TAGS: [
-        // Allow only safe SVG geometric elements
-        "svg",
-        "g",
-        "rect",
-        "circle",
-        "ellipse",
-        "line",
-        "polyline",
-        "polygon",
-        "path",
-        "text",
-        "tspan",
-      ],
-      ALLOWED_ATTR: [
-        // Allow only safe geometric attributes
-        "x",
-        "y",
-        "width",
-        "height",
-        "cx",
-        "cy",
-        "r",
-        "rx",
-        "ry",
-        "x1",
-        "y1",
-        "x2",
-        "y2",
-        "points",
-        "d",
-        "fill",
-        "stroke",
-        "stroke-width",
-        "opacity",
-        "transform",
-        "font-size",
-        "font-family",
-        "text-anchor",
-        "dominant-baseline",
-      ],
-      FORBID_TAGS: [
-        // Completely forbid any script-related or external content
-        "script",
-        "foreignObject",
-        "iframe",
-        "object",
-        "embed",
-        "use",
-        "image",
-        "style",
-        "link",
-        "defs",
-        "symbol",
-        "marker",
-        "clipPath",
-        "mask",
-        "filter",
-      ],
-      FORBID_ATTR: [
-        // Forbid any attributes that could execute code or load external content
-        "onload",
-        "onclick",
-        "onerror",
-        "onmouseover",
-        "onfocus",
-        "onblur",
-        "href",
-        "xlink:href",
-        "src",
-        "action",
-        "style",
-        "class",
-        "id",
-      ],
-      KEEP_CONTENT: true,
-    })
-    .trim();
-};
-
-/**
- * Validate and sanitize text content using DOMPurify
- */
-export const sanitizeText = (
-  input: unknown,
-  maxLength: number = 1000
-): string => {
-  if (typeof input !== "string") return "";
-
-  // Remove null bytes and control characters except newlines and tabs
-  const cleaned = input.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, "");
-
-  // Truncate if too long
-  const truncated = cleaned.slice(0, maxLength);
-
-  // Use DOMPurify for text content - more permissive than HTML but still safe
-  return purify
-    .sanitize(truncated, {
-      ALLOWED_TAGS: [
-        // Allow basic text formatting that might be in drawing text
-        "b",
-        "i",
-        "u",
-        "em",
-        "strong",
-        "br",
-        "span",
-      ],
-      ALLOWED_ATTR: [], // No attributes allowed for text content
-      FORBID_TAGS: [
-        // Block potentially dangerous tags
-        "script",
-        "iframe",
-        "object",
-        "embed",
-        "link",
-        "style",
-        "form",
-        "input",
-        "button",
-        "select",
-        "textarea",
-        "svg",
-        "foreignObject",
-      ],
-      FORBID_ATTR: [
-        // Block all event handlers and dangerous attributes
-        "onload",
-        "onclick",
-        "onerror",
-        "onmouseover",
-        "onfocus",
-        "onblur",
-        "onchange",
-        "onsubmit",
-        "onreset",
-        "onkeydown",
-        "onkeyup",
-        "onkeypress",
-        "href",
-        "src",
-        "action",
-        "formaction",
-        "style",
-      ],
-      KEEP_CONTENT: true,
-    })
-    .trim();
-};
-
-/**
- * Sanitize URL to prevent javascript: and data: attacks
- */
-export const sanitizeUrl = (url: unknown): string => {
-  if (typeof url !== "string") return "";
-
-  const trimmed = url.trim();
-
-  // Block javascript:, data:, vbscript: URLs
-  if (/^(javascript|data|vbscript):/i.test(trimmed)) {
-    return "";
-  }
-
-  // Basic URL validation
-  try {
-    // Allow http, https, mailto, and relative URLs
-    if (/^(https?:\/\/|mailto:|\/|\.\/|\.\.\/)/i.test(trimmed)) {
-      return trimmed;
-    }
-    return "";
-  } catch {
-    return "";
-  }
-};
-
-/**
- * Very flexible Zod schema for Excalidraw elements
- */
-export const elementSchema = z
-  .object({
-    id: z.string().min(1).max(200).optional().nullable(),
-    type: z.string().optional().nullable(),
-    x: z.number().optional().nullable(),
-    y: z.number().optional().nullable(),
-    width: z.number().optional().nullable(),
-    height: z.number().optional().nullable(),
-    angle: z.number().optional().nullable(),
-    strokeColor: z.string().optional().nullable(),
-    backgroundColor: z.string().optional().nullable(),
-    fillStyle: z.string().optional().nullable(),
-    strokeWidth: z.number().optional().nullable(),
-    strokeStyle: z.string().optional().nullable(),
-    roundness: z.any().optional().nullable(),
-    boundElements: z.array(z.any()).optional().nullable(),
-    groupIds: z.array(z.string()).optional().nullable(),
-    frameId: z.string().optional().nullable(),
-    seed: z.number().optional().nullable(),
-    version: z.number().optional().nullable(),
-    versionNonce: z.number().optional().nullable(),
-    isDeleted: z.boolean().optional().nullable(),
-    opacity: z.number().optional().nullable(),
-    link: z.string().optional().nullable(),
-    locked: z.boolean().optional().nullable(),
-    text: z.string().optional().nullable(),
-    fontSize: z.number().optional().nullable(),
-    fontFamily: z.number().optional().nullable(),
-    textAlign: z.string().optional().nullable(),
-    verticalAlign: z.string().optional().nullable(),
-    customData: z.record(z.string(), z.any()).optional().nullable(),
-  })
-  .passthrough()
-  .transform((element) => {
-    // Apply basic sanitization to string values only
-    const sanitized = { ...element };
-
-    if (typeof sanitized.text === "string") {
-      sanitized.text = sanitizeText(sanitized.text, 5000);
-    }
-
-    if (typeof sanitized.link === "string") {
-      sanitized.link = sanitizeUrl(sanitized.link);
-    }
-
-    return sanitized;
-  });
-
-/**
- * Flexible Zod schema for Excalidraw app state with validation
- */
-export const appStateSchema = z
-  .object({
-    gridSize: z.number().finite().min(0).max(1000).optional().nullable(),
-    gridStep: z.number().finite().min(1).max(1000).optional().nullable(),
-    viewBackgroundColor: z.string().optional().nullable(),
-    currentItemStrokeColor: z.string().optional().nullable(),
-    currentItemBackgroundColor: z.string().optional().nullable(),
-    currentItemFillStyle: z
-      .enum(["solid", "hachure", "cross-hatch", "dots"])
-      .optional()
-      .nullable(),
-    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()
-      .nullable(),
-    currentItemFontSize: z
-      .number()
-      .finite()
-      .min(1)
-      .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.01).max(100),
-      })
-      .optional()
-      .nullable(),
-    selection: z.array(z.string()).optional().nullable(),
-    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()
-      .nullable(),
-    activeTool: z
-      .object({
-        type: z.string(),
-        customType: z.string().optional().nullable(),
-      })
-      .optional()
-      .nullable(),
-    cursorX: z.number().finite().optional().nullable(),
-    cursorY: z.number().finite().optional().nullable(),
-    // Add common Excalidraw app state properties
-    collaborators: z.record(z.string(), z.any()).optional().nullable(),
-  })
-  // Allow any additional properties
-  .catchall(
-    z.any().refine((val) => {
-      // 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;
-    })
-  );
-
-/**
- * Sanitize drawing data before persistence
- */
-export const sanitizeDrawingData = (data: {
-  elements: any[];
-  appState: any;
-  files?: any;
-  preview?: string | null;
-}) => {
-  try {
-    // Validate and sanitize elements
-    const sanitizedElements = elementSchema.array().parse(data.elements);
-
-    // Validate and sanitize app state
-    const sanitizedAppState = appStateSchema.parse(data.appState);
-
-    // Sanitize preview SVG if present
-    let sanitizedPreview = data.preview;
-    if (typeof sanitizedPreview === "string") {
-      sanitizedPreview = sanitizeSvg(sanitizedPreview);
-    }
-
-    // Sanitize files object
-    let sanitizedFiles = data.files;
-    if (typeof sanitizedFiles === "object" && sanitizedFiles !== null) {
-      // Recursively sanitize any string values in files
-      sanitizedFiles = JSON.parse(
-        JSON.stringify(sanitizedFiles, (key, value) => {
-          if (typeof value === "string") {
-            return sanitizeText(value, 10000);
-          }
-          return value;
-        })
-      );
-    }
-
-    return {
-      elements: sanitizedElements,
-      appState: sanitizedAppState,
-      files: sanitizedFiles,
-      preview: sanitizedPreview,
-    };
-  } catch (error) {
-    console.error("Data sanitization failed:", error);
-    throw new Error("Invalid or malicious drawing data detected");
-  }
-};
-
-/**
- * Validate imported .excalidraw file structure
- */
-export const validateImportedDrawing = (data: any): boolean => {
-  try {
-    // Basic structure validation
-    if (!data || typeof data !== "object") return false;
-
-    if (!Array.isArray(data.elements)) return false;
-    if (typeof data.appState !== "object") return false;
-
-    // Check element count to prevent DoS
-    if (data.elements.length > 10000) {
-      throw new Error("Drawing contains too many elements (max 10,000)");
-    }
-
-    // Sanitize and validate the data
-    const sanitized = sanitizeDrawingData(data);
-
-    // Additional structural validation
-    if (sanitized.elements.length !== data.elements.length) {
-      throw new Error("Element count mismatch after sanitization");
-    }
-
-    return true;
-  } catch (error) {
-    console.error("Imported drawing validation failed:", error);
-    return false;
-  }
-};

backend/src/securityTest.ts

@@ -1,217 +0,0 @@
-/**
- * Security Test Suite for XSS Prevention
- * Tests malicious payload detection and sanitization
- */
-
-import {
-  sanitizeHtml,
-  sanitizeSvg,
-  sanitizeText,
-  sanitizeUrl,
-  validateImportedDrawing,
-  sanitizeDrawingData,
-} from "./security";
-
-console.log("Starting Security Test Suite...\n");
-
-// Test 1: HTML/JS Sanitization
-console.log("Test 1: HTML/JS Sanitization");
-const maliciousHtml = `
-  <script>alert('XSS')</script>
-  <img src="x" onerror="alert('XSS')">
-  <iframe src="javascript:alert('XSS')"></iframe>
-  <object data="javascript:alert('XSS')"></object>
-  <embed src="javascript:alert('XSS')"></embed>
-  Normal text content
-`;
-const sanitizedHtml = sanitizeHtml(maliciousHtml);
-console.log("PASS: Original:", maliciousHtml.substring(0, 100) + "...");
-console.log("PASS: Sanitized:", sanitizedHtml.substring(0, 100) + "...");
-console.log("PASS: Script tags removed:", !sanitizedHtml.includes("<script>"));
-console.log(
-  "PASS: Event handlers removed:",
-  !sanitizedHtml.includes("onerror=")
-);
-console.log(
-  "PASS: Malicious URLs blocked:",
-  !sanitizedHtml.includes("javascript:")
-);
-console.log("");
-
-// Test 2: SVG Sanitization
-console.log("Test 2: SVG Sanitization");
-const maliciousSvg = `
-  <svg>
-    <script>alert('SVG XSS')</script>
-    <rect href="javascript:alert('XSS')" />
-    <foreignObject>
-      <script>alert('XSS')</script>
-    </foreignObject>
-  </svg>
-`;
-const sanitizedSvg = sanitizeSvg(maliciousSvg);
-console.log("PASS: Original:", maliciousSvg.substring(0, 100) + "...");
-console.log("PASS: Sanitized:", sanitizedSvg.substring(0, 100) + "...");
-console.log("PASS: SVG scripts removed:", !sanitizedSvg.includes("<script>"));
-console.log(
-  "PASS: Malicious hrefs sanitized:",
-  !sanitizedSvg.includes("javascript:")
-);
-console.log("");
-
-// Test 3: URL Sanitization
-console.log("Test 3: URL Sanitization");
-const maliciousUrls = [
-  "javascript:alert('XSS')",
-  "data:text/html,<script>alert('XSS')</script>",
-  "vbscript:msgbox('XSS')",
-  "https://example.com",
-  "/relative/path",
-  "./current/path",
-  "../parent/path",
-  "mailto:test@example.com",
-];
-
-maliciousUrls.forEach((url) => {
-  const sanitized = sanitizeUrl(url);
-  const isSafe = sanitized !== "";
-  console.log(
-    `PASS: "${url}" -> "${sanitized}" (${isSafe ? "SAFE" : "BLOCKED"})`
-  );
-});
-console.log("");
-
-// Test 4: Text Sanitization with Length Limits
-console.log("Test 4: Text Sanitization with Length Limits");
-const longText = "A".repeat(2000);
-const sanitizedLongText = sanitizeText(longText, 500);
-console.log(
-  `PASS: Long text truncated: ${longText.length} -> ${sanitizedLongText.length} chars`
-);
-
-const maliciousText = "<script>alert('XSS')</script>Normal text";
-const sanitizedText = sanitizeText(maliciousText);
-console.log(`PASS: Text sanitized: "${maliciousText}" -> "${sanitizedText}"`);
-console.log(
-  "PASS: Malicious content removed:",
-  !sanitizedText.includes("<script>")
-);
-console.log("");
-
-// Test 5: Drawing Validation
-console.log("Test 5: Drawing Data Validation");
-const maliciousDrawing = {
-  elements: [
-    {
-      id: "test1",
-      type: "text",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 50,
-      angle: 0,
-      version: 1,
-      versionNonce: 1,
-      text: "<script>alert('XSS')</script>Malicious text",
-    },
-    {
-      id: "test2",
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      width: 100,
-      height: 100,
-      angle: 0,
-      version: 1,
-      versionNonce: 1,
-      link: "javascript:alert('XSS')",
-    },
-  ],
-  appState: {
-    viewBackgroundColor: "<script>alert('XSS')</script>",
-  },
-  files: null,
-  preview: '<svg><script>alert("XSS")</script></svg>',
-};
-
-console.log("Testing malicious drawing validation...");
-const isValidDrawing = validateImportedDrawing(maliciousDrawing);
-console.log(`PASS: Malicious drawing rejected: ${!isValidDrawing}`);
-
-try {
-  const sanitizedDrawing = sanitizeDrawingData(maliciousDrawing);
-  console.log("PASS: Sanitization successful");
-  console.log(`PASS: Text sanitized: ${sanitizedDrawing.elements[0].text}`);
-  console.log(
-    `PASS: Link sanitized: ${sanitizedDrawing.elements[1].link || "null"}`
-  );
-  console.log(
-    `PASS: SVG sanitized: ${!sanitizedDrawing.preview?.includes("<script>")}`
-  );
-} catch (error) {
-  console.log("PASS: Sanitization failed as expected:", error.message);
-}
-console.log("");
-
-// Test 6: Legitimate Drawing Should Pass
-console.log("Test 6: Legitimate Drawing Validation");
-const legitimateDrawing = {
-  elements: [
-    {
-      id: "legit1",
-      type: "text",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 50,
-      angle: 0,
-      version: 1,
-      versionNonce: 1,
-      text: "Normal text content",
-    },
-    {
-      id: "legit2",
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      width: 100,
-      height: 100,
-      angle: 0,
-      version: 1,
-      versionNonce: 1,
-      link: "https://example.com",
-    },
-  ],
-  appState: {
-    viewBackgroundColor: "#ffffff",
-  },
-  files: null,
-  preview: '<svg><rect width="100" height="100" fill="blue"/></svg>',
-};
-
-const isValidLegitimate = validateImportedDrawing(legitimateDrawing);
-console.log(`PASS: Legitimate drawing accepted: ${isValidLegitimate}`);
-
-try {
-  const sanitizedLegitimate = sanitizeDrawingData(legitimateDrawing);
-  console.log("PASS: Legitimate drawing sanitization successful");
-  console.log(
-    `PASS: Text preserved: "${sanitizedLegitimate.elements[0].text}"`
-  );
-  console.log(
-    `PASS: Safe URL preserved: "${sanitizedLegitimate.elements[1].link}"`
-  );
-} catch (error) {
-  console.log("FAIL: Legitimate drawing should not fail:", error.message);
-}
-console.log("");
-
-console.log("Completed! Security Test Suite Completed!");
-console.log("\nSummary: Test Summary:");
-console.log("PASS: HTML/JS injection prevention - WORKING");
-console.log("PASS: SVG malicious content blocking - WORKING");
-console.log("PASS: URL scheme validation - WORKING");
-console.log("PASS: Text sanitization with limits - WORKING");
-console.log("PASS: Malicious drawing rejection - WORKING");
-console.log("PASS: Legitimate content preservation - WORKING");
-console.log("\nSecurity: XSS Prevention: IMPLEMENTED & FUNCTIONAL");

backend/src/workers/db-verify.js

@@ -1,18 +0,0 @@
-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,7 +16,6 @@
     "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: .
-      dockerfile: frontend/Dockerfile
+      context: ./frontend
+      dockerfile: Dockerfile
     container_name: excalidash-frontend
     ports:
       - "6767:80"

frontend/.env

@@ -1,4 +0,0 @@
-# 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,23 +1,16 @@
 # Build stage
 FROM node:20-alpine AS builder
 
-WORKDIR /app/frontend
+WORKDIR /app
 
-# Copy package files first for better caching
-COPY frontend/package*.json ./
+# Copy package files
+COPY package*.json ./
 
 # Install dependencies
 RUN npm ci
 
 # Copy source code and config files
-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
+COPY . .
 
 # Build the application
 RUN npm run build
@@ -26,10 +19,10 @@ RUN npm run build
 FROM nginx:alpine
 
 # Copy custom nginx config
-COPY frontend/nginx.conf /etc/nginx/nginx.conf
+COPY nginx.conf /etc/nginx/nginx.conf
 
 # Copy built application from builder
-COPY --from=builder /app/frontend/dist /usr/share/nginx/html
+COPY --from=builder /app/dist /usr/share/nginx/html
 
 EXPOSE 80
 

frontend/nginx.conf

@@ -12,9 +12,6 @@ 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;
@@ -32,18 +29,6 @@ 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.1.5",
+  "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/DrawingCard.tsx

@@ -1,12 +1,11 @@
 
 import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { PenTool, Trash2, FolderInput, ArrowRight, Check, Clock, Copy, Download } from 'lucide-react';
+import { PenTool, Trash2, FolderInput, ArrowRight, Check, Clock, Copy } from 'lucide-react';
 import type { Drawing, Collection } from '../types';
 import { formatDistanceToNow } from 'date-fns';
 import clsx from 'clsx';
 import { exportToSvg } from "@excalidraw/excalidraw";
-import { exportDrawingToFile } from '../utils/exportUtils';
 
 import * as api from '../api';
 
@@ -326,16 +325,6 @@ export const DrawingCard: React.FC<DrawingCardProps> = ({
                 <Copy size={14} /> Duplicate
               </button>
 
-              <button
-                onClick={() => {
-                  exportDrawingToFile(drawing);
-                  setContextMenu(null);
-                }}
-                className="w-full px-3 py-2 text-sm text-left text-slate-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-white flex items-center gap-2"
-              >
-                <Download size={14} /> Export
-              </button>
-
               <div className="border-t border-slate-50 dark:border-slate-700 my-1"></div>
 
               <button

frontend/src/components/Sidebar.tsx

@@ -171,7 +171,6 @@ 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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { ArrowLeft, Download } from 'lucide-react';
+import { ArrowLeft } from 'lucide-react';
 import { Excalidraw, exportToSvg } from '@excalidraw/excalidraw';
 import '@excalidraw/excalidraw/index.css';
 import debounce from 'lodash/debounce';
@@ -9,7 +9,6 @@ import { Toaster, toast } from 'sonner';
 import { io, Socket } from 'socket.io-client';
 import { getUserIdentity } from '../utils/identity';
 import { reconcileElements } from '../utils/sync';
-import { exportFromEditor } from '../utils/exportUtils';
 import type { UserIdentity } from '../utils/identity';
 import * as api from '../api';
 import { useTheme } from '../context/ThemeContext';
@@ -266,14 +265,13 @@ export const Editor: React.FC = () => {
     if (!id) return;
     
     try {
-      // Ensure we always have valid data structure
       const persistableAppState = {
-        viewBackgroundColor: appState?.viewBackgroundColor || '#ffffff',
-        gridSize: appState?.gridSize || null,
+        viewBackgroundColor: appState.viewBackgroundColor,
+        gridSize: appState.gridSize,
       };
 
-      const snapshot = latestElementsRef.current ?? elements ?? [];
-      const persistableElements = Array.isArray(snapshot) ? snapshot : [];
+      const snapshot = latestElementsRef.current ?? elements;
+      const persistableElements = Array.from(snapshot);
 
       console.log("[Editor] Saving drawing", {
         drawingId: id,
@@ -595,25 +593,6 @@ export const Editor: React.FC = () => {
         </div>
         
         <div className="flex items-center gap-3">
-          {/* Download Button */}
-          <button
-            onClick={() => {
-              if (excalidrawAPI.current) {
-                const elements = excalidrawAPI.current.getSceneElementsIncludingDeleted();
-                const appState = excalidrawAPI.current.getAppState();
-                const files = excalidrawAPI.current.getFiles() || {};
-                exportFromEditor(drawingName, elements, appState, files);
-                toast.success('Drawing exported');
-              }
-            }}
-            className="p-2 hover:bg-gray-100 dark:hover:bg-neutral-800 rounded-lg text-gray-600 dark:text-gray-300 transition-colors"
-            title="Export drawing"
-          >
-            <Download size={20} />
-          </button>
-
-          <div className="h-6 w-px bg-gray-300 dark:bg-gray-700" />
-
           <div className="flex items-center">
             <div className="relative group">
               <div