Merge pull request #548 from matrix-org/markjh/encrypted-attachments

Encrypt attachments in encrypted rooms

package.json

@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "babel-runtime": "^6.11.6",
+    "browser-encrypt-attachment": "^0.1.0",
     "browser-request": "^0.3.3",
     "classnames": "^2.1.2",
     "draft-js": "^0.8.1",

src/ContentMessages.js

@@ -81,6 +81,24 @@ function infoForVideoFile(videoFile) {
     return deferred.promise;
 }
 
+/**
+ * Read the file as an ArrayBuffer.
+ * @return {Promise} A promise that resolves with an ArrayBuffer when the file
+ *   is read.
+ */
+function readFileAsArrayBuffer(file) {
+    const deferred = q.defer();
+    const reader = new FileReader();
+    reader.onload = function(e) {
+        deferred.resolve(e.target.result);
+    };
+    reader.onerror = function(e) {
+        deferred.reject(e);
+    };
+    reader.readAsArrayBuffer(file);
+    return deferred.promise;
+}
+
 
 class ContentMessages {
     constructor() {
@@ -149,7 +167,19 @@ class ContentMessages {
                 dis.dispatch({action: 'upload_progress', upload: upload});
             }
         }).then(function(url) {
-            content.url = url;
+            if (encryptInfo === null) {
+                // If the attachment isn't encrypted then include the URL directly.
+                content.url = url;
+            } else {
+                // If the attachment is encrypted then bundle the URL along
+                // with the information needed to decrypt the attachment and
+                // add it under a file key.
+                encryptInfo.url = url;
+                if (file.type) {
+                    encryptInfo.mimetype = file.type;
+                }
+                content.file = encryptInfo;
+            }
             return matrixClient.sendMessage(roomId, content);
         }, function(err) {
             error = err;

src/components/views/messages/MAudioBody.js

@@ -21,29 +21,67 @@ import MFileBody from './MFileBody';
 
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
+import { decryptFile } from '../../../utils/DecryptFile';
 
 export default class MAudioBody extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            playing: false
+            playing: false,
+            decryptedUrl: null,
         }
     }
-
     onPlayToggle() {
         this.setState({
             playing: !this.state.playing
         });
     }
 
