Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Allow [bf]g colors for <font> style attrib #610

Merged
merged 9 commits into from
Mar 3, 2017
Merged

Allow [bf]g colors for <font> style attrib #610

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8e3f2eb
Allow [bf]g colors for <font> style attrib
Jan 11, 2017
32185be
Only transform <font>
Jan 11, 2017
ae03244
Merge branch 'develop' into luke/feature-css-msg-colors
lukebarnard1 Feb 9, 2017
886b0a3
Sanitise for *, fix style issues
Feb 27, 2017
5fc828f
Allow span, and only allow style attrib
Feb 27, 2017
36795fa
Use data-mx[-bg]-color instead of stripping style
Mar 2, 2017
b951713
Remove custom attribs as consumed
Mar 2, 2017
0f8ab99
Have COLOR_REGEX constant
Mar 2, 2017
f4278b6
Update comment
Mar 2, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 36 additions & 2 deletions src/HtmlUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ emojione.imagePathSVG = 'emojione/svg/';
emojione.imageType = 'svg';

const EMOJI_REGEX = new RegExp(emojione.unicodeRegexp+"+", "gi");
const COLOR_REGEX = /#[0-9a-fA-F]{6}/;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Woah there! Careful!

> r = /#[0-9a-fA-F]{6}/
/#[0-9a-fA-F]{6}/
> r.test("url(https://evil.com)/*#ffffff*/")
true

You need to use start and end symbols!

> r = /^#[0-9a-fA-F]{6}$/
/^#[0-9a-fA-F]{6}$/
> r.test("url(https://evil.com);/*#ffffff*/")
false
> r.test("#ffffff")
true

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#737


/* modified from https://github.com/Ranks/emojione/blob/master/lib/js/emojione.js
* because we want to include emoji shortnames in title text
Expand Down Expand Up @@ -87,11 +88,12 @@ var sanitizeHtmlParams = {
// deliberately no h1/h2 to stop people shouting.
'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
'nl', 'li', 'b', 'i', 'u', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div',
'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre'
'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'span',
],
allowedAttributes: {
// custom ones first:
font: ['color'], // custom to matrix
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
Expand Down Expand Up @@ -136,6 +138,38 @@ var sanitizeHtmlParams = {
attribs.rel = 'noopener'; // https://mathiasbynens.github.io/rel-noopener/
return { tagName: tagName, attribs : attribs };
},
'*': function(tagName, attribs) {
// Delete any style previously assigned, style is an allowedTag for font and span
// because attributes are stripped after transforming
delete attribs.style;

// Sanitise and transform data-mx-color and data-mx-bg-color to their CSS
// equivalents
const customCSSMapper = {
'data-mx-color': 'color',
'data-mx-bg-color': 'background-color',
// $customAttributeKey: $cssAttributeKey
};

let style = "";
Object.keys(customCSSMapper).forEach((customAttributeKey) => {
const cssAttributeKey = customCSSMapper[customAttributeKey];
const customAttributeValue = attribs[customAttributeKey];
if (customAttributeValue &&
typeof customAttributeValue === 'string' &&
COLOR_REGEX.test(customAttributeValue)
) {
style += cssAttributeKey + ":" + customAttributeValue + ";";
delete attribs[customAttributeKey];
}
});

if (style) {
attribs.style = style;
}

return { tagName: tagName, attribs: attribs };
},
},
};

Expand Down