Setting to strip EXIF metadata from JPEG uploads

src/ContentMessages.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 New Vector Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2019, 2020 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -24,6 +25,7 @@ import * as sdk from './index';
 import { _t } from './languageHandler';
 import Modal from './Modal';
 import RoomViewStore from './stores/RoomViewStore';
+import SettingsStore, {SettingLevel} from "./settings/SettingsStore";
 import encrypt from "browser-encrypt-attachment";
 import extractPngChunks from "png-chunks-extract";
 
@@ -244,6 +246,69 @@ function readFileAsArrayBuffer(file) {
     });
 }
 
+/**
+ * Strip EXIF metadata from a JPEG
+ * Taken from http://jsfiddle.net/mowglisanu/frhwm2xe/3/
+ *
+ * @param {ArrayBuffer} data the image data
+ * @return {ArrayBuffer} the stripped image data
+ */
+function stripJpegMetadata(data) {
+    const dv = new DataView(data);
+    let offset = 0;
+    let recess = 0;
+    const pieces = [];
+    let i = 0;
+
+    const newPieces = [];
+
+    // FIXME: check this isn't stripping off any EXIF color profile data
+    // as that will break the colorimetry of the image.  We're stripping
+    // this for privacy purposes rather than filesize.
+    if (dv.getUint16(offset) == 0xffd8) {
+        offset += 2;
+        let app1 = dv.getUint16(offset);
+        offset += 2;
+        while (offset < dv.byteLength) {
+            if (app1 == 0xffe1) {
+                pieces[i] = { recess: recess, offset: offset - 2 };
+                recess = offset + dv.getUint16(offset);
+                i++;
+            } else if (app1 == 0xffda) {
+                break;
+            }
+            offset += dv.getUint16(offset);
+            app1 = dv.getUint16(offset);
+            offset += 2;
+        }
+
+        if (pieces.length > 0) {
+            pieces.forEach(function(v) {
+                newPieces.push(data.slice(v.recess, v.offset));
+            });
+            newPieces.push(data.slice(recess));
+        }
+    }
+
+    if (newPieces.length) {
+        // Concatenate the slices back together.
+        // XXX: is there a more efficient way of doing this?
+        // Turning them into a blob & back again is apparently slower.
+        // according to https://stackoverflow.com/a/24549974
+        let byteLength = 0;
+        newPieces.forEach(piece => { byteLength += piece.byteLength; });
+        data = new Uint8Array(byteLength);
+        let offset = 0;
+        newPieces.forEach(piece => {
+            data.set(new Uint8Array(piece), offset);
+            offset += piece.byteLength;
+        });
+        data = data.buffer;
+    }
+
+    return data;
+}
+
 /**
  * Upload the file to the content repository.
  * If the room is encrypted then encrypt the file before uploading.
@@ -258,13 +323,29 @@ function readFileAsArrayBuffer(file) {
  *  If the file is encrypted then the object will have a "file" key.
  */
 function uploadFile(matrixClient, roomId, file, progressHandler) {
+    let readDataPromise;
+
+    // strip metadata where we can (n.b. we don't want to strip colorspace metadata)
+    if (file.type === 'image/jpeg' &&
+        SettingsStore.getValueAt(SettingLevel.ACCOUNT, 'stripJpegMetadata')) {
+        readDataPromise = readFileAsArrayBuffer(file).then(function(data) {
+            // fix up arraybuffer
+            data = stripJpegMetadata(data);
+            return Promise.resolve(data);
+        });
+    }
+
     if (matrixClient.isRoomEncrypted(roomId)) {
         // If the room is encrypted then encrypt the file before uploading it.
         // First read the file into memory.
         let canceled = false;
         let uploadPromise;
         let encryptInfo;
-        const prom = readFileAsArrayBuffer(file).then(function(data) {
+
+        if (!readDataPromise) {
+            readDataPromise = readFileAsArrayBuffer(file);
+        }
+        const prom = readDataPromise.then(function(data) {
             if (canceled) throw new UploadCanceledError();
             // Then encrypt the file.
             return encrypt.encryptAttachment(data);
@@ -296,14 +377,26 @@ function uploadFile(matrixClient, roomId, file, progressHandler) {
         };
         return prom;
     } else {
-        const basePromise = matrixClient.uploadContent(file, {
-            progressHandler: progressHandler,
-        });
+        let basePromise;
+        // N.B. that if we have no custom readPromise, we just upload the file
+        // rather than raw data, hence factoring out the concept of a basePromise
+        if (readDataPromise) {
+            basePromise = readDataPromise.then(function(data) {
+                return matrixClient.uploadContent(new Blob([data], { type: file.type }), {
+                    progressHandler,
+                });
+            });
+        } else {
+            basePromise = matrixClient.uploadContent(file, {
+                progressHandler,
+            });
+        }
         const promise1 = basePromise.then(function(url) {
             // If the attachment isn't encrypted then include the URL directly.
             return {"url": url};
         });
         // XXX: copy over the abort method to the new promise
+        // FIXME: This is probably broken if you have a readDataPromise defined
         promise1.abort = basePromise.abort;
         return promise1;
     }
@@ -527,6 +620,7 @@ export default class ContentMessages {
             return matrixClient.sendMessage(roomId, content);
         }, function(err) {
             error = err;
+            console.log(err);
             if (!upload.canceled) {
                 let desc = _t("The file '%(fileName)s' failed to upload.", {fileName: upload.fileName});
                 if (err.http_status == 413) {

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js

@@ -56,6 +56,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
     static ADVANCED_SETTINGS = [
         'alwaysShowEncryptionIcons',
         'Pill.shouldShowPillAvatar',
+        'stripJpegMetadata',
         'TagPanel.enableTagPanel',
         'promptBeforeInviteUnknownUsers',
         // Start automatically after startup (electron-only)

src/i18n/strings/en_EN.json

@@ -420,6 +420,7 @@
     "Always show encryption icons": "Always show encryption icons",
     "Show a reminder to enable Secure Message Recovery in encrypted rooms": "Show a reminder to enable Secure Message Recovery in encrypted rooms",
     "Enable automatic language detection for syntax highlighting": "Enable automatic language detection for syntax highlighting",
+    "Strip metadata from JPEG uploads": "Strip metadata from JPEG uploads",
     "Show avatars in user and room mentions": "Show avatars in user and room mentions",
     "Enable big emoji in chat": "Enable big emoji in chat",
     "Send typing notifications": "Send typing notifications",

src/settings/Settings.js

@@ -229,6 +229,11 @@ export const SETTINGS = {
         displayName: _td('Enable automatic language detection for syntax highlighting'),
         default: false,
     },
+    "stripJpegMetadata": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td('Strip metadata from JPEG uploads'),
+        default: true,
+    },
     "Pill.shouldShowPillAvatar": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         displayName: _td('Show avatars in user and room mentions'),