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

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 2

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.