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

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 — Alexander Nied
– Alexander Nied, Commented Apr 27, 2022 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
– moie, Commented Apr 27, 2022 at 16:31
possible dupliacte: stackoverflow.com/questions/20855482/… — Guy Nachshon
– Guy Nachshon, Commented Apr 27, 2022 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
– moie, Commented Apr 27, 2022 at 16:35

Hans Murangaza DRCongo · Accepted Answer · 2022-04-27 16:44:48Z

0

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

answered Apr 27, 2022 at 16:44

Hans Murangaza DRCongo

8707 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related