Jquery escapes "<" " >"

Question

I have a textarea. On its click event. I am inserting it in DB and then displaying it as first element in element list. The problem is. If I enter "<afasd>" in textarea, jquery does not display it properly. it displays it empty. The Code is

var note = $.trim( $('#rep_notes_add_notes').val());
    if(note == "")
    return false;
    $.ajax({
                url: 'include/tre.ajax.php',
                type: 'POST',
                data: {
                    action: 'insert',
                    note: note
                    },
                dataType: 'json',
                success: function(data) {
                    jQuery("#rep_notes_add_notes").val('');
                    jQuery(".no_notes").remove();
                    *$(".notes:eq(0)").before('<div class="notes">'+note+'<div class="note-added"> Added by  '+user +'<span> on </span>'+data.update_time+'</div></div>');*
                }
            });

The line marked as * finds notes div and then insert one element before it to display new entered text.

Could some one help me to resolve this?

So when you're saying that it escapes, you actually mean that it **doesn't** escape but outputs the text exactly how you requested it to. — h2ooooooo, May 06 '14 at 17:52
For example If I enter it output nothing. if I enter >, output is > — kayra, May 06 '14 at 17:55
@kayra, if you use the DOM inspector in your browsers dev tools you will find that the `` element is there as an HTMLUnknownElement. — zzzzBov, May 06 '14 at 17:56
jQuery isn't doing anything special with the note text. It's just being included in a string of HTML, where `<` and `>` are reserved characters. They need to be escaped/encoded, and it's the lack of that occurring that's the problem. See "[HTML-encoding in JavaScript/jQuery](http://stackoverflow.com/questions/1219860/html-encoding-in-javascript-jquery)." — Jonathan Lonowski, May 06 '14 at 17:56
You might be looking for [PHPJS's `htmlspecialchars` function](http://phpjs.org/functions/htmlspecialchars/). — h2ooooooo, May 06 '14 at 17:56
possible duplicate of [Escaping HTML strings with jQuery](http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery) — epascarello, May 06 '14 at 18:02

score 3 · Accepted Answer · answered May 06 '14 at 17:55

3

It does not display it because it thinks that <afasd> is a tag, not text. You need to change the < to < to display it.

var str = "<afasd>";
var escaped = str.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");

answered May 06 '14 at 17:55

epascarello

204,599
20
195
236

2

This does not handle all of the entities that needs to be escaped. – Brad May 06 '14 at 17:57
@kayra See my answer for the proper way to do this. While you could manually escape everything, it isn't necessary if you set the text, rather than the HTML. – Brad May 06 '14 at 18:00

score 3 · Answer 2 · answered May 06 '14 at 17:57

Don't concatenate arbitrary data into HTML. You're opening yourself up to injection problems, and issues with invalid HTML as you are seeing. This line:

$(".notes:eq(0)").before('<div class="notes">'+note+'<div class="note-added"> Added by  '+user +'<span> on </span>'+data.update_time+'</div></div>');

Should become something like this (untested, unfinished, but you get the idea):

$('.notes:eq(0)').before(
    $('<div>').addClass('notes').text('Added by ' + user)
);

The point is, use the .text() if you want to set the text, not the HTML.

Jquery escapes "<" " >"

2 Answers2