From 4489b5a21aa7550d1bfeee1b4f3960ebc4698cb7 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 28 Dec 2019 20:05:55 +0000
Subject: [PATCH 1/3] Escape HTML in og:description and render any html
 &-encoded entities

---
 src/components/views/rooms/LinkPreviewWidget.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js
index ee63cd1bb7..06c0201af8 100644
--- a/src/components/views/rooms/LinkPreviewWidget.js
+++ b/src/components/views/rooms/LinkPreviewWidget.js
@@ -128,15 +128,15 @@ module.exports = createReactClass({
         }
 
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        // Escape </> to prevent any HTML injections, we can't replace & as the description may contain & encoded html entities
+        const safeDescription = (p["og:description"] || "").replace("<", "&lt;").replace(">", "&gt;");
         return (
             <div className="mx_LinkPreviewWidget" >
                 { img }
                 <div className="mx_LinkPreviewWidget_caption">
                     <div className="mx_LinkPreviewWidget_title"><a href={this.props.link} target="_blank" rel="noopener">{ p["og:title"] }</a></div>
                     <div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" - " + p["og:site_name"]) : null }</div>
-                    <div className="mx_LinkPreviewWidget_description" ref={this._description}>
-                        { p["og:description"] }
-                    </div>
+                    <div className="mx_LinkPreviewWidget_description" ref={this._description} dangerouslySetInnerHTML={{ __html: safeDescription }} />
                 </div>
                 <AccessibleButton className="mx_LinkPreviewWidget_cancel" onClick={this.props.onCancelClick} aria-label={_t("Close preview")}>
                     <img className="mx_filterFlipColor" alt="" role="presentation"

From 378a82e6fb760657b5f77c1d13cad81c298af0da Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sun, 5 Jan 2020 22:22:09 +0000
Subject: [PATCH 2/3] Use html-entities instead

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 package.json                                    |  3 ++-
 src/components/views/rooms/LinkPreviewWidget.js | 10 ++++++----
 yarn.lock                                       |  5 +++++
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 7ef14e6635..7e2c242b3a 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,6 @@
     "file-saver": "^1.3.3",
     "filesize": "3.5.6",
     "flux": "2.1.1",
-    "react-focus-lock": "^2.2.1",
     "focus-visible": "^5.0.2",
     "fuse.js": "^2.2.0",
     "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
@@ -82,6 +81,7 @@
     "glob": "^5.0.14",
     "glob-to-regexp": "^0.4.1",
     "highlight.js": "^9.15.8",
+    "html-entities": "^1.2.1",
     "is-ip": "^2.0.0",
     "isomorphic-fetch": "^2.2.1",
     "linkifyjs": "^2.1.6",
@@ -99,6 +99,7 @@
     "react-addons-css-transition-group": "15.6.2",
     "react-beautiful-dnd": "^4.0.1",
     "react-dom": "^16.9.0",
+    "react-focus-lock": "^2.2.1",
     "react-gemini-scrollbar": "github:matrix-org/react-gemini-scrollbar#9cf17f63b7c0b0ec5f31df27da0f82f7238dc594",
     "resize-observer-polyfill": "^1.5.0",
     "sanitize-html": "^1.18.4",
diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js
index 06c0201af8..4822848233 100644
--- a/src/components/views/rooms/LinkPreviewWidget.js
+++ b/src/components/views/rooms/LinkPreviewWidget.js
@@ -18,7 +18,9 @@ limitations under the License.
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import { linkifyElement } from '../../../HtmlUtils';
+import { AllHtmlEntities } from 'html-entities';
+
+import {linkifyElement} from '../../../HtmlUtils';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
 
@@ -128,15 +130,15 @@ module.exports = createReactClass({
         }
 
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        // Escape </> to prevent any HTML injections, we can't replace & as the description may contain & encoded html entities
-        const safeDescription = (p["og:description"] || "").replace("<", "&lt;").replace(">", "&gt;");
         return (
             <div className="mx_LinkPreviewWidget" >
                 { img }
                 <div className="mx_LinkPreviewWidget_caption">
                     <div className="mx_LinkPreviewWidget_title"><a href={this.props.link} target="_blank" rel="noopener">{ p["og:title"] }</a></div>
                     <div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" - " + p["og:site_name"]) : null }</div>
-                    <div className="mx_LinkPreviewWidget_description" ref={this._description} dangerouslySetInnerHTML={{ __html: safeDescription }} />
+                    <div className="mx_LinkPreviewWidget_description" ref={this._description}>
+                        { AllHtmlEntities.decode(p["og:description"] || "") }
+                    </div>
                 </div>
                 <AccessibleButton className="mx_LinkPreviewWidget_cancel" onClick={this.props.onCancelClick} aria-label={_t("Close preview")}>
                     <img className="mx_filterFlipColor" alt="" role="presentation"
diff --git a/yarn.lock b/yarn.lock
index b8b877ab62..a977b97259 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4010,6 +4010,11 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
   integrity sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg==
 
+html-entities@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+  integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
+
 html-tags@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"

From 64754a3f88c8f531100b46359da7bce45267f2c6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 6 Jan 2020 00:18:24 +0000
Subject: [PATCH 3/3] Add comment and delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/LinkPreviewWidget.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js
index 4822848233..3b5545e0e0 100644
--- a/src/components/views/rooms/LinkPreviewWidget.js
+++ b/src/components/views/rooms/LinkPreviewWidget.js
@@ -19,7 +19,6 @@ import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import { AllHtmlEntities } from 'html-entities';
-
 import {linkifyElement} from '../../../HtmlUtils';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
@@ -129,6 +128,10 @@ module.exports = createReactClass({
                   </div>;
         }
 
+        // The description includes &-encoded HTML entities, we decode those as React treats the thing as an
+        // opaque string. This does not allow any HTML to be injected into the DOM.
+        const description = AllHtmlEntities.decode(p["og:description"] || "");
+
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
             <div className="mx_LinkPreviewWidget" >
@@ -137,7 +140,7 @@ module.exports = createReactClass({
                     <div className="mx_LinkPreviewWidget_title"><a href={this.props.link} target="_blank" rel="noopener">{ p["og:title"] }</a></div>
                     <div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" - " + p["og:site_name"]) : null }</div>
                     <div className="mx_LinkPreviewWidget_description" ref={this._description}>
-                        { AllHtmlEntities.decode(p["og:description"] || "") }
+                        { description }
                     </div>
                 </div>
                 <AccessibleButton className="mx_LinkPreviewWidget_cancel" onClick={this.props.onCancelClick} aria-label={_t("Close preview")}>