PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Use function from HTMLUtils for sanitizing

Browse source 
Encapsulates things a little nicer
This commit is contained in:
David Baker 2017-06-23 17:02:54 +01:00
parent 75ef80ecd4
commit 2efa099de2
2 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/HtmlUtils.js
View file

@ -107,7 +107,17 @@ export function stripParagraphs(html: string): string {
return contentHTML; 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: [ allowedTags: [
'font', // custom to matrix for IRC-style font coloring 'font', // custom to matrix for IRC-style font coloring
'del', // for markdown 'del', // for markdown

26
src/components/structures/GroupView.js
View file

@ -16,8 +16,7 @@ limitations under the License.
import MatrixClientPeg from '../../MatrixClientPeg'; import MatrixClientPeg from '../../MatrixClientPeg';
import sdk from '../../index'; import sdk from '../../index';
import sanitizeHtml from "sanitize-html"; import { sanitizedHtmlNode } from '../../HtmlUtils';
import { sanitizeHtmlParams } from '../../HtmlUtils';
module.exports = React.createClass({ module.exports = React.createClass({
@ -53,14 +52,13 @@ module.exports = React.createClass({
}, },
_loadGroupFromServer: function(groupId) { _loadGroupFromServer: function(groupId) {
const self = this; MatrixClientPeg.get().getGroupSummary(groupId).done((res) => {
MatrixClientPeg.get().getGroupSummary(groupId).done(function(res) { this.setState({
self.setState({
phase: "GroupView.DISPLAY", phase: "GroupView.DISPLAY",
summary: res, summary: res,
}); });
}, function(err) { }, (err) => {
self.setState({ this.setState({
phase: err.errcode == 404 ? "GroupView.NOT_FOUND" :"GroupView.ERROR", phase: err.errcode == 404 ? "GroupView.NOT_FOUND" :"GroupView.ERROR",
summary: null, summary: null,
}); });
@ -68,15 +66,11 @@ module.exports = React.createClass({
}, },
render: function() { render: function() {
var BaseAvatar = sdk.getComponent("avatars.BaseAvatar"); const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
var Loader = sdk.getComponent("elements.Spinner"); const Loader = sdk.getComponent("elements.Spinner");
if (this.state.phase == "GroupView.LOADING") { if (this.state.phase == "GroupView.LOADING") {
return ( return <Loader />;
<div style={{margin: "auto"}}>
<Loader />
</div>
);
} else if (this.state.phase == "GroupView.DISPLAY") { } else if (this.state.phase == "GroupView.DISPLAY") {
const summary = this.state.summary; const summary = this.state.summary;
let avatar_url = null; let avatar_url = null;
@ -85,7 +79,7 @@ module.exports = React.createClass({
} }
let description = null; let description = null;
if (summary.profile.long_description) { if (summary.profile.long_description) {
description = sanitizeHtml(summary.profile.long_description); description = sanitizedHtmlNode(summary.profile.long_description);
} }
return ( return (
<div style={{maxWidth: "960px", width: "100%", "margin": "20px auto"}}> <div style={{maxWidth: "960px", width: "100%", "margin": "20px auto"}}>
@ -112,7 +106,7 @@ module.exports = React.createClass({
</div> </div>
</div> </div>
</div> </div>
<div dangerouslySetInnerHTML={{ __html: description }} /> {description}
</div> </div>
); );
} else if (this.state.phase == "GroupView.NOT_FOUND") { } else if (this.state.phase == "GroupView.NOT_FOUND") {