由于 XSS 漏洞，我如何将此 innerhtml 循环转换为 innertext 循环？

Question

我需要将此循环转换为带有动态添加内容的内部文本我该怎么做我在互联网上查找但找不到任何内容？

function showMessages(messages) {

    jsonMessages.innerHTML = "<tr><th>Naam</th><th>Bericht</th><th>Datum</th></tr>";

        messages.sort(function (a, b) {
            return a.created_at > b.created_at ? 1 : -1;
        });
        for (var i = 0; i < messages.length; i++) {
            jsonMessages.innerHTML +=  `<tr><td>${messages[i].user_id}</td><td>${messages[i].content.replace(/</g,"&lt;")}</td><td>${messages[i].created_at}</td></tr>`;
        }
    console.log(messages);
}

Answer 1

要通过使用 innerText 而不是任意将 innerHTML 设置为某些未知代码来更改您的代码以防止 xss，您需要先自己创建元素然后设置它们的内容

比如

//create a tr element
tr = document.createElement('tr');
//create new cell for above tr
td = tr.insertCell();
td.innerText = messages[i].user_id;

您可以对所有具有动态内容的元素执行此操作。因此，在您的情况下，您可以执行以下操作

for (var i = 0; i < messages.length; i++) {
  let tr = document.createElement('tr');
  let userIdCell = tr.insertCell();
  let contentCell = tr.insertCell();
  let dateCell = tr.insertCell();
  userIdCell.innerText = messages[i].user_id;
  contentCell = messages[i].content;
  dateCell = messages[i].created_at;

  //finally add it to your table
  jsonMessages.appendChild(tr);
}

还有其他路由可以做同样的事情，比如将 html 结构的空白字符串放入元素中，然后 select 元素并设置它们：

let tr = document.createElement('tr');
tr.innerHTML = `<tr><td></td><td></td><td></td></tr>`;
//first td child
tr.children[0] = messages[i].user_id;
//second td child
tr.children[1] = messages[i].content;
//third td child
tr.children[2] = messages[i].created_id;

这完全取决于您的个人喜好。要点是先创建元素，然后设置它们的 innerText 属性而不是将整个 html 设置为一个。

Answer 2

function showMessages(messages) {

    jsonMessages.innerHTML = "<tr><th>Naam</th><th>Bericht</th><th>Datum</th></tr>";

        messages.sort(function (a, b) {
            return a.created_at > b.created_at ? 1 : -1;
        });

        for (var i = 0; i < messages.length; i++) {

           var mainTr = document.createElement('tr');
           var td1 = document.createElement('td').appendChild(document.createTextNode(messages[i].user_id));
           var td2 = document.createElement('td').appendChild(document.createTextNode(messages[i].content.replace(/</g,"&lt;")));;
           var td3 = document.createElement('td').appendChild(document.createTextNode(messages[i].created_at));

           mainTr.appendChild(td1);
           mainTr.appendChild(td2);
           mainTr.appendChild(td3);

           jsonMessages.appendChild(mainTr);

        }
    console.log(messages);
}

由于 XSS 漏洞，我如何将此 innerhtml 循环转换为 innertext 循环？

How can I convert this innerhtml loop to a innertext one because XSS vulnerabilities?

html

javascript

loops

innerhtml