Is it secure to use jQuery on the server-side for user input validation?

Question

I'm thinking about using jQuery on the server-side (node.js) to validate user input (filter tags, remove every attributes except href, rel, target & style, modify css rules which are applied directly to an element and remove javascript links). Example of js link validation below:

$(userinput).find("a").each(function() {
    if (/^j/i.test($(this).attr("href").replace(/\s+/g, ""))) {
        $(this).remove();
    }
});

Now is it possbile a the attacker to write some code which let's jQuery think it's not HTML by escaping, encoding or something? Is jQuery 100% secure for this operation?

UPDATE

For code intrested users.

Answer 1

You need to verify that the HTML is valid (e. g. proper nesting of ", ', <, >). Otherwise different browsers will use different algorithms to "fix" it. This results in them seeing different things as tags.

Furthermore there is a high risk that you add too much to your whitelist. For example, the href attribute may contain active content, such as jaVascript:, vbscRipt:, java scriPt: amongst others.

On Internet Explorer there is an expression() function that can be used in CSS to execute Javascript.

I strong suggest to use one of the existing libraries to sanities user input, such as html purifier.

Please have a good look at the XSS cheat sheet.

Last but not least, keep in mind that an attack might work completely without JavaScript, by injecting a form asking for a username and password.

Answer 2

No, as it seems to indicate you are using jQuery (adept at parsing out information from HTML tags) to do input validation on the user inputting HTML that you will then display back to the user. Whitelisting safe HTML tags, and blacklisting unsafe HTML tags is the wrong method to preventing XSS.

The right method is using a lightweight markup language like Markdown or reStructuredText for user input of formatted data (like blog posts, comments, etc). This way the user can stylize their text in whatever they want, add bold text or links within their comment with a syntax like **make this bold** or [text for a link](http://www.example.com/fake/link) which it always converts into html to be displayed like <a href="http://www.example.com/fake/link">text for a link</a> in the user's browser. This let's you completely prevent say <script> inserting javascript files, or onclick onmouserover form with action attributes as your limited safe markup language is set to not allow those tags or general attributes.

Granted you have to set your language to be in a safe_mode where special characters specifically <, >, &, ", ' are HTML-escaped (into <, >, & ", and ' which will be seen by the user as the real character without being interpreted by the browser as part HTML source), (attributes=false) attributes aren't allowed to be inputted (e.g., onclick), as well as requiring links to start with a limited whitelist; e.g., http, //, /, ftp, mailto, news, so you don't inadvertently let users input javascript as the protocol in their links.

(This can also be accomplished by filtering the raw input through HTML purifier, if you want your users to be able to write straight-HTML like in Hendrik's answer.)

By doing this with a mature lightweight markup language, you won't forget to miss removing something regardless of how obscure it is or how your jQuery library didn't pick up on malformed HTML while sanitizing it, but one particular browser did.

Answer 3

No. It is not safe. Browsers vary widely in how they parse certain kinds of input (for especially "invalid" HTML, where "invalid" here is not especially well-defined, but sometimes even for "valid" HTML). This provides a large number of subtle ways to smuggle bad HTML into your HTML document, without jQuery realizing it.

The root of the problem is not jQuery; the root of the problem is your general approach to HTML sanitizion. I have run some experiments, tasking others to write HTML sanitizers. I've found that well over 2/3rds end up being insecure. So, my recommendation is: do not write your own HTML sanitizer. You will quite likely get it wrong.

Instead, I suggest using an existing HTML sanitizer library. I suggest using OWASP HTML sanitizer, HTML Purifier, or NeatHtml; they are well-designed and well-regarded.

Answer 4

There are a lot of browser-quirks which could fool your browser behaviours. Browsers have different engines, which could leads to parsing syntax-broken parts of HTML in different ways. Here's an example of kind of unexpected behaviour (I recommend you to read this book, if you want to find out more).

Moreover, you cannot be sure, what the future will bring. The new tags or attributes could be added. The most proper way is to avoid blacklisting and create the whitelist of acceptable tags.

Answer 5

Here how the javascript / jquery normalising works:

var userinput = "<a href='javascript:alert(\"<iframe>\")'>\
<embed> </embed>\
<object classid='buggy plugin' hostileparams='' />\
<html></html> <script></script> < > <htmlx> </a> < > <> \
<htmz> <></a>\
<![CDATA[ > <script type=\"text/javascript\">document.write(\"X\")</script> ]]>";

var x = jQuery('<div/>').html(userinput);
var y = x;
document.write(jQuery('<div/>').text(x.html()).html());
document.write("<br/>" + y.html());

Output:

X<a href='javascript:alert("<iframe>")'><embed> \
<object classid="buggy plugin" hostileparams="">\
</object> &lt; &gt; <htmlx> </htmlx></a>\
&lt; &gt; &lt;&gt; <htmz> &lt;&gt;<!--[CDATA[ --> ]]&gt;</htmz>
  < > < > <> <> ]]>

This is weird!