javascript - 带有 HTML 的 jQuery html 属性？

Question

我正在使用 jQuery 来确保我的用户无法通过我的聊天应用程序执行 javascript。这就是我将从 WebSocket 服务器获取的数据附加到用户的方式:

obj = JSON.parse(e.data);

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

这很好用，似乎可以逃避所有 XSS 攻击，但这是我的问题。我想将 obj.username 设为粗体，但我不知道该怎么做，因为 text: 之后的所有内容都变成了文本。非常高兴能为此提供任何帮助!

Answer 1

使用 span 包装元素设置 HTML 内容，您可以在其中使用临时元素转换文本。

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>

或者，您可以使用 jQuery 创建一个跨度，并为消息创建一个文本节点。

$("<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>