OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Use data-mx[-bg]-color instead of stripping style 

This has the benefit of not needing a spec for custom CSS. Instead we rigourously sanitise the values for custom data attributes that are transformed to CSS equivalents. `data-mx-color` translates to CSS `color` for example.
pull/21833/head
Luke Barnard 2017-03-02 11:36:56 +00:00
parent 5fc828f24c
commit 36795fa192
1 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/HtmlUtils.js
View File

@ -96,8 +96,8 @@ var sanitizeHtmlParams = {
],
allowedAttributes: {
// custom ones first:
font: ['color', 'style'], // custom to matrix
span: ['style'],
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
@ -143,28 +143,31 @@ var sanitizeHtmlParams = {
return { tagName: tagName, attribs : attribs };
},
'*': function(tagName, attribs) {
// Only allow certain CSS attributes to avoid XSS attacks
// Sanitizing values to avoid `url(...)` and `expression(...)` attacks
if (!attribs.style) {
return { tagName: tagName, attribs: attribs };
}
// Delete any style previously assigned
delete attribs.style;
const pairs = attribs.style.split(';');
let sanitisedStyle = "";
for (let i = 0; i < pairs.length; i++) {
const pair = pairs[i].split(':');
if (!Object.keys(ALLOWED_CSS).includes(pair[0]) ||
!ALLOWED_CSS[pair[0]].test(pair[1])
// 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' &&
/#[0-9a-fA-F]{6}/.test(customAttributeValue)
) {
continue;
style += cssAttributeKey + ":" + customAttributeValue + ";";
}
sanitisedStyle += pair[0] + ":" + pair[1] + ";";
}
});
if (sanitisedStyle) {
attribs.style = sanitisedStyle;
} else {
delete attribs.style;
if (style) {
attribs.style = style;
}
return { tagName: tagName, attribs: attribs };