mirror of
https://github.com/element-hq/element-web
synced 2024-11-26 19:26:04 +03:00
Fix e2e attachment download by using iframes. (#562)
* Render attachments inside iframes. * Fix up the image and video views * Fix m.audio * Comments, and only use the cross domain renderer if the attachment is encrypted * Fix whitespace * Don't decrypt file attachments immediately * Use https://usercontent.riot.im/v1.html by default * typos * Put the config in the React context. Use it in MFileBody to configure the cross origin renderer URL. * Call it appConfig in the context * Return the promises so they don't get dropped
This commit is contained in:
Mark Haines
GitHub
parent
0a42a78b13
commit
81e429eb14
6 changed files with 253 additions and 85 deletions
|
|
@ -66,10 +66,20 @@ module.exports = React.createClass({
|
|||
defaultDeviceDisplayName: React.PropTypes.string,
|
||||
},
|
||||
|
||||
childContextTypes: {
|
||||
appConfig: React.PropTypes.object,
|
||||
},
|
||||
|
||||
AuxPanel: {
|
||||
RoomSettings: "room_settings",
|
||||
},
|
||||
|
||||
getChildContext: function() {
|
||||
return {
|
||||
appConfig: this.props.config,
|
||||
}
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
var s = {
|
||||
loading: true,
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import MFileBody from './MFileBody';
|
|||
|
||||
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||
import sdk from '../../../index';
|
||||
import { decryptFile } from '../../../utils/DecryptFile';
|
||||
import { decryptFile, readBlobAsDataUri } from '../../../utils/DecryptFile';
|
||||
|
||||
export default class MAudioBody extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
@ -29,6 +29,7 @@ export default class MAudioBody extends React.Component {
|
|||
this.state = {
|
||||
playing: false,
|
||||
decryptedUrl: null,
|
||||
decryptedBlob: null,
|
||||
error: null,
|
||||
}
|
||||
}
|
||||
|
|
@ -50,9 +51,14 @@ export default class MAudioBody extends React.Component {
|
|||
componentDidMount() {
|
||||
var content = this.props.mxEvent.getContent();
|
||||
if (content.file !== undefined && this.state.decryptedUrl === null) {
|
||||
decryptFile(content.file).done((url) => {
|
||||
var decryptedBlob;
|
||||
decryptFile(content.file).then(function(blob) {
|
||||
decryptedBlob = blob;
|
||||
return readBlobAsDataUri(decryptedBlob);
|
||||
}).done((url) => {
|
||||
this.setState({
|
||||
decryptedUrl: url,
|
||||
decryptedBlob: decryptedBlob,
|
||||
});
|
||||
}, (err) => {
|
||||
console.warn("Unable to decrypt attachment: ", err);
|
||||
|
|
@ -93,7 +99,7 @@ export default class MAudioBody extends React.Component {
|
|||
return (
|
||||
<span className="mx_MAudioBody">
|
||||
<audio src={contentUrl} controls />
|
||||
<MFileBody {...this.props} decryptedUrl={this.state.decryptedUrl} />
|
||||
<MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,15 +63,137 @@ function updateTintedDownloadImage() {
|
|||
|
||||
Tinter.registerTintable(updateTintedDownloadImage);
|
||||
|
||||
// User supplied content can contain scripts, we have to be careful that
|
||||
// we don't accidentally run those script within the same origin as the
|
||||
// client. Otherwise those scripts written by remote users can read
|
||||
// the access token and end-to-end keys that are in local storage.
|
||||
//
|
||||
// For attachments downloaded directly from the homeserver we can use
|
||||
// Content-Security-Policy headers to disable script execution.
|
||||
//
|
||||
// But attachments with end-to-end encryption are more difficult to handle.
|
||||
// We need to decrypt the attachment on the client and then display it.
|
||||
// To display the attachment we need to turn the decrypted bytes into a URL.
|
||||
//
|
||||
// There are two ways to turn bytes into URLs, data URL and blob URLs.
|
||||
// Data URLs aren't suitable for downloading a file because Chrome has a
|
||||
// 2MB limit on the size of URLs that can be viewed in the browser or
|
||||
// downloaded. This limit does not seem to apply when the url is used as
|
||||
// the source attribute of an image tag.
|
||||
//
|
||||
// Blob URLs are generated using window.URL.createObjectURL and unforuntately
|
||||
// for our purposes they inherit the origin of the page that created them.
|
||||
// This means that any scripts that run when the URL is viewed will be able
|
||||
// to access local storage.
|
||||
//
|
||||
// The easiest solution is to host the code that generates the blob URL on
|
||||
// a different domain to the client.
|
||||
// Another possibility is to generate the blob URL within a sandboxed iframe.
|
||||
// The downside of using a second domain is that it complicates hosting,
|
||||
// the downside of using a sandboxed iframe is that the browers are overly
|
||||
// restrictive in what you are allowed to do with the generated URL.
|
||||
//
|
||||
// For now given how unusable the blobs generated in sandboxed iframes are we
|
||||
// default to using a renderer hosted on "usercontent.riot.im". This is
|
||||
// overridable so that people running their own version of the client can
|
||||
// choose a different renderer.
|
||||
//
|
||||
// To that end the first version of the blob generation will be the following
|
||||
// html:
|
||||
//
|
||||
// <html><head><script>
|
||||
// window.onmessage=function(e){eval("("+e.data.code+")")(e)}
|
||||
// </script></head><body></body></html>
|
||||
//
|
||||
// This waits to receive a message event sent using the window.postMessage API.
|
||||
// When it receives the event it evals a javascript function in data.code and
|
||||
// runs the function passing the event as an argument.
|
||||
//
|
||||
// In particular it means that the rendering function can be written as a
|
||||
// ordinary javascript function which then is turned into a string using
|
||||
// toString().
|
||||
//
|
||||
const DEFAULT_CROSS_ORIGIN_RENDERER = "https://usercontent.riot.im/v1.html";
|
||||
|
||||
/**
|
||||
* Render the attachment inside the iframe.
|
||||
* We can't use imported libraries here so this has to be vanilla JS.
|
||||
*/
|
||||
function remoteRender(event) {
|
||||
const data = event.data;
|
||||
|
||||
const img = document.createElement("img");
|
||||
img.id = "img";
|
||||
img.src = data.imgSrc;
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.id = "a";
|
||||
a.rel = data.rel;
|
||||
a.target = data.target;
|
||||
a.download = data.download;
|
||||
a.style = data.style;
|
||||
a.href = window.URL.createObjectURL(data.blob);
|
||||
a.appendChild(img);
|
||||
a.appendChild(document.createTextNode(data.textContent));
|
||||
|
||||
const body = document.body;
|
||||
// Don't display scrollbars if the link takes more than one line
|
||||
// to display.
|
||||
body.style = "margin: 0px; overflow: hidden";
|
||||
body.appendChild(a);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the tint inside the iframe.
|
||||
* We can't use imported libraries here so this has to be vanilla JS.
|
||||
*/
|
||||
function remoteSetTint(event) {
|
||||
const data = event.data;
|
||||
|
||||
const img = document.getElementById("img");
|
||||
img.src = data.imgSrc;
|
||||
img.style = data.imgStyle;
|
||||
|
||||
const a = document.getElementById("a");
|
||||
a.style = data.style;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get the current CSS style for a DOMElement.
|
||||
* @param {HTMLElement} element The element to get the current style of.
|
||||
* @return {string} The CSS style encoded as a string.
|
||||
*/
|
||||
function computedStyle(element) {
|
||||
if (!element) {
|
||||
return "";
|
||||
}
|
||||
const style = window.getComputedStyle(element, null);
|
||||
var cssText = style.cssText;
|
||||
if (cssText == "") {
|
||||
// Firefox doesn't implement ".cssText" for computed styles.
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=137687
|
||||
for (var i = 0; i < style.length; i++) {
|
||||
cssText += style[i] + ":";
|
||||
cssText += style.getPropertyValue(style[i]) + ";";
|
||||
}
|
||||
}
|
||||
return cssText;
|
||||
}
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'MFileBody',
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
decryptedUrl: (this.props.decryptedUrl ? this.props.decryptedUrl : null),
|
||||
decryptedBlob: (this.props.decryptedBlob ? this.props.decryptedBlob : null),
|
||||
};
|
||||
},
|
||||
|
||||
contextTypes: {
|
||||
appConfig: React.PropTypes.object,
|
||||
},
|
||||
|
||||
/**
|
||||
* Extracts a human readable label for the file attachment to use as
|
||||
* link text.
|
||||
|
|
@ -102,11 +224,7 @@ module.exports = React.createClass({
|
|||
|
||||
_getContentUrl: function() {
|
||||
const content = this.props.mxEvent.getContent();
|
||||
if (content.file !== undefined) {
|
||||
return this.state.decryptedUrl;
|
||||
} else {
|
||||
return MatrixClientPeg.get().mxcUrlToHttp(content.url);
|
||||
}
|
||||
return MatrixClientPeg.get().mxcUrlToHttp(content.url);
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
|
|
@ -127,90 +245,108 @@ module.exports = React.createClass({
|
|||
if (this.refs.downloadImage) {
|
||||
this.refs.downloadImage.src = tintedDownloadImageURL;
|
||||
}
|
||||
if (this.refs.iframe) {
|
||||
// If the attachment is encrypted then the download image
|
||||
// will be inside the iframe so we wont be able to update
|
||||
// it directly.
|
||||
this.refs.iframe.contentWindow.postMessage({
|
||||
code: remoteSetTint.toString(),
|
||||
imgSrc: tintedDownloadImageURL,
|
||||
style: computedStyle(this.refs.dummyLink),
|
||||
}, "*");
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
const content = this.props.mxEvent.getContent();
|
||||
|
||||
const text = this.presentableTextForFile(content);
|
||||
const isEncrypted = content.file !== undefined;
|
||||
const fileName = content.body && content.body.length > 0 ? content.body : "Attachment";
|
||||
const contentUrl = this._getContentUrl();
|
||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
|
||||
if (content.file !== undefined && this.state.decryptedUrl === null) {
|
||||
if (isEncrypted) {
|
||||
if (this.state.decryptedBlob === null) {
|
||||
// Need to decrypt the attachment
|
||||
// Wait for the user to click on the link before downloading
|
||||
// and decrypting the attachment.
|
||||
var decrypting = false;
|
||||
const decrypt = () => {
|
||||
if (decrypting) {
|
||||
return false;
|
||||
}
|
||||
decrypting = true;
|
||||
decryptFile(content.file).then((blob) => {
|
||||
this.setState({
|
||||
decryptedBlob: blob,
|
||||
});
|
||||
}).catch((err) => {
|
||||
console.warn("Unable to decrypt attachment: ", err)
|
||||
Modal.createDialog(ErrorDialog, {
|
||||
description: "Error decrypting attachment"
|
||||
});
|
||||
}).finally(() => {
|
||||
decrypting = false;
|
||||
return;
|
||||
});
|
||||
};
|
||||
|
||||
var decrypting = false;
|
||||
const decrypt = () => {
|
||||
if (decrypting) {
|
||||
return false;
|
||||
}
|
||||
decrypting = true;
|
||||
decryptFile(content.file).then((url) => {
|
||||
this.setState({
|
||||
decryptedUrl: url,
|
||||
});
|
||||
}).catch((err) => {
|
||||
console.warn("Unable to decrypt attachment: ", err)
|
||||
// Set a placeholder image when we can't decrypt the image
|
||||
Modal.createDialog(ErrorDialog, {
|
||||
description: "Error decrypting attachment"
|
||||
});
|
||||
}).finally(function() {
|
||||
decrypting = false;
|
||||
}).done();
|
||||
return false;
|
||||
return (
|
||||
<span className="mx_MFileBody" ref="body">
|
||||
<div className="mx_MImageBody_download">
|
||||
<a href="javascript:void(0)" onClick={decrypt}>
|
||||
Decrypt {text}
|
||||
</a>
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// When the iframe loads we tell it to render a download link
|
||||
const onIframeLoad = (ev) => {
|
||||
ev.target.contentWindow.postMessage({
|
||||
code: remoteRender.toString(),
|
||||
imgSrc: tintedDownloadImageURL,
|
||||
style: computedStyle(this.refs.dummyLink),
|
||||
blob: this.state.decryptedBlob,
|
||||
// Set a download attribute for encrypted files 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.
|
||||
download: fileName,
|
||||
target: "_blank",
|
||||
textContent: "Download " + text,
|
||||
}, "*");
|
||||
};
|
||||
|
||||
// Need to decrypt the attachment
|
||||
// The attachment is decrypted in componentDidMount.
|
||||
// For now add an img tag with a spinner.
|
||||
// If the attachment is encryped then put the link inside an iframe.
|
||||
let renderer_url = DEFAULT_CROSS_ORIGIN_RENDERER;
|
||||
if (this.context.appConfig && this.context.appConfig.cross_origin_renderer_url) {
|
||||
renderer_url = this.context.appConfig.cross_origin_renderer_url;
|
||||
}
|
||||
return (
|
||||
<span className="mx_MFileBody" ref="body">
|
||||
<span className="mx_MFileBody">
|
||||
<div className="mx_MImageBody_download">
|
||||
<a href="javascript:void(0)" onClick={decrypt}>
|
||||
Decrypt {text}
|
||||
</a>
|
||||
<div style={{display: "none"}}>
|
||||
{/*
|
||||
* Add dummy copy of the "a" tag
|
||||
* We'll use it to learn how the download link
|
||||
* would have been styled if it was rendered inline.
|
||||
*/}
|
||||
<a ref="dummyLink"/>
|
||||
</div>
|
||||
<iframe src={renderer_url} onLoad={onIframeLoad} ref="iframe"/>
|
||||
</div>
|
||||
</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 (contentUrl) {
|
||||
} else if (contentUrl) {
|
||||
// If the attachment is not encrypted then we check whether we
|
||||
// are being displayed in the room timeline or in a list of
|
||||
// files in the right hand side of the screen.
|
||||
if (this.props.tileShape === "file_grid") {
|
||||
return (
|
||||
<span className="mx_MFileBody">
|
||||
<div className="mx_MImageBody_download">
|
||||
<a className="mx_ImageBody_downloadLink" href={contentUrl} target="_blank" rel="noopener" download={downloadAttr}>
|
||||
<a className="mx_ImageBody_downloadLink" href={contentUrl} target="_blank">
|
||||
{ fileName }
|
||||
</a>
|
||||
<div className="mx_MImageBody_size">
|
||||
|
|
@ -224,7 +360,7 @@ module.exports = React.createClass({
|
|||
return (
|
||||
<span className="mx_MFileBody">
|
||||
<div className="mx_MImageBody_download">
|
||||
<a href={contentUrl} target="_blank" rel="noopener" download={downloadAttr}>
|
||||
<a href={contentUrl} target="_blank" rel="noopener">
|
||||
<img src={tintedDownloadImageURL} width="12" height="14" ref="downloadImage"/>
|
||||
Download {text}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import ImageUtils from '../../../ImageUtils';
|
|||
import Modal from '../../../Modal';
|
||||
import sdk from '../../../index';
|
||||
import dis from '../../../dispatcher';
|
||||
import {decryptFile} from '../../../utils/DecryptFile';
|
||||
import { decryptFile, readBlobAsDataUri } from '../../../utils/DecryptFile';
|
||||
import q from 'q';
|
||||
|
||||
module.exports = React.createClass({
|
||||
|
|
@ -41,6 +41,7 @@ module.exports = React.createClass({
|
|||
return {
|
||||
decryptedUrl: null,
|
||||
decryptedThumbnailUrl: null,
|
||||
decryptedBlob: null,
|
||||
error: null
|
||||
};
|
||||
},
|
||||
|
|
@ -118,13 +119,20 @@ module.exports = React.createClass({
|
|||
if (content.info.thumbnail_file) {
|
||||
thumbnailPromise = decryptFile(
|
||||
content.info.thumbnail_file
|
||||
);
|
||||
).then(function (blob) {
|
||||
return readBlobAsDataUri(blob);
|
||||
});
|
||||
}
|
||||
var decryptedBlob;
|
||||
thumbnailPromise.then((thumbnailUrl) => {
|
||||
decryptFile(content.file).then((contentUrl) => {
|
||||
return decryptFile(content.file).then(function(blob) {
|
||||
decryptedBlob = blob;
|
||||
return readBlobAsDataUri(blob);
|
||||
}).then((contentUrl) => {
|
||||
this.setState({
|
||||
decryptedUrl: contentUrl,
|
||||
decryptedThumbnailUrl: thumbnailUrl,
|
||||
decryptedBlob: decryptedBlob,
|
||||
});
|
||||
this.props.onWidgetLoad();
|
||||
});
|
||||
|
|
@ -213,7 +221,7 @@ module.exports = React.createClass({
|
|||
onMouseEnter={this.onImageEnter}
|
||||
onMouseLeave={this.onImageLeave} />
|
||||
</a>
|
||||
<MFileBody {...this.props} decryptedUrl={this.state.decryptedUrl} />
|
||||
<MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />
|
||||
</span>
|
||||
);
|
||||
} else if (content.body) {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import MFileBody from './MFileBody';
|
|||
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||
import Model from '../../../Modal';
|
||||
import sdk from '../../../index';
|
||||
import { decryptFile } from '../../../utils/DecryptFile';
|
||||
import { decryptFile, readBlobAsDataUri } from '../../../utils/DecryptFile';
|
||||
import q from 'q';
|
||||
|
||||
module.exports = React.createClass({
|
||||
|
|
@ -31,6 +31,7 @@ module.exports = React.createClass({
|
|||
return {
|
||||
decryptedUrl: null,
|
||||
decryptedThumbnailUrl: null,
|
||||
decryptedBlob: null,
|
||||
error: null,
|
||||
};
|
||||
},
|
||||
|
|
@ -84,13 +85,20 @@ module.exports = React.createClass({
|
|||
if (content.info.thumbnail_file) {
|
||||
thumbnailPromise = decryptFile(
|
||||
content.info.thumbnail_file
|
||||
);
|
||||
).then(function(blob) {
|
||||
return readBlobAsDataUri(blob);
|
||||
});
|
||||
}
|
||||
var decryptedBlob;
|
||||
thumbnailPromise.then((thumbnailUrl) => {
|
||||
decryptFile(content.file).then((contentUrl) => {
|
||||
return decryptFile(content.file).then(function(blob) {
|
||||
decryptedBlob = blob;
|
||||
return readBlobAsDataUri(blob);
|
||||
}).then((contentUrl) => {
|
||||
this.setState({
|
||||
decryptedUrl: contentUrl,
|
||||
decryptedThumbnailUrl: thumbnailUrl,
|
||||
decryptedBlob: decryptedBlob,
|
||||
});
|
||||
});
|
||||
}).catch((err) => {
|
||||
|
|
@ -159,7 +167,7 @@ module.exports = React.createClass({
|
|||
controls preload={preload} autoPlay={false}
|
||||
height={height} width={width} poster={poster}>
|
||||
</video>
|
||||
<MFileBody {...this.props} decryptedUrl={this.state.decryptedUrl} />
|
||||
<MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />
|
||||
</span>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ import q from 'q';
|
|||
* Read blob as a data:// URI.
|
||||
* @return {Promise} A promise that resolves with the data:// URI.
|
||||
*/
|
||||
function readBlobAsDataUri(file) {
|
||||
export function readBlobAsDataUri(file) {
|
||||
var deferred = q.defer();
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
|
|
@ -62,6 +62,6 @@ export function decryptFile(file) {
|
|||
}).then(function(dataArray) {
|
||||
// Turn the array into a Blob and give it the correct MIME-type.
|
||||
var blob = new Blob([dataArray], {type: file.mimetype});
|
||||
return readBlobAsDataUri(blob);
|
||||
return blob;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue