feat: Use application/octet-stream as a fallback media type to avoid "Unknown media type" errors

.changeset/breezy-pens-sing.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/i18n": minor
+---
+
+Added "Reject unknown media types" setting to control whether uploads with unknown media types (MIME types) should be accepted

apps/meteor/app/api/server/lib/getUploadFormData.ts

@@ -5,6 +5,8 @@ import type { ValidateFunction } from 'ajv';
 import busboy from 'busboy';
 import type { Request } from 'express';
 
+import { mime } from '../../../utils/lib/mimeTypes';
+
 type UploadResult<K> = {
 	file: Readable & { truncated: boolean };
 	fieldname: string;
@@ -78,12 +80,13 @@ export async function getUploadFormData<
 				fileChunks.length = 0;
 				return returnError(new MeteorError('error-file-too-large'));
 			}
+			const mimeTypeFromFilename = mime.lookup(filename);
 
 			uploadedFile = {
 				file,
 				filename,
 				encoding,
-				mimetype,
+				mimetype: typeof mimeTypeFromFilename === 'string' ? mimeTypeFromFilename : mimetype,
 				fieldname,
 				fields,
 				fileBuffer: Buffer.concat(fileChunks),

apps/meteor/client/views/room/body/hooks/useFileUploadDropTarget.ts

@@ -29,7 +29,8 @@ export const useFileUploadDropTarget = (): readonly [
 
 	const t = useTranslation();
 
-	const fileUploadEnabled = useSetting('FileUpload_Enabled') as boolean;
+	const fileUploadEnabled = useSetting<boolean>('FileUpload_Enabled');
+	const rejectUnknownMediaTypes = useSetting<boolean>('FileUpload_RejectUnknownMediaTypes');
 	const user = useUser();
 	const fileUploadAllowedForUser = useReactiveValue(
 		useCallback(() => !roomCoordinator.readOnly(room._id, { username: user?.username }), [room._id, user?.username]),
@@ -55,7 +56,8 @@ export const useFileUploadDropTarget = (): readonly [
 		const uniqueFiles = getUniqueFiles();
 
 		const uploads = Array.from(uniqueFiles).map((file) => {
-			Object.defineProperty(file, 'type', { value: mime.lookup(file.name) });
+			const fileMimeType = mime.lookup(file.name);
+			Object.defineProperty(file, 'type', { value: fileMimeType ?? (rejectUnknownMediaTypes ? undefined : 'application/octet-stream') });
 			return file;
 		});
 

apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/hooks/useFileUploadAction.ts

@@ -9,7 +9,8 @@ const fileInputProps = { type: 'file', multiple: true };
 
 export const useFileUploadAction = (disabled: boolean): GenericMenuItemProps => {
 	const t = useTranslation();
-	const fileUploadEnabled = useSetting('FileUpload_Enabled');
+	const fileUploadEnabled = useSetting<boolean>('FileUpload_Enabled');
+	const rejectUnknownMediaTypes = useSetting<boolean>('FileUpload_RejectUnknownMediaTypes');
 	const fileInputRef = useFileInput(fileInputProps);
 	const chat = useChat();
 
@@ -25,8 +26,9 @@ export const useFileUploadAction = (disabled: boolean): GenericMenuItemProps =>
 		const handleUploadChange = async () => {
 			const { mime } = await import('../../../../../../../app/utils/lib/mimeTypes');
 			const filesToUpload = Array.from(fileInputRef?.current?.files ?? []).map((file) => {
+				const fileMimeType = mime.lookup(file.name);
 				Object.defineProperty(file, 'type', {
-					value: mime.lookup(file.name),
+					value: fileMimeType ?? (rejectUnknownMediaTypes ? undefined : 'application/octet-stream'),
 				});
 				return file;
 			});

apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx

@@ -64,6 +64,15 @@ const FileUploadModal = ({
 	};
 
 	useEffect(() => {
+		if (invalidContentType && !file.type) {
+			dispatchToastMessage({
+				type: 'error',
+				message: t('FileUpload_MediaType_Unknown'),
+			});
+			onClose();
+			return;
+		}
+
 		if (invalidContentType) {
 			dispatchToastMessage({
 				type: 'error',

apps/meteor/server/settings/file-upload.ts

@@ -25,6 +25,11 @@ export const createFileUploadSettings = () =>
 			i18nDescription: 'FileUpload_MediaTypeBlackListDescription',
 		});
 
+		await this.add('FileUpload_RejectUnknownMediaTypes', true, {
+			type: 'boolean',
+			public: true,
+		});
+
 		await this.add('FileUpload_ProtectFiles', true, {
 			type: 'boolean',
 			public: true,

apps/meteor/tests/e2e/file-upload.spec.ts

@@ -1,6 +1,7 @@
 import { Users } from './fixtures/userStates';
 import { HomeChannel } from './page-objects';
 import { createTargetChannel } from './utils';
+import { setSettingValueById } from './utils/setSettingValueById';
 import { expect, test } from './utils/test';
 
 test.use({ storageState: Users.user1.state });
@@ -10,6 +11,10 @@ test.describe.serial('file-upload', () => {
 	let targetChannel: string;
 
 	test.beforeAll(async ({ api }) => {
+		await Promise.all([
+			setSettingValueById(api, 'FileUpload_RejectUnknownMediaTypes', true),
+			setSettingValueById(api, 'FileUpload_MediaTypeBlackList', 'image/svg+xml'),
+		]);
 		targetChannel = await createTargetChannel(api);
 	});
 
@@ -21,6 +26,10 @@ test.describe.serial('file-upload', () => {
 	});
 
 	test.afterAll(async ({ api }) => {
+		await Promise.all([
+			setSettingValueById(api, 'FileUpload_RejectUnknownMediaTypes', true),
+			setSettingValueById(api, 'FileUpload_MediaTypeBlackList', 'image/svg+xml'),
+		]);
 		expect((await api.post('/channels.delete', { roomName: targetChannel })).status()).toBe(200);
 	});
 
@@ -54,4 +63,33 @@ test.describe.serial('file-upload', () => {
 		await expect(poHomeChannel.content.getFileDescription).toHaveText('lst_description');
 		await expect(poHomeChannel.content.lastMessageFileName).toContainText('lst-test.lst');
 	});
+
+	test('expect not to send drawio file when the "Reject unknown media types" setting is enabled', async ({ api, page }) => {
+		await setSettingValueById(api, 'FileUpload_RejectUnknownMediaTypes', true);
+
+		await page.reload();
+		await poHomeChannel.content.sendFileMessage('diagram.drawio');
+		await expect(poHomeChannel.content.btnModalConfirm).not.toBeVisible();
+	});
+
+	test('expect send drawio file succesfully when the "Reject unknown media types" setting is disabled', async ({ api, page }) => {
+		await setSettingValueById(api, 'FileUpload_RejectUnknownMediaTypes', false);
+
+		await page.reload();
+		await poHomeChannel.content.sendFileMessage('diagram.drawio');
+		await poHomeChannel.content.descriptionInput.fill('drawio_description');
+		await poHomeChannel.content.btnModalConfirm.click();
+
+		await expect(poHomeChannel.content.getFileDescription).toHaveText('drawio_description');
+		await expect(poHomeChannel.content.lastMessageFileName).toContainText('diagram.drawio');
+	});
+
+	test('expect not to send drawio file when the "Reject unknown media types" setting is disabled, but the default media type is blocked', async ({ api, page }) => {
+		await setSettingValueById(api, 'FileUpload_MediaTypeBlackList', 'application/octet-stream')
+		await setSettingValueById(api, 'FileUpload_RejectUnknownMediaTypes', false);
+
+		await page.reload();
+		await poHomeChannel.content.sendFileMessage('diagram.drawio');
+		await expect(poHomeChannel.content.btnModalConfirm).not.toBeVisible();
+	});
 });

apps/meteor/tests/e2e/fixtures/files/diagram.drawio

@@ -0,0 +1,13 @@
+<mxfile host="app.diagrams.net" modified="2024-05-21T16:10:09.295Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36" etag="ZxZRCTHi-kxhlzk7b9_Z" version="24.4.4" type="device">
+  <diagram name="Página-1" id="9eBILa8281JaQ4yUkDbp">
+    <mxGraphModel dx="1434" dy="786" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="dopCU4gkJe7Sfp6IDYO1-1" value="&lt;b&gt;&lt;font style=&quot;font-size: 30px;&quot;&gt;Rocket.Chat&lt;/font&gt;&lt;/b&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+          <mxGeometry x="314" y="350" width="200" height="50" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>

packages/i18n/src/locales/en.i18n.json

@@ -2369,6 +2369,7 @@
   "FileUpload_MaxFileSize": "Maximum File Upload Size (in bytes)",
   "FileUpload_MaxFileSizeDescription": "Set it to -1 to remove the file size limitation.",
   "FileUpload_MediaType_NotAccepted__type__": "Media Type Not Accepted: {{type}}",
+  "FileUpload_MediaType_Unknown": "Unknown media type not accepted",
   "FileUpload_MediaType_NotAccepted": "Media Types Not Accepted",
   "FileUpload_MediaTypeBlackList": "Blocked Media Types",
   "FileUpload_MediaTypeBlackListDescription": "Comma-separated list of media types. This setting has priority over the Accepted Media Types.",
@@ -2377,6 +2378,8 @@
   "FileUpload_ProtectFiles": "Protect Uploaded Files",
   "FileUpload_ProtectFilesDescription": "Only authenticated users will have access",
   "FileUpload_ProtectFilesEnabled_JWTNotSet": "Uploaded files are protected, but JWT access is not setup, this is required for Twilio to send media messages. Setup in Settings -> FileUpload",
+  "FileUpload_RejectUnknownMediaTypes": "Reject unknown media types",
+  "FileUpload_RejectUnknownMediaTypes_Description": "Uploading unknown media types is blocked by default. When this setting is disabled, the `application/octet-stream` MIME type will be assigned to files with unknown media types so that they can be uploaded.",
   "FileUpload_RotateImages": "Rotate images on upload",
   "FileUpload_RotateImages_Description": "Enabling this setting may cause image quality loss",
   "FileUpload_S3_Acl": "Acl",