JQuery атрибуты HTML с HTML? - PullRequest
Новая
       12

JQuery атрибуты HTML с HTML?

1 голос
/ 04 мая 2019

Я использую jQuery, чтобы убедиться, что мои пользователи не могут выполнять javascript через мое приложение чата. Вот как я добавляю данные, полученные с сервера WebSocket, к пользователям: 

obj = JSON.parse(e.data);

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

Это прекрасно работает и, похоже, помогает избежать всех XSS-атак, но вот моя проблема. Я хочу сделать obj.username жирным шрифтом, но я понятия не имею, как это сделать, поскольку все после text: становится текстом. Очень рад за любую помощь в этом!

Ответы [ 2 ]

2 голосов
/ 04 мая 2019

Установить HTML-содержимое с обернутым элементом span, где вы можете конвертировать текст, используя временный элемент. 

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>
0 голосов
/ 04 мая 2019

Тогда вы можете использовать другой способ: - 

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

См. Фрагмент ниже: - 

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