Merge pull request #19236 from nextcloud/backport/19228/stable33

[stable33] fix(FilePreview): sanitize file name

Author: nickvergessen

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -19,14 +19,14 @@
 		@click.exact="handleClick"
 		@keydown.enter="handleClick">
 		<span
-			:title="file.name"
+			:title="sanitizedFileName"
 			class="image-container"
 			:class="{ playable: isPlayable }"
 			:style="imageContainerStyle">
 			<img
 				class="file-preview__image"
 				:class="previewImageClass"
-				:alt="file.name"
+				:alt="sanitizedFileName"
 				:src="failed ? defaultIconUrl : previewUrl"
 				@load="onLoad"
 				@error="onError">
@@ -65,7 +65,8 @@
 			</template>
 		</NcButton>
 		<div v-if="shouldShowFileDetail" class="name-container">
-			{{ fileDetail }}
+			<span class="name-container__basename">{{ fileNameWithoutExtension }}</span>
+			<span v-if="fileExtension" class="name-container__extension">{{ fileExtension }}</span>
 		</div>
 	</component>
 </template>
@@ -88,6 +89,7 @@ import { SHARED_ITEM } from '../../../../../constants.ts'
 import { getTalkConfig } from '../../../../../services/CapabilitiesManager.ts'
 import { useActorStore } from '../../../../../stores/actor.ts'
 import { useSharedItemsStore } from '../../../../../stores/sharedItems.ts'
+import { getFileExtension, sanitizeFileName } from '../../../../../utils/fileUpload.js'
 
 const PREVIEW_TYPE = {
 	TEMPORARY: 0,
@@ -215,8 +217,18 @@ export default {
 			)
 		},
 
-		fileDetail() {
-			return this.file.name
+		// file.name with bidi control chars replaced by '_', for title/alt/aria-label text
+		sanitizedFileName() {
+			return sanitizeFileName(this.file.name)
+		},
+
+		fileNameWithoutExtension() {
+			return this.file.name.slice(0, this.file.name.length - getFileExtension(this.file.name).length)
+		},
+
+		// Dot included, original case
+		fileExtension() {
+			return getFileExtension(this.file.name)
 		},
 
 		fallbackLocalUrl() {
@@ -452,7 +464,7 @@ export default {
 		},
 
 		removeAriaLabel() {
-			return t('spreed', 'Remove {fileName}', { fileName: this.file.name })
+			return t('spreed', 'Remove {fileName}', { fileName: this.sanitizedFileName })
 		},
 	},
 
@@ -648,7 +660,19 @@ export default {
 		width: 100%;
 		overflow: hidden;
 		white-space: nowrap;
-		text-overflow: ellipsis;
+		display: inline-flex;
+
+		&__basename {
+			unicode-bidi: isolate;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		&__extension {
+			color: var(--color-text-maxcontrast);
+			overflow: visible;
+		}
 	}
 
 	&:not(.file-preview--viewer-available) {

src/test-setup.js

@@ -28,6 +28,7 @@ vi.mock('@nextcloud/dialogs', () => ({
 
 vi.mock('@nextcloud/files', () => ({
 	validateFileName: vi.fn(),
+	formatFileSize: vi.fn((size) => `${size} B`),
 }))
 
 vi.mock('@nextcloud/files/dav', () => ({

src/utils/fileUpload.js

@@ -5,6 +5,7 @@
 
 const extensionRegex = /\.[0-9a-z]+$/i
 const suffixRegex = / \(\d+\)$/
+const bidiControlRegex = /[\u202A-\u202E\u2066-\u2069]/g
 
 /**
  * Returns the file extension for the given path
@@ -16,6 +17,16 @@ function getFileExtension(path) {
 	return path.match(extensionRegex)?.[0] ?? ''
 }
 
+/**
+ * Returns name with bidi control characters replaced by '_'
+ *
+ * @param {string} name file name
+ * @return {string} sanitized file name
+ */
+export function sanitizeFileName(name) {
+	return name.replace(bidiControlRegex, '_')
+}
+
 /**
  * Returns the file suffix for the given path
  *

src/utils/textParse.ts

@@ -8,6 +8,7 @@ import type { ChatMessage, Mention } from '../types/index.ts'
 import { getBaseUrl } from '@nextcloud/router'
 import { decodeHTML } from 'entities'
 import { MENTION } from '../constants.ts'
+import { sanitizeFileName } from './fileUpload.js'
 
 /**
  * Parse message text to return proper formatting for mentions
@@ -63,7 +64,8 @@ function parseToSimpleMessage(text: string, parameters: ChatMessage['messagePara
 	}
 
 	Object.entries(parameters).forEach(([key, value]) => {
-		text = text.replaceAll('{' + key + '}', value.name)
+		const name = key === 'file' ? sanitizeFileName(value.name) : value.name
+		text = text.replaceAll('{' + key + '}', name)
 	})
 	return text.trim()
 }