replace/ encode < and > with jquery/ ajax before submitting

Question

I have the following code which is part of a comment form in a page.

 $.ajax({
    type: "POST",
    url: "path/to/script.php",
    data: $(form).serialize(),
    success: function(data) {
        $('#comment_form').fadeOut(1000);
        var url = 'path/to/script.php';
        $('#commenti').load(url + ' .comment');    
    }
});

On server side all characters like < and > get stripped but i need them to allow displaying code snippets inside the <code></code> tags.

Is there any way with jquery to convert the < to < and > to > before submitting so the comments will display without stripped characters?

Why not do it at the server side? That seems much more easy than stripping them away. — Bergi, Oct 20 '14 at 23:57
I need to do it on client side due to some reasons. Looking for a good solution for ours without success :-( — FF11, Oct 20 '14 at 23:59
What solutions have you found that were not good, and why? This problem doesn't seem to be that complex, or am I missing something? — Bergi, Oct 21 '14 at 00:03
So far i haven't found any solution. If i had found one, i woudn't ask this question. I need to convert the characters before submitting. — FF11, Oct 21 '14 at 00:07
Just take them out of the object that `serialize` returns (you know which fields to encode), then replace the characters you need to replace (e.g. with regex), then set them in the object that you send as data? — Bergi, Oct 21 '14 at 00:11
sanitize on the server upon upload, anyone can send un-escaped garbage by disabling JS, and if that's all you count on, it's an XSS waiting to happen. — dandavis, Oct 21 '14 at 02:02

score 1 · Accepted Answer · answered Oct 21 '14 at 01:16

1

I haven't found any good client side solution yet, so here is a little php-serverside function. For anyone who needs it:

function specialchars($special) {
$replace = array(
'<' => '&lt;',
'>' => '&gt;',
'&' => '&amp;'
 );
return strtr($special, $replace);
}

Use the function specialchars based on your needs.

answered Oct 21 '14 at 01:16

FF11

89
7

If you're doing it on the server side (as you should), why not just use [`htmlspecialchars`](http://php.net/manual/en/function.htmlspecialchars.php)? – Bergi Oct 31 '14 at 14:46

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

0

Try this

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();
}

and take a look at this post HTML-encoding lost when attribute read from input field

edited May 23 '17 at 11:49

Community

1
1

answered Oct 21 '14 at 00:01

Sam Plus Plus

4,381
2
21
43

I've found this post ours ago but i don't know how to integrate it inside the ajax call.. – FF11 Oct 21 '14 at 00:02

Johnny Cache · Answer 3 · 2014-11-02T11:57:29.540

Using jQuery, you can retrieve a string with < and > replaced by html-entities by using this approach.

var text = "<script>alert('I am XSS');<script> This is regular ol' text!";
var escapedText = $('<i>').text(text).html();
// "&lt;script&gt;alert('I am XSS');&lt;script&gt; This is regular ol' text!"

The output might need additional escaping when posting however, due to the ampersands (?querystring=string&string2=...)

I would recommend you escape the <> characters with encodeURIComponent, and do post-processing on the server, like others have suggested previously:

var text = "<script>alert('I am XSS');<script> This is regular ol' text!";
var escapedText = encodeURIComponent(text);
// "%3Cscript%3Ealert('I%20am%20XSS')%3B%3Cscript%3E%20This%20is%20regular%20ol'%20text!"
// post with AJAX

then on the server

echo htmlentities(rawurldecode($_POST["query"]));
// "&lt;script&gt;alert('I am XSS');&lt;script&gt; This is regular ol' text!"

If your app is facing the WWW, you ought to ensure all input is being properly sanitized before being output to users - OWASP Encoding Project and HTML Purifier are worth checking out!

replace/ encode < and > with jquery/ ajax before submitting

3 Answers3