Javascript/Html: appending to section as text not html code

Question

I have a web app for chatting and when someone would send something it'd send the message to everyone by appending that text to the chat section element but if they typed code in there it would output the code and run it which is a problem as that is dangerous which I want to fix but not sure how to.

socket.on('message', function (data) {
  $('.chat').append('<p><strong style=color:'+data.color+'> ' + data.user + '</strong> <span style=color:"black">' + data.message + '</span></p>');
});

<div id="maindiv1"> 
  <section id="chatSection" class="chat"></section>
</div>

So if I put:

<h1> hello </h1>

It would make that element for all users in chat or like location.assign("https://google.com") would make it go to google for all users which I don't want i'd want it to send whatever as text not code but still be able to have the functionality of adding stuff like

<p><strong style=color:'+data.color+'> ' + data.user + '</strong> <span style=color:"black">' + data.message + '</span></p>

...for only when its sent and not the message which is data.message.

Possible duplicate: [html() vs innerHTML jquery/javascript & XSS attacks](https://stackoverflow.com/questions/8318581/html-vs-innerhtml-jquery-javascript-xss-attacks) — Alexander Nied, Apr 27 '22 at 16:29
If I set the html content then it will still do it I need some way to add this one part of it as text and not html code innerHTML still writes it as code if I injected code — moie, Apr 27 '22 at 16:31
possible dupliacte: https://stackoverflow.com/questions/20855482/preventing-html-and-script-injections-in-javascript — Guy Nachshon, Apr 27 '22 at 16:32
I found those helpful just I need a way now to convert the data.message which is what the user sends to turn that into plain text and then it'd send that variable instead of the data which could include injected code — moie, Apr 27 '22 at 16:35

score 0 · Accepted Answer · answered Apr 27 '22 at 16:44

Just encode the text message before. Try this:

socket.on('message', function (data) {

var securedText = $('<div/>').text(data.message).html();
  $('.chat').append('<p><strong style=color:'+data.color+'> ' + data.user + '</strong> <span style=color:"black">' + securedText + '</span></p>');
});

Javascript/Html: appending to section as text not html code

1 Answers1