From 2efa099de28ffd1217e7287e5cbee17ed87de495 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 23 Jun 2017 17:02:54 +0100
Subject: [PATCH] Use function from HTMLUtils for sanitizing

Encapsulates things a little nicer
---
 src/HtmlUtils.js                       | 12 +++++++++++-
 src/components/structures/GroupView.js | 26 ++++++++++----------------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index aec32092ed..5c1c2881e5 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -107,7 +107,17 @@ export function stripParagraphs(html: string): string {
     return contentHTML;
 }
 
-var sanitizeHtmlParams = {
+/*
+ * Given an untrusted HTML string, return a React node with an sanitized version
+ * of that HTML.
+ */
+export function sanitizedHtmlNode(insaneHtml) {
+    const saneHtml =  sanitizeHtml(insaneHtml, sanitizeHtmlParams);
+
+    return <div dangerouslySetInnerHTML={{ __html: saneHtml }} dir="auto" />;
+}
+
+const sanitizeHtmlParams = {
     allowedTags: [
         'font', // custom to matrix for IRC-style font coloring
         'del', // for markdown
diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 2368c44319..5c049b93be 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -16,8 +16,7 @@ limitations under the License.
 
 import MatrixClientPeg from '../../MatrixClientPeg';
 import sdk from '../../index';
-import sanitizeHtml from "sanitize-html";
-import { sanitizeHtmlParams } from '../../HtmlUtils';
+import { sanitizedHtmlNode } from '../../HtmlUtils';
 
 
 module.exports = React.createClass({
@@ -53,14 +52,13 @@ module.exports = React.createClass({
     },
 
     _loadGroupFromServer: function(groupId) {
-        const self = this;
-        MatrixClientPeg.get().getGroupSummary(groupId).done(function(res) {
-            self.setState({
+        MatrixClientPeg.get().getGroupSummary(groupId).done((res) => {
+            this.setState({
                 phase: "GroupView.DISPLAY",
                 summary: res,
             });
-        }, function(err) {
-            self.setState({
+        }, (err) => {
+            this.setState({
                 phase: err.errcode == 404 ? "GroupView.NOT_FOUND" :"GroupView.ERROR",
                 summary: null,
             });
@@ -68,15 +66,11 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
-        var Loader = sdk.getComponent("elements.Spinner");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+        const Loader = sdk.getComponent("elements.Spinner");
 
         if (this.state.phase == "GroupView.LOADING") {
-            return (
-                <div style={{margin: "auto"}}>
-                    <Loader />
-                </div>
-            );
+            return <Loader />;
         } else if (this.state.phase == "GroupView.DISPLAY") {
             const summary = this.state.summary;
             let avatar_url = null;
@@ -85,7 +79,7 @@ module.exports = React.createClass({
             }
             let description = null;
             if (summary.profile.long_description) {
-                description = sanitizeHtml(summary.profile.long_description);
+                description = sanitizedHtmlNode(summary.profile.long_description);
             }
             return (
                 <div style={{maxWidth: "960px", width: "100%", "margin": "20px auto"}}>
@@ -112,7 +106,7 @@ module.exports = React.createClass({
                             </div>
                         </div>
                     </div>
-                    <div dangerouslySetInnerHTML={{ __html: description }} />
+                    {description}
                 </div>
             );
         } else if (this.state.phase == "GroupView.NOT_FOUND") {