[Reactive Html Sanitizer] Allowed CSS styles - Defaults
Forge component by Daniël Kuhlmann
Application Type
Reactive

Hi Daniël,


I am using this component in my project and ran into an issue: I was trying to allow text-decoration, but somehow it always removed this property from the html.
So i had a deeper look into the javascript.


Looking at the HtmlSanitizer.js file, line 18 sets the default values for Tags, Attributes and CssStyles. 

In CssStyles, the defaults are: 'color', 'background-color', 'font-size', 'text-align', 'font-weight' and 'text-decoration'.
All of them work, except for text-decoration.


After some debugging i found the problem:

Text-decoration is a shorthand CSS property, which sets values to other CSS properties (text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness).

When the makeSanitizedCopy() function is called and tries to break down the list of components in the style attribute (Line 76), it retrieves all the properties. So for each of the values, when it tried searching on the AllowedCssStyles all the properties were being blocked because only the shorthand property was there.

I changed the defaults to include all the properties, line 28 is now:

this.AllowedCssStyles = { 'color': true, 'background-color': true, 'font-size': true, 'text-align': true, 'font-weight': true, 'text-decoration': true, 'text-decoration-line': true, 'text-decoration-thickness': true, 'text-decoration-style': true, 'text-decoration-color': true };


Hope this helps someone if they run into a similar issue in the future, as it could happen with some other shorthand CSS properties (border, padding, etc...).
mvp_badge
MVP

Hi André,

Thank you for reporting this. I will have a look at it this weekend and update the component accordingly.

Regards,

Daniel


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.