XSS уязвимость при использовании innerHTML и функции тега
Допустим, есть функция createElement, которая собирает из html-подобной строки HTML-элемент и подставляет в него значение data, при этом создание элемента происходит в функции тега шаблонной строки tagFunc, где строка разметки и параметр data разделены: элемент создается с помощью innerHTML, а параметр data вставляется в готовый элемент с помощью textContent.
Параметр data при этом может быть чем угодно, в т.ч. результатом пользовательского ввода или частью URL адреса (в общем злоумышленник может запихнуть туда все, что угодно).
Вопрос есть ли здесь XSS уязвимость? Я знаю, что XSS уязвимость точно была бы в случае, если присваивать в innerHTML сразу всю строку с разметкой вместе с параметром. Но с использованием функции тега я что-то не могу определить есть уязвимость или нет. Насколько я понимаю, уязвимости быть не должно, однако мои знания и опыт в этой области не позволяют достоверно это оценить.
function createElement (data) {
return tagFunc`<p>${data}</p>`
}
function tagFunc(strings, data) {
const htmlString = strings.join('');
const container = document.createElement('div');
container.innerHTML = htmlString;
const element = container.children[0];
element.textContent = data;
container.replaceChildren();
return element;
}
document.addEventListener('DOMContentLoaded', () => {
const parent = document.querySelector('.parent');
const element = createElement('hello world');
parent.append(element);
});
<div class="parent"></div>