fix: Download of cyrilic named files doesn't work on E2EE rooms (RocketChat#39612)

Author: KevLehman

.changeset/small-pants-reflect.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixes the download of attachments with non-unicode names on E2EE rooms

apps/meteor/client/components/message/hooks/useNormalizedMessage.ts

@@ -40,16 +40,16 @@ const normalizeAttachments = (attachments: MessageAttachment[], name?: string, t
 
 		if (isFileAttachment(attachment)) {
 			if (attachment.title_link && !attachment.title_link.startsWith('/file-decrypt/')) {
-				attachment.title_link = `/file-decrypt${attachment.title_link}?key=${key}`;
+				attachment.title_link = `/file-decrypt${attachment.title_link}?key=${encodeURIComponent(key)}`;
 			}
 			if (isFileImageAttachment(attachment) && !attachment.image_url.startsWith('/file-decrypt/')) {
-				attachment.image_url = `/file-decrypt${attachment.image_url}?key=${key}`;
+				attachment.image_url = `/file-decrypt${attachment.image_url}?key=${encodeURIComponent(key)}`;
 			}
 			if (isFileAudioAttachment(attachment) && !attachment.audio_url.startsWith('/file-decrypt/')) {
-				attachment.audio_url = `/file-decrypt${attachment.audio_url}?key=${key}`;
+				attachment.audio_url = `/file-decrypt${attachment.audio_url}?key=${encodeURIComponent(key)}`;
 			}
 			if (isFileVideoAttachment(attachment) && !attachment.video_url.startsWith('/file-decrypt/')) {
-				attachment.video_url = `/file-decrypt${attachment.video_url}?key=${key}`;
+				attachment.video_url = `/file-decrypt${attachment.video_url}?key=${encodeURIComponent(key)}`;
 			}
 		}
 

apps/meteor/client/views/room/ImageGallery/hooks/useImagesList.ts

@@ -40,7 +40,7 @@ export const useImagesList = ({ roomId, startingFromId }: { roomId: IRoom['_id']
 								type: decrypted.type,
 							}),
 						);
-						decrypted.path = `/file-decrypt${decrypted.path}?key=${key}`;
+						decrypted.path = `/file-decrypt${decrypted.path}?key=${encodeURIComponent(key)}`;
 						Object.assign(file, decrypted);
 					}
 				}

apps/meteor/client/views/room/contextualBar/RoomFiles/hooks/useFilesList.ts

@@ -56,7 +56,7 @@ export const useFilesList = ({ rid, type, text }: { rid: Required<IUpload>['rid'
 								type: decrypted.type,
 							}),
 						);
-						decrypted.path = `/file-decrypt${decrypted.path}?key=${key}`;
+						decrypted.path = `/file-decrypt${decrypted.path}?key=${encodeURIComponent(key)}`;
 						Object.assign(file, decrypted);
 					}
 				}

apps/meteor/public/enc.js

@@ -1,9 +1,9 @@
-self.addEventListener('install', function(event) {
-    event.waitUntil(self.skipWaiting()); // Activate worker immediately
+self.addEventListener('install', function (event) {
+	event.waitUntil(self.skipWaiting()); // Activate worker immediately
 });
 
-self.addEventListener('activate', function(event) {
-    event.waitUntil(self.clients.claim()); // Become available to all pages
+self.addEventListener('activate', function (event) {
+	event.waitUntil(self.clients.claim()); // Become available to all pages
 });
 
 function base64Decode(string) {
@@ -32,7 +32,13 @@ const decrypt = async (key, iv, file) => {
 const getUrlParams = (url) => {
 	const urlObj = new URL(url, location.origin);
 
-	const k = base64DecodeString(urlObj.searchParams.get('key'));
+	const rawKey = urlObj.searchParams.get('key');
+	if (!rawKey) {
+		throw new Error('Missing "key" query param');
+	}
+
+
+	const k = base64DecodeString(decodeURIComponent(rawKey));
 
 	urlObj.searchParams.delete('key');
 
@@ -74,7 +80,7 @@ self.addEventListener('fetch', (event) => {
 						const result = await decrypt(key, iv, file);
 
 						const newHeaders = new Headers(res.headers);
-						newHeaders.set('Content-Disposition', 'inline; filename="'+name+'"');
+						newHeaders.set('Content-Disposition', 'inline; filename="' + name + '"');
 						newHeaders.set('Content-Type', type);
 
 						const response = new Response(result, {
@@ -114,18 +120,17 @@ self.addEventListener('message', async (event) => {
 
 	const file = await res.arrayBuffer();
 	const result = await decrypt(key, iv, file);
-	event.source
-		.postMessage({
-			id: event.data.id,
-			type: 'attachment-download-result',
-			result,
-		});
-		// .catch((error) => {
-		// 	console.error('Posting message failed:', error);
-		// 	event.source.postMessage({
-		// 		id: event.data.id,
-		// 		type: 'attachment-download-result',
-		// 		error,
-		// 	});
-		// });
+	event.source.postMessage({
+		id: event.data.id,
+		type: 'attachment-download-result',
+		result,
+	});
+	// .catch((error) => {
+	// 	console.error('Posting message failed:', error);
+	// 	event.source.postMessage({
+	// 		id: event.data.id,
+	// 		type: 'attachment-download-result',
+	// 		error,
+	// 	});
+	// });
 });

apps/meteor/tests/e2e/e2e-encryption/e2ee-file-encryption.spec.ts

@@ -96,6 +96,35 @@ test.describe('E2EE File Encryption', () => {
 		});
 	});
 
+	test('File with Unicode filename uploads and downloads correctly', async ({ page }) => {
+		const UNICODE_FILE_NAME = 'Новый текстовый документ.txt';
+
+		await test.step('upload file with Unicode filename', async () => {
+			await poHomeChannel.content.sendFileMessage(TEST_FILE_TXT);
+			await poHomeChannel.composer.getFileByName(TEST_FILE_TXT).click();
+			await poHomeChannel.content.inputFileUploadName.fill(UNICODE_FILE_NAME);
+			await poHomeChannel.content.btnUpdateFileUpload.click();
+			await poHomeChannel.composer.btnSend.click();
+
+			await expect(poHomeChannel.content.lastUserMessage.locator('.rcx-icon--name-key')).toBeVisible();
+			await expect(poHomeChannel.content.getLastMessageByFileName(UNICODE_FILE_NAME)).toBeVisible();
+		});
+
+		await test.step('download the file and verify the Unicode filename is preserved', async () => {
+			await poHomeChannel.roomToolbar.openMoreOptions();
+			await poHomeChannel.roomToolbar.menuItemFiles.click();
+
+			await expect(poHomeChannel.tabs.files.getFileByName(UNICODE_FILE_NAME)).toBeVisible();
+
+			const [download] = await Promise.all([
+				page.waitForEvent('download'),
+				poHomeChannel.tabs.files.getFileByName(UNICODE_FILE_NAME).click(),
+			]);
+
+			expect(download.suggestedFilename()).toBe(UNICODE_FILE_NAME);
+		});
+	});
+
 	test('File encryption with whitelisted and blacklisted media types', async ({ api }) => {
 		await test.step('send a text file in channel', async () => {
 			const updatedFileName = `edited_${TEST_FILE_TXT}`;