Avoid XSS and allow some html tags with JavaScript

Question

I've got a problem in my current project: Users can send an email using a textarea. We allow the user to put in whatever they want, and thus some HTML for formatting. For example, the user should be allowed to use the <b> tag for bold text.

After completing their email, the user should be able to view a preview of their email dynamically.

There is a slight problem though, how can I avoid XSS hacks when the preview is being displayed?

You can ofcourse strip them using underscore.js, but that wouldn't format their preview.

So I have forbidden all HTML tags for now, and only allowed tags like <hr>, <b>, etc.

What do you think about this solution? Is it secure enough?

Answer 1

If you want to prevent XSS attack on the server side with allowing some tags, you can use OWASP HTMLSanitizer(OWASP antisamy is now inactive) and also make your own rules.

• HTML sanitizer project page:
  https://www.owasp.org/index.php/OWASP_Java_HTML_Sanitizer_Project

• Example rule - Ebay rule:
  https://github.com/OWASP/java-html-sanitizer/blob/master/src/main/java/org/owasp/html/examples/EbayPolicyExample.java

  https://github.com/OWASP/java-html-sanitizer/blob/master/src/main/java/org/owasp/html/examples/EbayPolicyExample.java
  public static final PolicyFactory POLICY_DEFINITION = new HtmlPolicyBuilder()
        .allowAttributes("id").matching(HTML_ID).globally()
        .allowAttributes("class").matching(HTML_CLASS).globally()
        .allowAttributes("lang").matching(Pattern.compile("[a-zA-Z]{2,20}"))
            .globally()
        .allowAttributes("title").matching(HTML_TITLE).globally()
        .allowStyling()
        .allowAttributes("align").matching(ALIGN).onElements("p")
        .allowAttributes("for").matching(HTML_ID).onElements("label")
        .allowAttributes("color").matching(COLOR_NAME_OR_COLOR_CODE)
            .onElements("font")
        .allowAttributes("face")
            .matching(Pattern.compile("[\\w;, \\-]+"))
            .onElements("font")
        .allowAttributes("size").matching(NUMBER).onElements("font")
        .allowAttributes("href").matching(ONSITE_OR_OFFSITE_URL)
            .onElements("a")
        .allowStandardUrlProtocols()
        .allowAttributes("nohref").onElements("a")
        .allowAttributes("name").matching(NAME).onElements("a")
        .allowAttributes(
            "onfocus", "onblur", "onclick", "onmousedown", "onmouseup")
            .matching(HISTORY_BACK).onElements("a")
        .requireRelNofollowOnLinks()
        .allowAttributes("src").matching(ONSITE_OR_OFFSITE_URL)
            .onElements("img")
        .allowAttributes("name").matching(NAME)
            .onElements("img")
        .allowAttributes("alt").matching(PARAGRAPH)
            .onElements("img")
        .allowAttributes("border", "hspace", "vspace").matching(NUMBER)
            .onElements("img")
        .allowAttributes("border", "cellpadding", "cellspacing")
            .matching(NUMBER).onElements("table")
        .allowAttributes("bgcolor").matching(COLOR_NAME_OR_COLOR_CODE)
            .onElements("table")
        .allowAttributes("background").matching(ONSITE_URL)
            .onElements("table")
        .allowAttributes("align").matching(ALIGN)
            .onElements("table")
        .allowAttributes("noresize").matching(Pattern.compile("(?i)noresize"))
            .onElements("table")
        .allowAttributes("background").matching(ONSITE_URL)
            .onElements("td", "th", "tr")
        .allowAttributes("bgcolor").matching(COLOR_NAME_OR_COLOR_CODE)
            .onElements("td", "th")
        .allowAttributes("abbr").matching(PARAGRAPH)
            .onElements("td", "th")
        .allowAttributes("axis", "headers").matching(NAME)
            .onElements("td", "th")
        .allowAttributes("scope")
            .matching(Pattern.compile("(?i)(?:row|col)(?:group)?"))
            .onElements("td", "th")
        .allowAttributes("nowrap")
            .onElements("td", "th")
        .allowAttributes("height", "width").matching(NUMBER_OR_PERCENT)
            .onElements("table", "td", "th", "tr", "img")
        .allowAttributes("align").matching(ALIGN)
            .onElements("thead", "tbody", "tfoot", "img",
                             "td", "th", "tr", "colgroup", "col")
        .allowAttributes("valign").matching(VALIGN)
            .onElements("thead", "tbody", "tfoot",
                            "td", "th", "tr", "colgroup", "col")
        .allowAttributes("charoff").matching(NUMBER_OR_PERCENT)
            .onElements("td", "th", "tr", "colgroup", "col",
                            "thead", "tbody", "tfoot")
        .allowAttributes("char").matching(ONE_CHAR)
            .onElements("td", "th", "tr", "colgroup", "col",
                             "thead", "tbody", "tfoot")
        .allowAttributes("colspan", "rowspan").matching(NUMBER)
            .onElements("td", "th")
        .allowAttributes("span", "width").matching(NUMBER_OR_PERCENT)
            .onElements("colgroup", "col")
        .allowElements(
            "a", "label", "noscript", "h1", "h2", "h3", "h4", "h5", "h6",
            "p", "i", "b", "u", "strong", "em", "small", "big", "pre", "code",
            "cite", "samp", "sub", "sup", "strike", "center", "blockquote",
            "hr", "br", "col", "font", "map", "span", "div", "img",
            "ul", "ol", "li", "dd", "dt", "dl", "tbody", "thead", "tfoot",
            "table", "td", "th", "tr", "colgroup", "fieldset", "legend")
        .toFactory();
  

