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

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" ></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.

CodePudding user response：

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>');
});