From bb9080425a5490fcf0bf26e741727b811485e686 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 10 Jul 2017 16:27:23 +0100
Subject: [PATCH] Allow image tags with src attributes with schemes http[s]

And transform `mxc:*` URLs to `https?://`
---
 src/HtmlUtils.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index e291632eca..95e698d6e5 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -23,6 +23,7 @@ var linkifyMatrix = require('./linkify-matrix');
 import escape from 'lodash/escape';
 import emojione from 'emojione';
 import classNames from 'classnames';
+import MatrixClientPeg from './MatrixClientPeg';
 
 emojione.imagePathSVG = 'emojione/svg/';
 // Store PNG path for displaying many flags at once (for increased performance over SVG)
@@ -141,8 +142,6 @@ const sanitizeHtmlParams = {
         font: ['color', 'data-mx-bg-color', 'data-mx-color', 'style'], // custom to matrix
         span: ['data-mx-bg-color', 'data-mx-color', 'style'], // custom to matrix
         a: ['href', 'name', 'target', 'rel'], // remote target: custom to matrix
-        // We don't currently allow img itself by default, but this
-        // would make sense if we did
         img: ['src'],
         ol: ['start'],
         code: ['class'], // We don't actually allow all classes, we filter them in transformTags
@@ -153,7 +152,7 @@ const sanitizeHtmlParams = {
     allowedSchemes: ['http', 'https', 'ftp', 'mailto'],
 
     allowedSchemesByTag: {
-        img: ['mxc'],
+        img: ['http', 'https'],
     },
     allowProtocolRelative: false,
 
@@ -187,6 +186,16 @@ const sanitizeHtmlParams = {
             attribs.rel = 'noopener'; // https://mathiasbynens.github.io/rel-noopener/
             return { tagName: tagName, attribs : attribs };
         },
+        'img': function(tagName, attribs) {
+            if (attribs.src.startsWith('mxc://')) {
+                attribs.src = MatrixClientPeg.get().mxcUrlToHttp(
+                    attribs.src,
+                    attribs.width || 800,
+                    attribs.height || 600,
+                );
+            }
+            return { tagName: tagName, attribs: attribs };
+        },
         'code': function(tagName, attribs) {
             if (typeof attribs.class !== 'undefined') {
                 // Filter out all classes other than ones starting with language- for syntax highlighting.