XSS attack not working in textarea tag

Question

I had earlier coded a simple chat application using PHP and AJAX. In that, once a user sends a chat, it first goes to php and from there it is saved in the database. I use AJAX on the client side to query the db at regular intervals for new messages. Those messages I eventually am showing in a .

So in my client side code, I have a recMsg variable which is I have set as

recMsg = recMsg + value['chattime'] + ' <@' + value['chatby'] + '> ' + value['chat'] + '\r\n';

where value is an array with value['chat'] having the actual chat message.

Later I am setting text area as the follows

$('#received').val(recMsg + $('#received').val());

where received is the id of the tag. The code for textarea (when I view the source code in browser) is

<textarea id="received" rows="15" cols="150"></textarea>

Now to try out xss attack, I am entering the following as my chat

</textarea>
<script>
alert("Hi");
</script>
<textarea>

but instead of showing me an alert box, it just shows the full message in the textarea along with the tags (it does not treat any of the tags as special and just treats them as normal text to be displayed). I tried changing the javascript such recMsg was just the chat message, and also tried using .innerHTML but no success.

So my questions are 1) Is the attack failing because I am changing the value of textarea after it has been rendered?

2) Is it possible to carry out an XSS in this way. How can I change the javascript code to enable this attack?

3) Unrelated questions - when I change the DOM element using AJAX and if I view the source, I don't see any change (for example, textarea is still empty after I have received several chats). Any reason why this is the case?

Thanks for your replies

Answer 1

1. Your attack is failing because you are setting the value attribute of the textarea. The browser automatically escapes the characters for you. Think that, when you write on the textarea, writing </textarea> does not close it. Setting the value through javascript is the same.
2. If you want this attack to succeed, you have to change $('#received').val(recMsg + $('#received').val()); for $('#received').html(recMsg + $('#received').html());. This will change the innerHTML property of the textarea. Though I am not sure it would work correctly. You have to try it.
3. The option 'view source code' that browsers have show just what you've downloaded from the server. If you want to see live changes, you need to open their developer tools (usually pressing F12). You'll see an inspector with the entire DOM tree and their style attributes.