-    render() {
+    _getContentUrl() {
+        const content = this.props.mxEvent.getContent();
+        if (content.file !== undefined) {
+            return this.state.decryptedUrl;
+        } else {
+            return MatrixClientPeg.get().mxcUrlToHttp(content.url);
+        }
+    }
+
+    componentDidMount() {
         var content = this.props.mxEvent.getContent();
-        var cli = MatrixClientPeg.get();
+        if (content.file !== undefined && this.state.decryptedUrl === null) {
+            decryptFile(content.file).done((url) => {
+                this.setState({
+                    decryptedUrl: url
+                });
+            }, (err) => {
+                console.warn("Unable to decrypt attachment: ", err)
+                // Set a placeholder image when we can't decrypt the image.
+                this.refs.image.src = "img/warning.svg";
+            });
+        }
+    }
+
+    render() {
+        const content = this.props.mxEvent.getContent();
+
+        if (content.file !== undefined && this.state.decryptedUrl === null) {
+            // Need to decrypt the attachment
+            // The attachment is decrypted in componentDidMount.
+            // For now add an img tag with a spinner.
+            return (
+                <span className="mx_MAudioBody">
+                <img src="img/spinner.gif" ref="image"
+                    alt={content.body} />
+                </span>
+            );
+        }
+
+        const contentUrl = this._getContentUrl();
 
         return (
             <span className="mx_MAudioBody">
-                <audio src={cli.mxcUrlToHttp(content.url)} controls />
-                <MFileBody {...this.props} />
+                <audio src={contentUrl} controls />
+                <MFileBody {...this.props} decryptedUrl={this.state.decryptedUrl} />
             </span>
         );
     }

src/components/views/messages/MFileBody.js

@@ -16,15 +16,22 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var filesize = require('filesize');
-var MatrixClientPeg = require('../../../MatrixClientPeg');
-var sdk = require('../../../index');
-var dis = require("../../../dispatcher");
+import React from 'react';
+import filesize from 'filesize';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import sdk from '../../../index';
+import {decryptFile} from '../../../utils/DecryptFile';
+
 
 module.exports = React.createClass({
     displayName: 'MFileBody',
 
+    getInitialState: function() {
+        return {
+            decryptedUrl: (this.props.decryptedUrl ? this.props.decryptedUrl : null),
+        };
+    },
+
     presentableTextForFile: function(content) {
         var linkText = 'Attachment';
         if (content.body && content.body.length > 0) {
@@ -47,22 +54,88 @@ module.exports = React.createClass({
         return linkText;
     },
 
+    _getContentUrl: function() {
+        const content = this.props.mxEvent.getContent();
+        if (content.file !== undefined) {
+            return this.state.decryptedUrl;
+        } else {
+            return MatrixClientPeg.get().mxcUrlToHttp(content.url);
+        }
+    },
+
+    componentDidMount: function() {
+        const content = this.props.mxEvent.getContent();
+        if (content.file !== undefined && this.state.decryptedUrl === null) {
+            decryptFile(content.file).done((url) => {
+                this.setState({
+                    decryptedUrl: url,
+                });
+            }, (err) => {
+                console.warn("Unable to decrypt attachment: ", err)
+                // Set a placeholder image when we can't decrypt the image.
+                this.refs.image.src = "img/warning.svg";
+            });
+        }
+    },
+
     render: function() {
-        var content = this.props.mxEvent.getContent();
-        var cli = MatrixClientPeg.get();
+        const content = this.props.mxEvent.getContent();
 
-        var httpUrl = cli.mxcUrlToHttp(content.url);
-        var text = this.presentableTextForFile(content);
+        const text = this.presentableTextForFile(content);
 
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        if (content.file !== undefined && this.state.decryptedUrl === null) {
+
+            // Need to decrypt the attachment
+            // The attachment is decrypted in componentDidMount.
+            // For now add an img tag with a spinner.
+            return (
+                <span className="mx_MFileBody" ref="body">
+                <img src="img/spinner.gif" ref="image"
+                    alt={content.body} />
+                </span>
+            );
+        }
+
+        const contentUrl = this._getContentUrl();
+
+        const fileName = content.body && content.body.length > 0 ? content.body : "Attachment";
+
+        var downloadAttr = undefined;
+        if (this.state.decryptedUrl) {
+            // If the file is encrypted then we MUST download it rather than displaying it
+            // because Firefox is vunerable to XSS attacks in data:// URLs
+            // and all browsers are vunerable to XSS attacks in blob: URLs
+            // created with window.URL.createObjectURL
+            // See https://bugzilla.mozilla.org/show_bug.cgi?id=255107
+            // See https://w3c.github.io/FileAPI/#originOfBlobURL
+            //
+            // This is not a problem for unencrypted links because they are
+            // either fetched from a different domain so are safe because of
+            // the same-origin policy or they are fetch from the same domain,
+            // in which case we trust that the homeserver will set a
+            // Content-Security-Policy that disables script execution.
+            // It is reasonable to trust the homeserver in that case since
+            // it is the same domain that controls this javascript.
+            //
+            // We can't apply the same workaround for encrypted files because
+            // we can't supply HTTP headers when the user clicks on a blob:
+            // or data:// uri.
+            //
+            // We should probably provide a download attribute anyway so that
+            // the file will have the correct name when the user tries to
+            // download it. We can't provide a Content-Disposition header
+            // like we would for HTTP.
+            downloadAttr = fileName;
+        }
 
-        if (httpUrl) {
+        if (contentUrl) {
             if (this.props.tileShape === "file_grid") {
                 return (
                     <span className="mx_MFileBody">
                         <div className="mx_MImageBody_download">
-                            <a className="mx_ImageBody_downloadLink" href={cli.mxcUrlToHttp(content.url)} target="_blank" rel="noopener">
-                                { content.body && content.body.length > 0 ? content.body : "Attachment" }
+                            <a className="mx_ImageBody_downloadLink" href={contentUrl} target="_blank" rel="noopener" download={downloadAttr}>
+                                { fileName }
                             </a>
                             <div className="mx_MImageBody_size">
                                 { content.info && content.info.size ? filesize(content.info.size) : "" }
@@ -75,7 +148,7 @@ module.exports = React.createClass({
                 return (
                     <span className="mx_MFileBody">
                         <div className="mx_MImageBody_download">
-                            <a href={cli.mxcUrlToHttp(content.url)} target="_blank" rel="noopener">
+                            <a href={contentUrl} target="_blank" rel="noopener" download={downloadAttr}>
                                 <TintableSvg src="img/download.svg" width="12" height="14"/>
                                 Download {text}
                             </a>