Как вставлять разметку в js код, чтоб не было уязвимости XSS?

Question

[Елена]

Мне нужно вставить такую разметку в js код

innerHTML += `
  <div class="song">
    <h4 class="song__artist">${artist.value}</h4>
    <p class="song__title">${song.value}</p>
    <button class="song__like"></button>
  </div>`;

чтоб избежать атаки XSS, могу убрать шаблонную строку и заменить на createElement. Код получится громоздким. Как использовать шаблонную строку, для вставки html разметки?

Comments

[rPman]

как это паттерн использования шаблонов может способствовать XSS? не пихайте в значения полей непроверенное и все будет ок

[Елена]

rPman, как это сделать?

[rPman]

где вы берете artist.value ? там где они устанавливаются там и проверяйте, если artist это поле ввода, замените на вызов validateText(artist.value) и напишите этот метод таким чтобы проверял чтобы в тексте не было html негов

А вообще шаблонизатор не должен вставлять текст как есть, правьте например так

[Елена]

rPman, так это надо создать функцию, которая будет проверять ввели скрипт или текст?

[rPman]

да, изучите что такое XSS с примерами

Answer 1

[Владимир]

Используйте createElement. У innerHTML кроме XSS хватает проблем.

Comments

[Елена]

Поделитесь о проблемах, если не сильно заняты

[Александр]

Elena0394, Посмотрите это.

[Владимир]

Elena0394, Вот этот кусок кода
innerHTML += `
Поразумевает что вы добавляете разметку в уже существующее дерево.
1) Вставить пачку елементов в дерево гораздо дешевле чем рендерить все дерево снова и снова
2) Потенциально вы ставите себе грабли при работе с событиями.

[Елена]

Александр, спасибо, глянула)

Answer 2

[Владимир Солнцев]

Если ваши данные artist.value и song.value контролируемы и вы им доверяете - получаете с бэка или храните на фронте, и никогда они не приходят от пользователя через формы, то делайте как хотите.
Если нет, createElement это один из вариантов. Если он вам кажется громоздким, лишнее всегда можно спрятать в функцию.
Можно хранить шаблоны прям в html, в теге template, брать оттуда, подставлять данные в нужные места и отрисовывать.