jQuery html attributes with HTML?

Question

I'm using jQuery to make sure that my users can't execute javascript through my chat app. This is how I append the data that I get from WebSocket server to the users:

obj = JSON.parse(e.data);

    $("<li>", {
        class: "list-group-item",
        text: obj.username + ": " + obj.message
    }).prependTo('#chatlog');

This works great, and seems to escape all XSS attacks, but here's my problem. I want to make obj.username bold, but I have no idea how to go about doing that since everything after text: becomes text. Very happy for any help on this!

You can create two span in li and pass values separately in both span using text — Bhavik
– Bhavik, Commented May 4, 2019 at 11:10

Pranav C Balan · Accepted Answer · 2019-05-04 11:38:04Z

2

Set HTML content with span wrapped element where you can convert text by using a temporary element.

const escape = txt => $('<div/>').text(txt).html()    

$("<li>", {
  class: "list-group-item",
  html: '<span style="font-weight:bold">' + escape(obj.username) + "</span>: " + escape(obj.message)
}).prependTo('#chatlog');

const obj = {
  username: 'John Doe',
  message: 'Hi!<script>djsjdk<\/script>'
};

const escape = txt => $('<div/>').text(txt).html();

console.log(escape(obj.message));

$("<li>", {
  class: "list-group-item",
  html: '<span style="font-weight:bold">' + escape(obj.username) + "</span>: " + escape(obj.message)
}).prependTo('#chatlog');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="chatlog"></ul>

Or alternatively, you can create a span using jQuery and for message create a text node.

$("<li>", {
  class: "list-group-item",
  html: [
    $('<span>', {
      css: {
        fontWeight: 'bold'
      },
      text: obj.username
    }),
    document.createTextNode(': ' + obj.message)
  ]
}).prependTo('#chatlog');

const obj = {
  username: 'John Doe',
  message: 'Hi!<script>djsjdk<\/script>'
};


$("<li>", {
  class: "list-group-item",
  html: [
    $('<span>', {
      css: {
        fontWeight: 'bold'
      },
      text: obj.username
    }),
    document.createTextNode(': ' + obj.message)
  ]
}).prependTo('#chatlog');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="chatlog"></ul>

edited May 4, 2019 at 11:38

answered May 4, 2019 at 11:01

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

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

1 Comment

Georgeios_lavei Over a year ago

Bold part works, but this made scripting possible through obj.message !

Rohit Sharma · Accepted Answer · 2019-05-09 18:37:33Z

0

Then you can use another way:-

$("<li>", {
  class: "list-group-item",
}).append($('<span>', {
  class: 'font-weight-bold',
  text: obj.username
})).append($('<span>', {
  text: `: ${obj.message}`
})).prependTo('#chatlog');

See the snippet below:-

const obj = {
  username: 'John Doe',
  message: 'Hi!'
};

$("<li>", {
  class: "list-group-item",
}).append($('<span>', {
  class: 'font-weight-bold',
  text: obj.username
})).append($('<span>', {
  text: `: ${obj.message}`
})).prependTo('#chatlog');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class="list-group" id="chatlog"></ul>

edited May 9, 2019 at 18:37

answered May 4, 2019 at 11:15

Rohit Sharma

3,3442 gold badges21 silver badges39 bronze badges

1 Comment

Georgeios_lavei Over a year ago

Works, but allows for XSS if obj.message contains javascript. What I need to do is make the obj.message TEXT but I guess obj.username need to be HTML in order to be bold

Collectives™ on Stack Overflow

jQuery html attributes with HTML?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related