Allow certain style attributes with ngSanitize

Question

I am using ngSanitize in an AngularJS application to remove unwanted or dangerous parts. However, the content is generated using an HTML Richtext editor and contains some style information, which gets removed (e.g. the text color).

I know that it is useful to remove inlined CSS styles, but I would prefer a whitelist with CSS attributes that do not get removed. Is there a way to achieve this without granting all CSS attributes?

Answer 1

Reading the documentation for ngSanitize, it looks as though it uses two whitelists to determine what data to block (described here, in $compileProvider).

The two whitelists are aHrefSanitizationWhitelist([regexp]) and imgSrcSanitizationWhitelist([regexp]). However, it looks as though these two only handle URLs for links to prevent XSS attacks.

You can use sce.trustAsHtml() (or, possibly, data-bind-html-unsafe if that's still a thing, but I think that's deprecated) but that's not exactly what you want; that would open you up to all HTML, safe or unsafe.

It might be worth it to check out the documentation for $sce. Looking at it so far, there's an option for escaping CSS, but I'm not sure if it would escape inline CSS in an HTML tag. So far, I see no options for providing a whitelist to the parseAs method.

Edit:

Looking through the $sanitize source code, it looks as though it's set to allow stuff in style tags, but not style attributes. Style attributes will get stripped by sanitize unless you change the source code. Classes, however, don't get stripped, so you may have a workaround there. (In fact, by allowing classes and not inline styles, you can possibly restrict style usage in your comments section.)

The only other alternative would be to roll your own, it seems, unless someone already has.

Answer 2

The folks over at textAngular have a fork of ng-sanitize that will allow for style attributes. Use their version instead of ng-sanitize.