feat: enhance image upload validation across the application (calcom#22766)

* feat: enhance image upload validation across the application

* Patch improvements.

* refactor: streamline avatar upload error handling in updateProfile handler

* refactor: extract image validation logic into a separate module for reuse in BannerUploader and ImageUploader

* fix: reset file input value on validation failure in image uploaders

* fix: update localization key for image file upload error message

* fix: update HTML content validation in image uploader to check for additional byte

* Code Quality improvements

* add : unit tests.

* fix : fixing some more issues.

* fix : some import fixes

* fix : fixing type-check issues

* fix : some more import fixes.

* fix : removing Duplicate max-file-size constant

* refactor: enhance base64 validation with regex pattern

* refactor: centralize MAX_IMAGE_FILE_SIZE and fix SVG checks.

* fix : some toast fixes.

* fixing the size of the banner.

* fix: update accepted image formats in BannerUploader and ImageUploader components

* fix

* coderabbit suggestions addressed.

* addressed coderrabit comment

* refactor: implement generic i18n error messages with interpolation

- Add generic 'unsupported_file_type' translation key with {{type}} interpolation
- Replace hardcoded file type error messages with reusable i18n pattern
- Update imageValidation interfaces to support errorKey and errorParams
- Refactor server-side and client-side validation to use new pattern
- Remove individual translation keys for each file type (PDF, HTML, Script, ZIP, Executable)
- Add new translation keys for other validation errors (SVG, base64, empty data, etc.)
- Type-safe error handling with proper interpolation support

Benefits:
- Single reusable translation pattern reduces duplication
- Easier to maintain and localize
- Consistent error messaging across file types

* feat: add MAX_BANNER_SIZE constant and update file size validation

- Add MAX_BANNER_SIZE constant (5MB) to shared constants file
- Update BannerUploader to use shared constant instead of inline value
- Update ImageUploader to handle new errorKey/errorParams pattern
- Maintain backward compatibility with existing error handling

Note: Pre-existing linting warnings in constants.ts and BannerUploader.tsx
are unrelated to these changes and were present before this refactor.

* adressed volnei's suggestions.

* test: update image validation tests for new errorKey/errorParams pattern

- Update all dangerous file type tests to expect errorKey and errorParams instead of hardcoded error messages
- Add comprehensive tests for new error format validation pattern
- Add tests for backward compatibility with error field
- Add tests for MAX_BANNER_SIZE constant integration
- Verify that unsupported file types now return generic 'unsupported_file_type' key with type interpolation
- Ensure all existing functionality continues to work with enhanced error handling

All 42 tests passing ✅

* test: update server-side image validation tests for new error format

- Update all dangerous file type tests to expect errorKey and errorParams
- Change hardcoded error messages to i18n keys (unsupported_file_type, svg_contains_dangerous_content, etc.)
- Update edge case tests to use new error keys (empty_image_data, invalid_base64_format, unrecognized_image_format)
- Add comprehensive tests for new error format validation pattern
- Add tests for backward compatibility with error field
- Verify that unsupported file types return generic 'unsupported_file_type' key with type interpolation

All 26 server-side tests passing ✅
Complements client-side test updates for complete test coverage

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: unknown <adhabal2002@gmail.com>

Author: 3 people

apps/api/v1/pages/api/users/[userId]/_patch.ts

@@ -3,6 +3,8 @@ import type { NextApiRequest } from "next";
 import { HttpError } from "@calcom/lib/http-error";
 import { uploadAvatar } from "@calcom/lib/server/avatar";
 import { defaultResponder } from "@calcom/lib/server/defaultResponder";
+import { validateBase64Image } from "@calcom/lib/server/imageValidation";
+import { resizeBase64Image } from "@calcom/lib/server/resizeBase64Image";
 import prisma from "@calcom/prisma";
 import type { Prisma } from "@calcom/prisma/client";
 
@@ -124,10 +126,25 @@ export async function patchHandler(req: NextApiRequest) {
   }
 
   if (avatar) {
-    body.avatarUrl = await uploadAvatar({
-      userId: query.userId,
-      avatar: await (await import("@calcom/lib/server/resizeBase64Image")).resizeBase64Image(avatar),
-    });
+    const validation = validateBase64Image(avatar);
+    if (!validation.isValid) {
+      throw new HttpError({
+        statusCode: 400,
+        message: `Invalid avatar image: ${validation.error}`,
+      });
+    }
+
+    try {
+      body.avatarUrl = await uploadAvatar({
+        userId: query.userId,
+        avatar: await resizeBase64Image(avatar),
+      });
+    } catch (error) {
+      throw new HttpError({
+        statusCode: 400,
+        message: error instanceof Error ? error.message : "Failed to upload avatar",
+      });
+    }
   }
 
   const data = await prisma.user.update({

apps/web/app/api/avatar/[uuid]/route.ts

@@ -6,6 +6,7 @@ import { z } from "zod";
 
 import { AVATAR_FALLBACK, WEBAPP_URL } from "@calcom/lib/constants";
 import { convertSvgToPng } from "@calcom/lib/server/imageUtils";
+import { validateBase64Image } from "@calcom/lib/server/imageValidation";
 import prisma from "@calcom/prisma";
 
 const querySchema = z.object({
@@ -46,6 +47,12 @@ async function handler(req: NextRequest, { params }: { params: Promise<Params> }
       },
     });
 
+    const validation = validateBase64Image(data);
+    if (!validation.isValid) {
+      const url = new URL(AVATAR_FALLBACK, WEBAPP_URL).toString();
+      return NextResponse.redirect(url, 302);
+    }
+
     // Convert SVG to PNG if needed and update the database
     if (data.startsWith("data:image/svg+xml;base64,")) {
       const pngData = await convertSvgToPng(data);
@@ -72,6 +79,11 @@ async function handler(req: NextRequest, { params }: { params: Promise<Params> }
       "Content-Type": "image/png",
       "Content-Length": imageResp.length.toString(),
       "Cache-Control": "max-age=86400",
+      // Security headers to prevent XSS
+      "X-Content-Type-Options": "nosniff",
+      "Content-Disposition": "inline",
+      "X-Frame-Options": "DENY",
+      "Content-Security-Policy": "default-src 'none'; img-src 'self'",
     },
     status: 200,
   });

apps/web/public/static/locales/en/common.json

@@ -3581,6 +3581,14 @@
   "webhook_metadata": "Metadata",
   "stats": "Stats",
   "booking_status": "Booking status",
+  "unsupported_file_type": "{{type}} files cannot be uploaded as images",
+  "only_image_files_allowed": "Only image files are allowed",
+  "failed_to_validate_image_file": "Failed to validate image file",
+  "invalid_image_file_format": "Invalid image file format",
+  "svg_contains_dangerous_content": "SVG contains potentially dangerous content",
+  "unrecognized_image_format": "Unrecognized image format or invalid file",
+  "invalid_base64_format": "Invalid base64 format",
+  "empty_image_data": "Empty image data",  
   "visit": "Visit",
   "location_custom_label_input_label": "Custom label on booking page",
   "meeting_link": "Meeting link",

packages/app-store/_utils/oauth/updateProfilePhotoGoogle.ts

@@ -3,6 +3,7 @@ import type { OAuth2Client } from "googleapis-common";
 
 import logger from "@calcom/lib/logger";
 import { uploadAvatar } from "@calcom/lib/server/avatar";
+import { validateBase64Image } from "@calcom/lib/server/imageValidation";
 import { UserRepository } from "@calcom/lib/server/repository/user";
 import { resizeBase64Image } from "@calcom/lib/server/resizeBase64Image";
 import prisma from "@calcom/prisma";
@@ -16,12 +17,17 @@ export async function updateProfilePhotoGoogle(oAuth2Client: OAuth2Client, userI
       return;
     }
 
-    // Handle base64 data
     if (
       avatarUrl.startsWith("data:image/png;base64,") ||
       avatarUrl.startsWith("data:image/jpeg;base64,") ||
       avatarUrl.startsWith("data:image/jpg;base64,")
     ) {
+      const validation = validateBase64Image(avatarUrl);
+      if (!validation.isValid) {
+        logger.error(`Invalid avatar image from Google OAuth: ${validation.error}`);
+        return;
+      }
+
       const resizedAvatarUrl = await uploadAvatar({
         avatar: await resizeBase64Image(avatarUrl),
         userId,

packages/lib/constants.ts

@@ -68,6 +68,9 @@ export const MAX_EVENT_DURATION_MINUTES = 1440;
 /** Minimum duration allowed for an event in minutes */
 export const MIN_EVENT_DURATION_MINUTES = 1;
 
+/** Maximum file size allowed for banner uploads in bytes (5MB) */
+export const MAX_BANNER_SIZE = 5 * 1024 * 1024;
+
 export const HOSTED_CAL_FEATURES = process.env.NEXT_PUBLIC_HOSTED_CAL_FEATURES || !IS_SELF_HOSTED;
 
 export const PUBLIC_QUERY_RESERVATION_INTERVAL_SECONDS =

packages/lib/imageValidationConstants.ts

@@ -0,0 +1,71 @@
+/**
+ * Shared image validation constants and utilities
+ * Used by both server-side and client-side validation modules
+ */
+
+/**
+ * Magic numbers (file signatures) for different file types
+ */
+export const FILE_SIGNATURES = {
+  PNG: [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a],
+  JPEG_FF_D8_FF: [0xff, 0xd8, 0xff],
+  GIF87a: [0x47, 0x49, 0x46, 0x38, 0x37, 0x61],
+  GIF89a: [0x47, 0x49, 0x46, 0x38, 0x39, 0x61],
+  WEBP: [0x52, 0x49, 0x46, 0x46],
+  WEBP_SIGNATURE: [0x57, 0x45, 0x42, 0x50],
+  BMP: [0x42, 0x4d],
+  ICO: [0x00, 0x00, 0x01, 0x00],
+  SVG: [0x3c, 0x3f, 0x78, 0x6d, 0x6c],
+  SVG_DIRECT: [0x3c, 0x73, 0x76, 0x67],
+
+  PDF: [0x25, 0x50, 0x44, 0x46],
+  HTML: [0x3c, 0x21, 0x44, 0x4f, 0x43, 0x54, 0x59, 0x50, 0x45],
+  HTML_TAG: [0x3c, 0x68, 0x74, 0x6d, 0x6c],
+  SCRIPT_TAG: [0x3c, 0x73, 0x63, 0x72, 0x69, 0x70, 0x74],
+  ZIP: [0x50, 0x4b, 0x03, 0x04],
+  EXECUTABLE: [0x4d, 0x5a],
+} as const;
+
+/**
+ * Check if bytes match a signature
+ */
+export function matchesSignature(data: Uint8Array, signature: readonly number[]): boolean {
+  if (data.length < signature.length) return false;
+  return signature.every((byte, index) => data[index] === byte);
+}
+
+/**
+ * SVG content validation patterns
+ */
+export const DANGEROUS_SVG_PATTERNS = [
+  "<script",
+  "javascript:",
+  "onload=",
+  "onclick=",
+  "onmouseover=",
+  "onmouseout=",
+  "onfocus=",
+  "onblur=",
+] as const;
+
+/**
+ * Validate SVG content for dangerous patterns
+ */
+export function containsDangerousSVGContent(content: string): boolean {
+  return DANGEROUS_SVG_PATTERNS.some((pattern) => content.includes(pattern));
+}
+
+/**
+ * Base64 regex pattern that matches valid base64 strings
+ * - Matches complete base64 groups of 4 characters
+ * - Handles proper padding with = characters
+ * - Supports both padded and unpadded forms correctly
+ */
+const BASE64_REGEX = /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}(?:==)?|[A-Za-z0-9+/]{3}=)?$/;
+
+/**
+ * Validate base64 string format using strict regex
+ */
+export function isValidBase64(str: string): boolean {
+  return BASE64_REGEX.test(str);
+}

packages/lib/server/avatar.ts

@@ -3,8 +3,14 @@ import { v4 as uuidv4 } from "uuid";
 import { prisma } from "@calcom/prisma";
 
 import { convertSvgToPng } from "./imageUtils";
+import { validateBase64Image } from "./imageValidation";
 
 export const uploadAvatar = async ({ userId, avatar: data }: { userId: number; avatar: string }) => {
+  const validation = validateBase64Image(data);
+  if (!validation.isValid) {
+    throw new Error(`Invalid image data: ${validation.error}`);
+  }
+
   const objectKey = uuidv4();
   const processedData = await convertSvgToPng(data);
 
@@ -40,6 +46,11 @@ export const uploadLogo = async ({
   logo: string;
   isBanner?: boolean;
 }): Promise<string> => {
+  const validation = validateBase64Image(data);
+  if (!validation.isValid) {
+    throw new Error(`Invalid image data: ${validation.error}`);
+  }
+
   const objectKey = uuidv4();
   const processedData = await convertSvgToPng(data);