mirror of https://github.com/vector-im/riot-web
remove code related to encrypted file download button in iframe (#7940)
* remove code related to encrypted file download button in iframe Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * remove getIframeFn in mfilebody filedownloader Signed-off-by: Kerry Archibald <kerrya@element.io> * remove iframe ref too Signed-off-by: Kerry Archibald <kerrya@element.io>pull/21833/head
Kerry
GitHub
parent
d01ea1824b
commit
26216ec527
|
|
@ -45,20 +45,6 @@ limitations under the License.
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Remove the border and padding for iframes for download links. */
|
||||
.mx_MFileBody_download iframe {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
/* Set the height of the iframe to be 1 line of text.
|
||||
* Iframes don't automatically size themselves to fit their content.
|
||||
* So either we have to fix the height of the iframe using CSS or
|
||||
* use javascript's cross-origin postMessage API to communicate how
|
||||
* big the content of the iframe is. */
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.mx_MFileBody_info {
|
||||
cursor: pointer;
|
||||
|
||||
|
|
|
|||
|
|
@ -31,19 +31,6 @@ import { FileDownloader } from "../../../utils/FileDownloader";
|
|||
import TextWithTooltip from "../elements/TextWithTooltip";
|
||||
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
|
||||
|
||||
export let DOWNLOAD_ICON_URL; // cached copy of the download.svg asset for the sandboxed iframe later on
|
||||
|
||||
async function cacheDownloadIcon() {
|
||||
if (DOWNLOAD_ICON_URL) return; // cached already
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const svg = await fetch(require("../../../../res/img/download.svg")).then(r => r.text());
|
||||
DOWNLOAD_ICON_URL = "data:image/svg+xml;base64," + window.btoa(svg);
|
||||
}
|
||||
|
||||
// Cache the asset immediately
|
||||
// noinspection JSIgnoredPromiseFromCall
|
||||
cacheDownloadIcon();
|
||||
|
||||
// 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
|
||||
|
|
@ -74,29 +61,6 @@ cacheDownloadIcon();
|
|||
// 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.
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
export function computedStyle(element: HTMLElement) {
|
||||
if (!element) {
|
||||
return "";
|
||||
}
|
||||
const style = window.getComputedStyle(element, null);
|
||||
let cssText = style.cssText;
|
||||
// noinspection EqualityComparisonWithCoercionJS
|
||||
if (cssText == "") {
|
||||
// Firefox doesn't implement ".cssText" for computed styles.
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=137687
|
||||
for (let i = 0; i < style.length; i++) {
|
||||
cssText += style[i] + ":";
|
||||
cssText += style.getPropertyValue(style[i]) + ";";
|
||||
}
|
||||
}
|
||||
return cssText;
|
||||
}
|
||||
|
||||
interface IProps extends IBodyProps {
|
||||
/* whether or not to show the default placeholder for the file. Defaults to true. */
|
||||
showGenericPlaceholder: boolean;
|
||||
|
|
@ -115,10 +79,9 @@ export default class MFileBody extends React.Component<IProps, IState> {
|
|||
showGenericPlaceholder: true,
|
||||
};
|
||||
|
||||
private iframe: React.RefObject<HTMLIFrameElement> = createRef();
|
||||
private dummyLink: React.RefObject<HTMLAnchorElement> = createRef();
|
||||
private userDidClick = false;
|
||||
private fileDownloader: FileDownloader = new FileDownloader(() => this.iframe.current);
|
||||
private fileDownloader: FileDownloader = new FileDownloader();
|
||||
|
||||
public constructor(props: IProps) {
|
||||
super(props);
|
||||
|
|
@ -143,17 +106,11 @@ export default class MFileBody extends React.Component<IProps, IState> {
|
|||
return presentableTextForFile(this.content);
|
||||
}
|
||||
|
||||
private downloadFile(fileName: string, text: string) {
|
||||
private downloadFile(fileName: string) {
|
||||
this.fileDownloader.download({
|
||||
blob: this.state.decryptedBlob,
|
||||
name: fileName,
|
||||
autoDownload: this.userDidClick,
|
||||
opts: {
|
||||
imgSrc: DOWNLOAD_ICON_URL,
|
||||
imgStyle: null,
|
||||
style: computedStyle(this.dummyLink.current),
|
||||
textContent: _t("Download %(text)s", { text }),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -185,7 +142,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
|
|||
const mediaHelper = this.props.mediaEventHelper;
|
||||
if (mediaHelper?.media.isEncrypted) {
|
||||
await this.decryptFile();
|
||||
this.downloadFile(this.fileName, this.linkText);
|
||||
this.downloadFile(this.fileName);
|
||||
} else {
|
||||
// As a button we're missing the `download` attribute for styling reasons, so
|
||||
// download with the file downloader.
|
||||
|
|
@ -256,8 +213,6 @@ export default class MFileBody extends React.Component<IProps, IState> {
|
|||
);
|
||||
}
|
||||
|
||||
const url = "usercontent/"; // XXX: this path should probably be passed from the skin
|
||||
|
||||
// If the attachment is encrypted then put the link inside an iframe.
|
||||
return (
|
||||
<span className="mx_MFileBody">
|
||||
|
|
@ -274,20 +229,6 @@ export default class MFileBody extends React.Component<IProps, IState> {
|
|||
{ /* eslint-disable-next-line */ }
|
||||
<a ref={this.dummyLink} />
|
||||
</div>
|
||||
{ /*
|
||||
TODO: Move iframe (and dummy link) into FileDownloader.
|
||||
We currently have it set up this way because of styles applied to the iframe
|
||||
itself which cannot be easily handled/overridden by the FileDownloader. In
|
||||
future, the download link may disappear entirely at which point it could also
|
||||
be suitable to just remove this bit of code.
|
||||
*/ }
|
||||
<iframe
|
||||
aria-hidden
|
||||
title={presentableTextForFile(this.content, _t("Attachment"), true, true)}
|
||||
src={url}
|
||||
onLoad={() => this.downloadFile(this.fileName, this.linkText)}
|
||||
ref={this.iframe}
|
||||
sandbox="allow-scripts allow-downloads allow-downloads-without-user-activation" />
|
||||
</div> }
|
||||
</span>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2104,9 +2104,9 @@
|
|||
"Reply": "Reply",
|
||||
"Collapse quotes │ ⇧+click": "Collapse quotes │ ⇧+click",
|
||||
"Expand quotes │ ⇧+click": "Expand quotes │ ⇧+click",
|
||||
"Download %(text)s": "Download %(text)s",
|
||||
"Error decrypting attachment": "Error decrypting attachment",
|
||||
"Decrypt %(text)s": "Decrypt %(text)s",
|
||||
"Download %(text)s": "Download %(text)s",
|
||||
"Invalid file%(extra)s": "Invalid file%(extra)s",
|
||||
"Error decrypting image": "Error decrypting image",
|
||||
"Show image": "Show image",
|
||||
|
|
|
|||
|
|
@ -16,18 +16,10 @@ limitations under the License.
|
|||
|
||||
export type getIframeFn = () => HTMLIFrameElement; // eslint-disable-line @typescript-eslint/naming-convention
|
||||
|
||||
export const DEFAULT_STYLES = {
|
||||
imgSrc: "",
|
||||
imgStyle: null, // css props
|
||||
style: "",
|
||||
textContent: "",
|
||||
};
|
||||
|
||||
type DownloadOptions = {
|
||||
blob: Blob;
|
||||
name: string;
|
||||
autoDownload?: boolean;
|
||||
opts?: typeof DEFAULT_STYLES;
|
||||
};
|
||||
|
||||
// set up the iframe as a singleton so we don't have to figure out destruction of it down the line.
|
||||
|
|
@ -89,11 +81,10 @@ export class FileDownloader {
|
|||
return iframe;
|
||||
}
|
||||
|
||||
public async download({ blob, name, autoDownload = true, opts = DEFAULT_STYLES }: DownloadOptions) {
|
||||
public async download({ blob, name, autoDownload = true }: DownloadOptions) {
|
||||
const iframe = this.iframe; // get the iframe first just in case we need to await onload
|
||||
if (this.onLoadPromise) await this.onLoadPromise;
|
||||
iframe.contentWindow.postMessage({
|
||||
...opts,
|
||||
blob: blob,
|
||||
download: name,
|
||||
auto: autoDownload,
|
||||
|
|
|
|||
Loading…
Reference in New Issue