CODEWITHSUNDEEP
javascriptjqueryescapinghtml-entities
jeffcook2150
jeffcook2150

Reputation: 4216

Escaping content for placement with jQuery's .html() function

I need to accept arbitrary user input. Later, I want to copy that input, already escaped to HTML entities, into a textarea so it can be edited. However, jQuery's jQuery.html() function reads out the HTML entities as if they were real HTML and injects the user script directly into the page. I need to grab the contents of the user input, even if it contains <script> tags, and output to a textarea where it can be edited.

So, I need this:

<textarea name="empty"></textarea>
<div name="user-input"> &lt;script&gt; window.alert('hi'); &lt;/script&gt; </div>

to become this:

<textarea name="empty"> &lt;script&gt; window.alert('hi'); &lt;/script&gt; </textarea>
<div name="user-input"> &lt;script&gt; window.alert('hi'); &lt;/script&gt; </div>

on JavaScript trigger. Instead, the textarea becomes:

<textarea name="empty"> <script> window.alert('hi'); </script> </textarea>

displaying an empty text box and injecting the user's JavaScript into the page.

Right now I am getting the contents of user-input and placing them into the textarea like so:

 $('#edit-textarea').html(($('#user-input').text()));

I've tried several variations of this to no avail.

Please see http://jsfiddle.net/vkRkt/8 for a test case.

EDIT:

See discussion below. The solution in my case was to use jquery.val() instead of jquery.html(). I skipped over val because I was under the impression that it was an alias for jquery.attr('value', new_value), which has its own injection issues (can be stopped with a "). val() is not the same as attr('value', val) and appears safe from injection attempts in my brief testing.

If anyone runs across this later and knows that val is actually not a safe way to do this, please answer and update us immediately.

Thanks.

Upvotes: 2

Views: 1240

Answers (1)

kapa
kapa

Reputation: 78691

$('#edit-textarea').val(($('#user-input').text()));

works fine for me. I also tried using .text() instead of .val() and it of course kept the escaping as well. Don't use .html() if you don't want the data to be HTML.

jsFiddle Demo

Upvotes: 1

Related Questions