jQuery strip HTML all forms

Question

I want to have a generic .js file which, for each form it encounters on a page, on submit, it strips HTML from all textarea, input and select elements. I feel like I'm missing a basic trick.

$("form").each(function() {
    $(this).find(':input')
    if (!isNaN(this.value)) {
        this.value = this.value
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }
});

While it's good to be aware of HTML injection, I would do this server-side as well as it will be much more secure. It's trivial to get around any JS input validation. — Rory McCrossan, Nov 06 '15 at 11:26
Server-side is already accounted for. This is purely to give a more graceful error message. — jacob21, Nov 06 '15 at 11:27

score 3 · Accepted Answer · edited Nov 06 '15 at 11:24

3

You're not doing anything with the return value from .find. this will still refer to the form.

Two things you might want to consider:

Use the descendant combinator to access the fields immediately: $('form :input')
The val setter handles iteration natively

Thus:

$('form :input').val(function() {
   return !isNaN(this.value) ? this.value : this.value.replace( ... );
});

Demo

edited Nov 06 '15 at 11:24

T.J. Crowder

1,031,962
187
1,923
1,875

answered Nov 06 '15 at 11:20

David Hedlund

128,221
31
203
222

Nice one on using `val`'s callback, so often overlooked (including by me). – T.J. Crowder Nov 06 '15 at 11:24

score 0 · Answer 2 · edited May 23 '17 at 12:23

Since you are using jQuery, you may let it do the encoding for you:

function htmlEncode(value){
    //create a in-memory div, set it's inner text(which jQuery automatically encodes)
    //then grab the encoded contents back out.  The div never exists on the page.
    return $('<div/>').text(value).html();
}

function htmlDecode(value){
    return $('<div/>').html(value).text();
}

Then do:

$('form :input').val(function() {
   return this.value = htmlEncode(this.value);
});

Inspired by: https://stackoverflow.com/a/1219983/5528759

See a demo here http://jsfiddle.net/vbwt3828/

Hope it helps

jQuery strip HTML all forms

2 Answers2