-
-
Notifications
You must be signed in to change notification settings - Fork 832
Encrypt attachments in encrypted rooms, #533
Changes from 1 commit
e0cea74
4630172
e949d91
d61714a
842b5ae
12fc70c
b6653dd
48cfd4f
71c002d
9112343
94bfe31
6ea0085
8f778f5
1529396
4214c67
dc679a8
911f9e4
93ddb55
c838164
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -19,12 +19,18 @@ limitations under the License. | |
var React = require('react'); | ||
var filesize = require('filesize'); | ||
|
||
// Pull in the encryption lib so that we can decrypt attachments. | ||
var encrypt = require("browser-encrypt-attachment"); | ||
// Pull in a fetch polyfill so we can download encrypted attachments. | ||
require("isomorphic-fetch"); | ||
|
||
var MatrixClientPeg = require('../../../MatrixClientPeg'); | ||
var ImageUtils = require('../../../ImageUtils'); | ||
var Modal = require('../../../Modal'); | ||
var sdk = require('../../../index'); | ||
var dis = require("../../../dispatcher"); | ||
|
||
|
||
module.exports = React.createClass({ | ||
displayName: 'MImageBody', | ||
|
||
|
@@ -85,6 +91,33 @@ module.exports = React.createClass({ | |
componentDidMount: function() { | ||
this.dispatcherRef = dis.register(this.onAction); | ||
this.fixupHeight(); | ||
var content = this.props.mxEvent.getContent(); | ||
if (content.file !== undefined) { | ||
// TODO: hook up an error handler to the promise. | ||
this.decryptFile(content.file); | ||
} | ||
}, | ||
|
||
decryptFile: function(file) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't love the fact that a function called There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ...and also then displays it. |
||
var url = MatrixClientPeg.get().mxcUrlToHttp(file.url); | ||
var self = this; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We tend to use arrow functions rather than the self = this hack nowadays |
||
// Download the encrypted file as an array buffer. | ||
return fetch(url).then(function (response) { | ||
return response.arrayBuffer(); | ||
}).then(function (responseData) { | ||
// Decrypt the array buffer using the information taken from | ||
// the event content. | ||
return encrypt.decryptAttachment(responseData, file); | ||
}).then(function(dataArray) { | ||
// Turn the array into a Blob and use createObjectURL to make | ||
// a url that we can use as an img src. | ||
var blob = new Blob([dataArray]); | ||
var blobUrl = window.URL.createObjectURL(blob); | ||
self.refs.image.src = blobUrl; | ||
self.refs.image.onload = function() { | ||
window.URL.revokeObjectURL(blobUrl); | ||
}; | ||
}); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, this post-render DOM mangling isn't great, but we do appear to do it for animated gifs anyway. Relatedly, this will mean the current play-on-hover behaviour of animated gifs won't work with encrypted attachments, so this is a thing we'll need to fix too. |
||
}, | ||
|
||
componentWillUnmount: function() { | ||
|
@@ -148,7 +181,16 @@ module.exports = React.createClass({ | |
} | ||
|
||
var thumbUrl = this._getThumbUrl(); | ||
if (thumbUrl) { | ||
if (content.file !== undefined) { | ||
// Need to decrypt the attachment | ||
// The attachment is decrypted in componentDidMount. | ||
return ( | ||
<span className="mx_MImageBody" ref="body"> | ||
<img className="mx_MImageBody_thumbnail" src="img/encrypted-placeholder.svg" ref="image" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Where does the placeholder come from? |
||
alt={content.body} /> | ||
</span> | ||
); | ||
} else if (thumbUrl) { | ||
return ( | ||
<span className="mx_MImageBody" ref="body"> | ||
<a href={cli.mxcUrlToHttp(content.url)} onClick={ this.onClick }> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const