Question

I am making a form with an keyup() event: every character the user types is immediately displayed into another div on the same page.

It’s vulnerable to XSS. How can I secure it using jQuery?

Note: In my forms, I am using latin alphanumeric characters only, as well as commas, semi-colons, colons.

I have searched the “Reform” tool from OWASP but is there a way that’s better?

Thanks in advance. Regards

Answer 1

With the few details available: remember that you don’t have to use jQuery’s HTML “parsing” for everything. Instead of using .html(), use DOM manipulations and .text() (which are also usually faster). For example, this:

$('#result').html('<span class="whatever">' + someInput + '</span>');

would become this:

$('#result').text($('<span>').addClass('whatever').text(someInput));

---

If that’s not possible, you can also do flawless HTML escaping by setting with .text() and then fetching it with .html(). For example, this:

var data = 'This text: **is bold**';

$('#result').html(data.replace(/\*\*(.+?)\*\*/g, '<b>$1</b>'));

would become this:

var data = 'This text: **is bold**';

$('#result').html(data.replace(/\*\*(.+?)\*\*/g, function(x) {
    return '<b>' + $('<div>').text(x).html() + '</b>';
}));