From a417980a81c1b0ec97a0891e11b5b893c9dcce55 Mon Sep 17 00:00:00 2001
From: James <thumbscrw@pm.me>
Date: Sun, 14 Aug 2022 12:01:17 +0100
Subject: [PATCH] Improve MIME type handling on File Upload and in Message
 Component (#688)

* move allowed MIME types to own util file

* add check for safe MIME type before choosing how to upload

* check for allowed blob type to decide what component to load

* re-add check for safe mimetype

* fix bracket positioning
---
 src/app/molecules/media/Media.jsx     | 37 +--------------------------
 src/app/molecules/message/Message.jsx |  8 +++++-
 src/client/state/RoomsInput.js        |  3 ++-
 src/util/mimetypes.js                 | 37 +++++++++++++++++++++++++++
 4 files changed, 47 insertions(+), 38 deletions(-)
 create mode 100644 src/util/mimetypes.js

diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx
index 5ef25ec..d7ba385 100644
--- a/src/app/molecules/media/Media.jsx
+++ b/src/app/molecules/media/Media.jsx
@@ -13,42 +13,7 @@ import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
 import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
 import PlaySVG from '../../../../public/res/ic/outlined/play.svg';
 
-// https://github.com/matrix-org/matrix-react-sdk/blob/cd15e08fc285da42134817cce50de8011809cd53/src/utils/blobs.ts#L73
-const ALLOWED_BLOB_MIMETYPES = [
-  'image/jpeg',
-  'image/gif',
-  'image/png',
-  'image/apng',
-  'image/webp',
-  'image/avif',
-
-  'video/mp4',
-  'video/webm',
-  'video/ogg',
-  'video/quicktime',
-
-  'audio/mp4',
-  'audio/webm',
-  'audio/aac',
-  'audio/mpeg',
-  'audio/ogg',
-  'audio/wave',
-  'audio/wav',
-  'audio/x-wav',
-  'audio/x-pn-wav',
-  'audio/flac',
-  'audio/x-flac',
-];
-function getBlobSafeMimeType(mimetype) {
-  if (!ALLOWED_BLOB_MIMETYPES.includes(mimetype)) {
-    return 'application/octet-stream';
-  }
-  // Required for Chromium browsers
-  if (mimetype === 'video/quicktime') {
-    return 'video/mp4';
-  }
-  return mimetype;
-}
+import { getBlobSafeMimeType } from '../../../util/mimetypes';
 
 async function getDecryptedBlob(response, type, decryptData) {
   const arrayBuffer = await response.arrayBuffer();
diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx
index e4b6883..1e5a006 100644
--- a/src/app/molecules/message/Message.jsx
+++ b/src/app/molecules/message/Message.jsx
@@ -37,6 +37,7 @@ import CmdIC from '../../../../public/res/ic/outlined/cmd.svg';
 import BinIC from '../../../../public/res/ic/outlined/bin.svg';
 
 import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
+import { getBlobSafeMimeType } from '../../../util/mimetypes';
 
 function PlaceholderMessage() {
   return (
@@ -621,7 +622,12 @@ function genMediaContent(mE) {
   if (typeof mediaMXC === 'undefined' || mediaMXC === '') return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
 
   let msgType = mE.getContent()?.msgtype;
-  if (mE.getType() === 'm.sticker') msgType = 'm.sticker';
+  const safeMimetype = getBlobSafeMimeType(mContent.info?.mimetype);
+  if (mE.getType() === 'm.sticker') {
+    msgType = 'm.sticker';
+  } else if (safeMimetype === 'application/octet-stream') {
+    msgType = 'm.file';
+  }
 
   const blurhash = mContent?.info?.['xyz.amorgan.blurhash'];
 
diff --git a/src/client/state/RoomsInput.js b/src/client/state/RoomsInput.js
index e1d3acf..9b66288 100644
--- a/src/client/state/RoomsInput.js
+++ b/src/client/state/RoomsInput.js
@@ -6,6 +6,7 @@ import { math } from 'micromark-extension-math';
 import { encode } from 'blurhash';
 import { getShortcodeToEmoji } from '../../app/organisms/emoji-board/custom-emoji';
 import { mathExtensionHtml, spoilerExtension, spoilerExtensionHtml } from '../../util/markdown';
+import { getBlobSafeMimeType } from '../../util/mimetypes';
 import { sanitizeText } from '../../util/sanitize';
 import cons from './cons';
 import settings from './settings';
@@ -355,7 +356,7 @@ class RoomsInput extends EventEmitter {
   }
 
   async sendFile(roomId, file) {
-    const fileType = file.type.slice(0, file.type.indexOf('/'));
+    const fileType = getBlobSafeMimeType(file.type).slice(0, file.type.indexOf('/'));
     const info = {
       mimetype: file.type,
       size: file.size,
diff --git a/src/util/mimetypes.js b/src/util/mimetypes.js
new file mode 100644
index 0000000..121ae06
--- /dev/null
+++ b/src/util/mimetypes.js
@@ -0,0 +1,37 @@
+// https://github.com/matrix-org/matrix-react-sdk/blob/cd15e08fc285da42134817cce50de8011809cd53/src/utils/blobs.ts
+export const ALLOWED_BLOB_MIMETYPES = [
+  'image/jpeg',
+  'image/gif',
+  'image/png',
+  'image/apng',
+  'image/webp',
+  'image/avif',
+
+  'video/mp4',
+  'video/webm',
+  'video/ogg',
+  'video/quicktime',
+
+  'audio/mp4',
+  'audio/webm',
+  'audio/aac',
+  'audio/mpeg',
+  'audio/ogg',
+  'audio/wave',
+  'audio/wav',
+  'audio/x-wav',
+  'audio/x-pn-wav',
+  'audio/flac',
+  'audio/x-flac',
+];
+
+export function getBlobSafeMimeType(mimetype) {
+  if (!ALLOWED_BLOB_MIMETYPES.includes(mimetype)) {
+    return 'application/octet-stream';
+  }
+  // Required for Chromium browsers
+  if (mimetype === 'video/quicktime') {
+    return 'video/mp4';
+  }
+  return mimetype;
+}