Answer 2

In order to prevent Application from XSS attacks I usually use following rules:

1. Determine the level of security for your application.
   There are several tools that can protect your application as for me better security is provided by OWASP tools: ESAPI or AntySami.
   Note:Using Sanitization does not guarantee filtering of all malicious code, so tools can be more or less secure.

2. Understand whether you need to perform sanitization on client, server or both sides. In most cases it's enough to do this on server side.

3. Understand whether you need to preserve html tags (and what tags you need to preserve) or not. As it was stated previously not allowing html tags is more secure solution.

Based on this you can find a proper decision.
1. Personally for server code sanitization I used jSoup. As for me it's pretty good tool to do this.
Usually In order to check input vulnerability I am using following vector:

';alert(String.fromCharCode(88,83,83))//\';alert(String.fromCharCode(88,83,83))//";alert(String.fromCharCode(88,83,83))//\";alert(String.fromCharCode(88,83,83))//--></SCRIPT>">'><SCRIPT>alert(String.fromCharCode(88,83,83))</SCRIPT>

1. In case you need prevent XSS on client side you can use following tools:
   a) JSSANItazer seems a bit outdated
   b) Dust - maintained by twitter;
   

These tools easily can allow you to sanitize your input and mainly is answer for your question.

Server side tools mentioned above.

Regarding 3rd point. In case you don't need to handle html tags you can easily use ESAPI on server side and ESAPI4JS on client side. As I understand it doesn't work for you.

When I read your task I understood that you are storing email message therefore In your case it's required to sanitize input on server side (using one of tools) and it's as per you to add it or not on client side. You need only decide whether add another sanitization on UI side or render your "preview page" on server.

Answer 3

Best way to avoid most of the XSS attacks is:

• By sanitizing your data so text is properly escaped before it hits the html (you can build exceptions for your <b> and <hr> and others

• Using Content Security Policy to disable all inline scripting (also avoids man in the middle attacks): http://www.html5rocks.com/en/tutorials/security/content-security-policy/

These two together will make your site pretty robust

Answer 4

I think since the tags that work in email clients is a relatively small (but still sizeable) list, you might want to use a whitelist of tags, similar to what you're doing right now. It would be a relatively complex regext to strip out tags but the ones you allow, but I think that's the only way you can allow some tags and not others. This is not foolproof though because the deletion of tags can be used to create new tags e.g in my input below, assume is disallowed and you strip it out:

<<script>script language="javascript">Do something bad</<script>script>

You might want to explore using markdown or some similar syntax that you could convert on the server-side into some valid HTML.

See http://daringfireball.net/projects/markdown/

That way, they can use a small subset of formatting markdowns and you can substitute them on the server side.

Answer 5

You can ofcourse allways switch to using BB code, use the same parser for the preview as the form, and then parse the ubb code server side when sending.

See this article if you like to parse the BB code client side for the preview and this for parsing the BB code server-side, assuming you send mails using PHP.