Как мне защитить от XSS / Injection при использовании jquery.append?

Question

Я создаю редактор кода javascript для пользователей на моем сайте.Одной из особенностей, которые я создал, была пользовательская консоль.Пользователи могут написать console.log в своем коде, и записанная строка добавляется в div на странице, делая что-то вроде этого:

  function toConsole(str) {
    var myconsole = document.getElementById("console-text");

    var message = document.createElement("span");
    message.append(str);

    myconsole.append(message);
}

str устанавливается на любую строку, которую пользователь вводит в console.log,Может ли добавление этой строки запустить вредоносный код на моей странице?( .append () Страница API jQuery говорит «да», но я не могу понять, что она интерпретирует все, что я пишу как html)

Если так, как я могу предотвратить это иКак я могу проверить, чтобы убедиться, что это безопасно?

Answer 1

Как сказал Таплар, есть разные пути. Вы также можете добавить HTML-код к временному тегу и затем извлечь текст. Смотрите мой третий пример, чтобы сделать это.

$(function() {
  var stringContainingHtmlAndJavascript = '<div><b>This will be bold</b></div>';

  $('.test1').append(stringContainingHtmlAndJavascript);
  $('.test2').text(stringContainingHtmlAndJavascript);
  $('.test3').text($('<i/>').append(stringContainingHtmlAndJavascript).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>

Answer 2

Я предложу вам .parseHTML() с bemol , как указано в документации.

.parseHTML(), как следует из названия метода, анализируетстрока для интерпретации HTML.
Третий аргумент keepScripts по умолчанию равен false ... Если установить значение true, откроются широкие ворота для сценариев.

Так что "обычно удаляет" теги сценария.Если HTML или текст вообще не найден, возвращается undefined (как в демонстрационном случае № 3).Таким образом, вам, вероятно, потребуется добавить условие if, чтобы избежать добавления текста "undefined" .

Итак ... В приведенной ниже демонстрации я использовал сценарий "опубликовал", чтобы добавить"вполне как есть ... Я только что добавил метод разбора HTML.

ВАЖНО , случаи с 1 по 4 безопасны ... Но # 5 - это нарушение.Если в проанализированном HTML есть встроенный атрибут [event], он будет проходить через «скрипт-фильтр» и может выполняться.

$(".console_ok").on("click",function(){
  toConsole( $(this).prev(".console_input").val() );
});

function toConsole(str) {

  str = $.parseHTML(str)[0];

  var myconsole = document.getElementById("console-text");
  var message = document.createElement("span");
  message.append(str);

  myconsole.append(message);
}

input{
  width: 60em;
}
#console-text{
  height:8em;
  width:20em;
  background-color: #bbb;
  border: 1px solid black;
}

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

console.log test #1:<input class="console_input" value="Just text">
<button class="console_ok">OK</button><br>
<br>
console.log test #2:<input class="console_input" value="<h1>Some HTML</h1>">
<button class="console_ok">OK</button><br>
<br>
console.log test #3:<input class="console_input" value="<script>alert('A script!!!');</script>">
<button class="console_ok">OK</button><br>
<br>
console.log test #4:<input class="console_input" value="<div style='height:20px;background-color:red;'><script>alert('A script!!!');</script>And some <b>bold</b> text...</div>">
<button class="console_ok">OK</button><br>
<br>
console.log test #5:<input class="console_input" value="<img src='invalid-path' onerror='alert(`JS EXECUTES HERE!!!`);'>">
<button class="console_ok">OK</button><br>
<br>

My console:<br>
<div id="console-text"></div>

(Пожалуйста, запустите в режиме полной страницы)
CodePen

Вы заметите [0] после $.parseHTML(str) ... Это для получения элемента DOM из объекта jQuery, так как ваша функция - простой JS.Ваша функция может быть написана так же (делает то же самое) :

function toConsole(str) {

  str = $.parseHTML(str);

  var myconsole = $("#console-text");
  var message = $("<span>");
  message.append(str);

  myconsole.append(message);
}

Answer 3

Вы можете использовать text () для вставки содержимого в качестве textNode, что приведет к тому, что оно будет отображаться не страницей как разметка, а простым текстом.

var stringContainingHtmlAndJavascript = '<div><b>This will be bold</b></div>';

$(document.body).text(stringContainingHtmlAndJavascript);
$(document.body).append(stringContainingHtmlAndJavascript);

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