Использование Javascript для добавления созданных пользователей текста в DOM как есть без использования белого списка или черного списка

Question

В настоящее время моего кода (использует JQuery) выглядит примерно так и полностью уязвимо для XSS:

$.get('/api-endpoint', (data) => { 
    $('body').html(`Body text: ${data['text']}`) 
} 

Я не» t хотите установить черный список, белый список или внешнюю библиотеку. Идеальное решение было бы простым однострочным, в котором Javascript просто добавляет data['text'], не интерпретируя что-либо внутри него.

---

Edit: Второй случай, немного сложнее:

$.get('/api-endpoint', (data) => { 
    $('body').html(`<h1>Body text:</h1><br>${data['text']}`) 
} 

Answer 1

Simple. Не относитесь к нему как к HTML, рассматривайте его как текст.

Основой DOM API для обработки строки как текста является textContent, в отличие от innerHTML, который обрабатывал бы его, как HTML. В jQuery метод .text обертывает этот API.

$('body').text(`Body text: ${data['text']}`) 

Не использовать метод .html. Он обертывает API innerHTML с дополнительным кодом для обеспечения выполнения сценариев.

---

Для более сложного случая создайте свои элементы DOM и установите текстовое содержимое на нужном элементе. Или, как в вашем коде, если ни один элемент не обертывает ваш текст, используйте document.createTextNode, чтобы создать текстовый узел и добавить его.

$('body') 
    .empty() 
    .append(
     $('<h1>Body text:</h1>'), 
     $('<br>'), 
     document.createTextNode(data['text']) 
    ) 

Working Example