Я хочу предотвратить XSS с нашим кодом, проблема в том, что это может потребовать как JS, так и html-экранирования и может быть немного сложным.
Следующий примерный код похож на наш код
<script>
var CURRENT_VALUE = '<img src=1 onerror=alert(1)>';
document.getElementById("valueBox").innerHTML = CURRENT_VALUE;
</script>
предположим, что CURRENT_VALUE вставлен динамически. Итак, что мне делать в этом случае, я знаю, что простая HTML-кодировка может не работать, так как злоумышленник может передать экранированное значение unicode, и он может быть сброшен в документ, когда парсер JS очистит его.
Итак, каков правильный путь,
Должен ли я сначала выполнить JS-экранирование и как раз перед document.getElementbyID выполнить html-экранирование? Как это будет работать?
Предполагая, что CURRENT_VALUE имеет шестнадцатеричное кодирование и содержит /x027img... и так далее
Теперь я думаю, что понимаю, куда вы направляетесь - вставка содержимого в виде TextNode делает некоторое форматирование:
var CURRENT_VALUE = '<img src=1 onerror=alert(1)>';
var node = document.createTextNode(CURRENT_VALUE);
var valueBox = document.getElementById("valueBox");
valueBox.appendChild(node);
console.log(valueBox.innerHTML);
если вы посмотрите на вывод консоли, вставленный HTML теперь:
<img src=1 onerror=alert(1)>
createTextNode
интерпретирует его как значение без экранирования, и все будет хорошо.