Question

I had a text box in my browser. Whatever you typed in the text box and clicked on okay button, the text submitted server through a AJAX request and then spread that message to remaining people, including to me also.

The message is appeared on a <div>.

What’s my problem is if I typed html or script tags in that message they are not appearing in the message <div> and they are executing .

If I typed like tags opened and end with script in that middle code is executing on client side, how can I prevent executing and I am able to spread <script> tags also in the messages spreading to all.

Answer 1

If you want the text to always be text, treat is as text and don’t use it to set innerHTML property for example.

Update text nodes instead.

Update

For example, if you had user input in userInput, and you wanted to display it, you would treat it as text, not HTML.

var element = document.body,
    // For example
    userInput = "Alex <script>alert('xss')</script>";

// Don't do this! Your input is text, not HTML.
// element.innerHTML = userInput;

// Use this instead
if ('textContent' in element) {
    element.textContent = userInput;
} else {
    element.innerText = userInput;
}

jsFiddle.