Allow Certain Style Attributes with Ngsanitize

Allow certain style attributes with ngSanitize

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.

Angular sanitize html but leave inline style

Problem with your solution is if you want style attributes then you'd had to allow CSS in general which is not XSS proof and therefore DomSanitizer.sanitize(...) is cutting out everything that could lead to a XSS.

If you really need your HTML to show the style attributes then use bypassSecurityTrustHtml(value: string) instead! But be carefull this will also allow <script> Tags aswell.

It can be considered safe if TinyMCE is used by only you, trusted users, trusted stakeholders, trusted vip's or moderators that would provide the content with TinyMCE. But if your TinyMCE is thought for your userbase then I'd strongly recommend to NOT use TinyMCE for this approach and rather look out for another solution.

For example you could use something with bbcode functionality like the ckeditor for angular.

Happy coding :)

Security risk (xss) with style attributes

Many of the same risks are shared with HTML emails. If you're showing your HTML email in a web-based reader, such as Gmail, you want to ensure it can't escape its container and try to mess with the mail interface itself. Because of this, many styles are ripped out before the email is served to the user. Campaign Monitor has a good guide as to what CSS is allowed and disabled in different mail clients. This may be a good starting point.

The purpose behind lxml.htm.clean to remove 'style' from tags

Under normal conditions, styles are not a security risk per se. However, there are several circumstances in which a malicious style could be a liability:

• form and input elements with style="display:none" can auto-populate with data in some browsers, causing users to unknowingly submit extra data.
• style="display:block" or another display style might break a layout expecting inline or another style.
• If your layout engine wants to maintain a particular visual style, allowing style information in the style attribute will give authors/posters more latitude than indented for choosing styles. (What if they decide they want 2000pt font?)
• Style attributes can sometimes load other styles through the @import mechanic, or cause URLs to be loaded via background and similar attributes. Unless the sanitizer commits to also sanitize the CSS code, this will be a potential vector for injection.

Since the only reason you'd want to sanatize is that the source is potentially untrusted or insecure, it's assumed that letting the source set their own styles is not desired.

---

Related Topics