Background Colours for Messages

[lukebarnard1]

Background colours for messages would be a useful addition to the matrix web interface because some bridged systems support this functionality, namely IRC. This can be problematic when an IRC message is sent across which has white text and a black background. The text could become difficult to read when against the potentially light background of a matrix client.

A suggestion is to modify the HTML sanitation of <font> tags so that

    <font color="white" data-matrix-bg-color="black">Hopefully visible text</font>

is transformed into

    <font color="white" style="background-color:black;">Hopefully visible text</font>

whilst checking for CSS injection of the provided bg-color.

Given that CSS injection needs to be checked for anyway, perhaps a better solution would be to accept the style attribute and only allow color and background-color attributes to be allowed. http-sanitize sadly doesn't support this functionality, but it could be written separately.

Sanitization within matrix-react-sdk:
https://github.com/matrix-org/matrix-react-sdk/blob/24223ae2b69debb33fa22fcda5aeba6fa93c93eb/src/HtmlUtils.js

(See matrix-org/matrix-appservice-irc#62)

[Half-Shot]

Given that CSS injection needs to be checked for anyway, perhaps a better solution would be to accept the style attribute and only allow color and background-color attributes to be allowed. http-sanitize sadly doesn't support this functionality, but it could be written separately.

We were talking about this in #HQ a little while ago and I'd prefer doing this over writing our own attributes. How difficult would it be to write a whitelist of CSS rules similar to how we do it with HTML tags?

My idea would be to get as far as creating the DOM element and then removing rules we don't want from someElement.style?

[richvdh]

Moving this to element-hq/element-web#2460.