feat: sanitize file names (#767)

apps/mail-bridge/queue/mail-processor.ts

@@ -23,6 +23,7 @@ import { createExtensionSet } from '@u22n/tiptap/extensions';
 import { sendRealtimeNotification } from '../utils/realtime';
 import { simpleParser, type EmailAddress } from 'mailparser';
 import { parseAddressIds } from '../utils/contactParsing';
+import { sanitizeFilename } from '@u22n/utils/sanitizers';
 import { addConvoToSpace } from '../utils/spaceUtils';
 import { eq, and, inArray } from '@u22n/database/orm';
 import { tiptapCore, tiptapHtml } from '@u22n/tiptap';
@@ -244,9 +245,11 @@ type GenerationContext = {
 function generateFileName({ identifier, fileType }: GenerationContext) {
   switch (fileType) {
     case 'text/calendar':
-      return `${identifier} Calender Invite.ics`;
+      return sanitizeFilename(`${identifier} Calender Invite.ics`);
     default:
-      return `Attachment (${identifier}) ${new Date().toDateString()}.${mime.getExtension(fileType) ?? 'bin'}`;
+      return sanitizeFilename(
+        `Attachment ${identifier} ${new Date().toDateString()}.${mime.getExtension(fileType) ?? 'bin'}`
+      );
   }
 }
 
@@ -374,7 +377,11 @@ export const worker = createWorker<MailProcessorJobData>(
           : parsedEmail.textAsHtml
             ? parsedEmail.textAsHtml.replace(/\n/g, '')
             : '';
-        const attachments = parsedEmail.attachments || [];
+        const attachments =
+          parsedEmail.attachments.map((f) => ({
+            ...f,
+            filename: f.filename ? sanitizeFilename(f.filename) : undefined
+          })) || [];
 
         if (forwardedEmailAddress) {
           const forwardingAddressObject: EmailAddress = {

apps/storage/proxy/attachment.ts

@@ -1,5 +1,6 @@
 import { convoAttachments, orgMembers } from '@u22n/database/schema';
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
+import { sanitizeFilename } from '@u22n/utils/sanitizers';
 import { GetObjectCommand } from '@aws-sdk/client-s3';
 import { typeIdValidator } from '@u22n/utils/typeid';
 import { zValidator } from '@u22n/hono/helpers';
@@ -16,7 +17,7 @@ export const attachmentProxy = createHonoApp<Ctx>().get(
   zValidator(
     'param',
     z.object({
-      filename: z.string().transform((f) => decodeURIComponent(f)),
+      filename: z.string().transform(decodeURIComponent),
       attachmentId: typeIdValidator('convoAttachments'),
       orgShortcode: z.string()
     })
@@ -44,7 +45,8 @@ export const attachmentProxy = createHonoApp<Ctx>().get(
 
     if (
       !attachmentQueryResponse ||
-      decodeURIComponent(attachmentQueryResponse.fileName) !== filename ||
+      sanitizeFilename(attachmentQueryResponse.fileName) !==
+        sanitizeFilename(filename) ||
       attachmentQueryResponse.org.shortcode !== orgShortcode
     ) {
       return c.json(
@@ -72,7 +74,7 @@ export const attachmentProxy = createHonoApp<Ctx>().get(
 
     const command = new GetObjectCommand({
       Bucket: env.STORAGE_S3_BUCKET_ATTACHMENTS,
-      Key: `${attachmentQueryResponse.org.publicId}/${attachmentId}/${filename}`
+      Key: `${attachmentQueryResponse.org.publicId}/${attachmentId}/${attachmentQueryResponse.fileName}`
     });
     const url = await getSignedUrl(s3Client, command, { expiresIn: 3600 });
     const res = await fetch(url);
@@ -84,6 +86,6 @@ export const attachmentProxy = createHonoApp<Ctx>().get(
     }
     // Cache for 1 hour
     c.header('Cache-Control', 'private, max-age=3600');
-    return c.body(res.body);
+    return c.body(res.body, res);
   }
 );

apps/storage/proxy/inline-proxy.ts

@@ -1,5 +1,6 @@
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 import { pendingAttachments } from '@u22n/database/schema';
+import { sanitizeFilename } from '@u22n/utils/sanitizers';
 import { GetObjectCommand } from '@aws-sdk/client-s3';
 import { typeIdValidator } from '@u22n/utils/typeid';
 import { zValidator } from '@u22n/hono/helpers';
@@ -19,7 +20,7 @@ export const inlineProxy = createHonoApp<Ctx>()
     zValidator(
       'param',
       z.object({
-        filename: z.string().transform((f) => decodeURIComponent(f)),
+        filename: z.string().transform(decodeURIComponent),
         attachmentId: typeIdValidator('convoAttachments'),
         orgShortcode: z.string()
       })
@@ -52,7 +53,8 @@ export const inlineProxy = createHonoApp<Ctx>()
 
       if (
         !attachmentQueryResponse ||
-        attachmentQueryResponse.filename !== filename ||
+        sanitizeFilename(attachmentQueryResponse.filename) !==
+          sanitizeFilename(filename) ||
         attachmentQueryResponse.org.shortcode !== orgShortcode ||
         !attachmentQueryResponse.org.members.find(
           (member) => member.accountId === c.get('account')?.id
@@ -66,7 +68,7 @@ export const inlineProxy = createHonoApp<Ctx>()
 
       const command = new GetObjectCommand({
         Bucket: env.STORAGE_S3_BUCKET_ATTACHMENTS,
-        Key: `${attachmentQueryResponse.org.publicId}/${attachmentId}/${filename}`
+        Key: `${attachmentQueryResponse.org.publicId}/${attachmentId}/${attachmentQueryResponse.filename}`
       });
       const url = await getSignedUrl(s3Client, command, { expiresIn: 3600 });
       const res = await fetch(url);

apps/web/src/components/shared/attachments.tsx

@@ -12,6 +12,7 @@ import {
 } from '@phosphor-icons/react';
 import { type VariantProps, cva } from 'class-variance-authority';
 import { memo, useCallback, useMemo, useState } from 'react';
+import { sanitizeFilename } from '@u22n/utils/sanitizers';
 import { useOrgShortcode } from '@/src/hooks/use-params';
 import { cn, prettyBytes } from '../../lib/utils';
 import { type TypeId } from '@u22n/utils/typeid';
@@ -70,7 +71,7 @@ export function useAttachmentUploader(defaultList?: Attachment[]) {
     async (file: File) => {
       setPrefetching(true);
       const preSignedData = (await fetch(
-        `${env.NEXT_PUBLIC_STORAGE_URL}/api/attachments/presign?orgShortcode=${orgShortcode}&filename=${file.name}`,
+        `${env.NEXT_PUBLIC_STORAGE_URL}/api/attachments/presign?orgShortcode=${orgShortcode}&filename=${sanitizeFilename(file.name)}`,
         {
           method: 'GET',
           credentials: 'include'
@@ -83,7 +84,7 @@ export function useAttachmentUploader(defaultList?: Attachment[]) {
 
       setAttachments((prev) =>
         prev.concat({
-          filename: file.name,
+          filename: sanitizeFilename(file.name),
           size: file.size,
           type: file.type,
           publicId: preSignedData.publicId,

apps/web/src/hooks/use-inline-uploader.ts

@@ -1,4 +1,5 @@
 import { createImageUpload } from '@u22n/tiptap/extensions/image-uploader';
+import { sanitizeFilename } from '@u22n/utils/sanitizers';
 import { type TypeId } from '@u22n/utils/typeid';
 import { useOrgShortcode } from './use-params';
 import uploadTracker from '../lib/upload';
@@ -27,7 +28,7 @@ export function useInlineUploader(sizeValidate?: (file: File) => boolean) {
         },
         onUpload: async (file) => {
           const presignedData = (await fetch(
-            `${env.NEXT_PUBLIC_STORAGE_URL}/api/attachments/presign?orgShortcode=${orgShortcode}&filename=${file.name}`,
+            `${env.NEXT_PUBLIC_STORAGE_URL}/api/attachments/presign?orgShortcode=${orgShortcode}&filename=${sanitizeFilename(file.name)}`,
             {
               method: 'GET',
               credentials: 'include'
@@ -48,7 +49,7 @@ export function useInlineUploader(sizeValidate?: (file: File) => boolean) {
                 includeCredentials: false
               }).then(() => {
                 const image = new Image();
-                image.src = `${env.NEXT_PUBLIC_STORAGE_URL}/inline-proxy/${orgShortcode}/${presignedData.publicId}/${file.name}?type=${encodeURIComponent(file.type)}&size=${file.size}`;
+                image.src = `${env.NEXT_PUBLIC_STORAGE_URL}/inline-proxy/${orgShortcode}/${presignedData.publicId}/${sanitizeFilename(file.name)}?type=${encodeURIComponent(file.type)}&size=${file.size}`;
                 image.onload = () => {
                   resolve(image.src);
                 };

packages/utils/package.json

@@ -14,7 +14,8 @@
     "./colors": "./uiColors.ts",
     "./zodSchemas": "./zodSchemas.ts",
     "./discord": "./discord.ts",
-    "./spaces": "./spaces.ts"
+    "./spaces": "./spaces.ts",
+    "./sanitizers": "./sanitizers.ts"
   },
   "keywords": [],
   "author": "",

packages/utils/sanitizers.ts

@@ -0,0 +1,3 @@
+export function sanitizeFilename(filename: string) {
+  return filename.replace(/[^a-zA-Z0-9-_.]/g, '_');
+}