Javascript 不使用.text（）jQuery显示数据以防止XSS

我使用Ajax调用显示来自和API的数据，这段代码运行良好，但容易使用XSS

<script>
    $(document).ready(function () {
    
     $.ajax({
                url: "api/news/getallnews/1",
                type: "GET",
                dataType: "json",
                success: function (response) {
                    var len = response.data.length;
                    var table = $("<table><tr><th>Details</th></tr>");
                    for (var i = 0; i < len; i++) {
                        table.append("<tr><td>Title:</td><td>" + response.data[i].newsHeading + "</td></tr>");
                    }
                    table.append("</table>");
                    $("#news").html(table);
                }
            });

    });
</script>

我将代码改为使用

.text（）

，但它只显示最后一行数据

        $.ajax({
            url: "api/news/getallnews/1",
            type: "GET",
            dataType: "json",
            success: function (response) {
                var len = response.data.length;
                var table = $("<table><tr><th>Details</th></tr>");
                for (var i = 0; i < len; i++) {
                   table.append("<tr><td>Title:</td><td>");
                   table.append("").text(response.data[i].newsHeading)
                    table.append("</td ></tr > ");

                }
                table.append("</table>");
                $("#news").html(table);
            }
        });

更新 当我改变

$（“#新闻”）.html（表格）至
$（“#新闻”）。文本（表格）我在结果中得到
[object object]
，但在控制台中没有错误

我如何保护我的代码免受XSS攻击，或者为上面的代码编写代码的最佳方法是什么

JSON数据

{
   "data":[
      {
         "newsID":2111,
         "newsHeading":"Test",
         "newsBrief":"Test",
         "newsDetails":"\u003Cp\u003ETest\u003C/p\u003E\r\n",
         "newsDate":"2020-06-29T00:00:00",
         "newsHijriDate":null,
         "languageID":1,
         "newsActive":true,
         "newsVisible":true,
         "newsImage":"2020-28-30_8f4f7063-3bd3-4513-8e94-de73499a6fde_crp.jpg",
         "newsUpdatedOn":null,
         "newsCreatedOn":null,
         "newsCaption":"Test"
      
},
      {
         "newsID":2110,
         "newsHeading":"Test Title Insert",
         "newsBrief":"Test Title Insert",
         "newsDetails":null,
         "newsDate":"2020-06-24T00:00:00",
         "newsHijriDate":null,
         "languageID":1,
         "newsActive":true,
         "newsVisible":true,
         "newsImage":"3433f2b1-fa86-4cef-8066-43c371b10594_3701-M3BED-ENTRANCE (2)_crp.jpg",
         "newsUpdatedOn":null,
         "newsCreatedOn":null,
         "newsCaption":"Test Title Insert"
      
},
      {
         "newsID":2109,
         "newsHeading":"Test Title Insert",
         "newsBrief":"sadf",
         "newsDetails":"\u003Cp\u003Easdf\u003C/p\u003E\r\n",
         "newsDate":"2020-04-30T00:00:00",
         "newsHijriDate":null,
         "languageID":1,
         "newsActive":true,
         "newsVisible":true,
         "newsImage":"9789bdc2-e12c-4502-9848-458ae31a2447_majlis_crp.jpg",
         "newsUpdatedOn":null,
         "newsCreatedOn":null,
         "newsCaption":"asdf"
      
},
      {
         "newsID":2079,
         "newsHeading":"fghdfghdfg",
         "newsBrief":"dfghdfgh",
         "newsDetails":null,
         "newsDate":"2020-04-30T00:00:00",
         "newsHijriDate":null,
         "languageID":1,
         "newsActive":true,
         "newsVisible":true,
         "newsImage":"99de83e0-8536-4691-b2b8-895bb0c055ce_forestbridge.jpg",
         "newsUpdatedOn":null,
         "newsCreatedOn":null,
         "newsCaption":"dfghdfghfgh"
      
},
      {
         "newsID":2083,
         "newsHeading":"tttt",
         "newsBrief":"ttttt",
         "newsDetails":"\u003Cp\u003Etttttt\u003C/p\u003E\r\n",
         "newsDate":"2020-04-27T00:00:00",
         "newsHijriDate":null,
         "languageID":1,
         "newsActive":true,
         "newsVisible":true,
         "newsImage":"218f3087-e53f-4bed-8579-c40f356ab407_ttt.jpg",
         "newsUpdatedOn":null,
         "newsCreatedOn":null,
         "newsCaption":null
      
},
      {
         "newsID":2091,
         "newsHeading":"sret",
         "newsBrief":"wert",
         "newsDetails":"\u003Cp\u003Ewert\u003C/p\u003E\r\n",
         "newsDate":"2020-04-23T00:00:00",
         "newsHijriDate":null,
         "languageID":1,
         "newsActive":true,
         "newsVisible":true,
         "newsImage":"390c140c-6b27-492c-989b-fed110e52c99_Shadow PP _0767.jpg",
         "newsUpdatedOn":null,
         "newsCreatedOn":null,
         "newsCaption":null
      
}
   
]
}

不能使用任何方法、jQuery或appendChild将部分元素插入DOM。因此，可以附加的最小实体是单元格或单元格中的跨距

您不能使用DOM解析将html呈现为文本，除非像我在这里所做的那样将其作为textContent或.text（）或文本属性插入


const response={“data”：[{“newsID”：2111，“newsHeading”：“使用危险标签测试”，“newsBrief”：“测试”，“newsDetails”：“\u003Cp\u003ETest\u003C/p\u003E\r\n”，“newsDate”：“2020-06-29T00:00:00”，“newsHijriDate”：null，“languageID”：1，“newsActive”：true，“newsVisible”：true，“newsImage”：“2020-28-30-8F47063-4513-8e94-DE73499AFDE”，“NewsUpdateOn”：null，“newsCreatedOn”：null，“newsCaption”：“Test”}，{“newsID”：2110，“newsHeading”：“Test Title Insert”，“newsBrief”：“Test Title Insert”，“newsDetails”：null，“newsHijriDate”：null，“languageID”：1，“newsActive”：true，“newsVisible”：true，“newsImage”：3433f2b1-fa86-4cef-8066-43c371b10594_3701-M3BED-Entry（2）_crp.jpg，“newsUpdatedOn”：null，“newsCreatedOn”：null，“newsCaption”：“测试标题插入”}，{“newsID”：2109，“newsHeading”：“测试标题插入”，“新闻简报”：“sadf”，“newsDetails”：“\u003Cp\u003Easdf\u003C/p\u003E\r\n”，“newsDate”：“2020-04-30T00:00:00”，“newsHijriDate”：null，“languageID”：1，”newsActive:true，“newsVisible”：true，“newsImage”：“9789bdc2-e12c-4502-9848-458ae31a2447_majlis_crp.jpg”，“newsUpdatedOn”：null，“newsCreatedOn”：null，“newsCaption”：“asdf”}，{“newsID”：2079，“newsHeading”：“fghdfg”，“newsDetails”：null，“newsDate”：“2020-04-30T00:00:00”，“newsHijriDate”：null，“languageID”：1，“newsActive”“：true，“newsVisible”：true，“newsImage”：“99de83e0-8536-4691-b2b8-895bb0c055ce_forestbridge.jpg”，“newsUpdatedOn”：null，“newsCreatedOn”：null，“newsCaption”：“dfghdfghfgh”}，{“newsID”：2083，“newsHeading”：“tttt”，“newsBrief”：“TTT”，“newsDetails”：“\u003Cp\u003TTTT\u003C/p\u003E\r\n”，“newsDate”：“2020-04-27T00:00”，“newsHijriDate”：”，“languageID”：1，“newsActive”：true，“newsVisible”：true，“newsImage”：“218f3087-e53f-4bed-8579-c40f356ab407_ttt.jpg”，“newsUpdatedOn”：null，“newsCreatedOn”：null，“newsCaption”：null}，{“newsID”：2091，“newsHeading”：“sret”，“newsBrief”：“wert”，“newsDetails”：“\u003Cp\u003Ewert\u003C/p\u003E\r\n”，“newsDate”：“2020-04-23T00:00:00”，“newsHijriDate”：null，”languageID“：1，“newsActive”：true，“newsVisible”：true，“newsImage”：“390c140c-6b27-492c-989b-fed110e52c99_Shadow PP_0767.jpg”，“newsUpdatedOn”：null，“newsCreatedOn”：null，“newsCaption”：null}”
var$表=$（“详细信息”）；
常量$tbody=$（“”）；
response.data.forEach（项=>{
const$row=$（“标题：”）；
const$cell=$（“”，{//创建一个单元格并将新闻标题添加为textcontent
text:item.newheading
});
$row.append（$cell）；
$tbody.append（$row）；
});
$table.append（$tbody）；
$（“#新闻”）.html（$table）
您可以尝试下面的代码。这将对您有所帮助

success: function (response) {
    var len = response.data.length;
    var table = $("<table><tr><th>Details</th></tr>");
    for (var i = 0; i < len; i++) {
        table.append('<tr class="row'+i+'"><td>Title:</td><td class="content"></td></tr>');
        $('tr.row'+i+' .content').text(response.data[i].newsHeading);
    }
    table.append("</table>");
    $("#news").html(table);
}

成功：功能（响应）{
var len=response.data.length；
var表=$（“详细信息”）；
对于（变量i=0；i
它不显示任何数据..也不显示任何错误console@student假设您的数据看起来像我在问题中发布的示例jSON数据，我希望这是完美的。我的代码与您的数据完美配合。您更新的代码中有控制台错误吗？@mpungjan，是的，这段代码正在工作，也没有执行HTML I mean它从XSS解码html。我会将问题标记为正确，但您是否可以添加有关您的方法的详细信息，以便其他人也可以理解您以这种方式执行此操作的原因。将html字符替换为html实体。to等等。
{
   "data":[
      {
         "newsID":2111,
         "newsHeading":"Test",
         "newsBrief":"Test",
         "newsDetails":"\u003Cp\u003ETest\u003C/p\u003E\r\n",
         "newsDate":"2020-06-29T00:00:00",
         "newsHijriDate":null,
         "languageID":1,
         "newsActive":true,
         "newsVisible":true,
         "newsImage":"2020-28-30_8f4f7063-3bd3-4513-8e94-de73499a6fde_crp.jpg",
         "newsUpdatedOn":null,
         "newsCreatedOn":null,
         "newsCaption":"Test"
      
},
      {
         "newsID":2110,
         "newsHeading":"Test Title Insert",
         "newsBrief":"Test Title Insert",
         "newsDetails":null,
         "newsDate":"2020-06-24T00:00:00",
         "newsHijriDate":null,
         "languageID":1,
         "newsActive":true,
         "newsVisible":true,
         "newsImage":"3433f2b1-fa86-4cef-8066-43c371b10594_3701-M3BED-ENTRANCE (2)_crp.jpg",
         "newsUpdatedOn":null,
         "newsCreatedOn":null,
         "newsCaption":"Test Title Insert"
      
},
      {
         "newsID":2109,
         "newsHeading":"Test Title Insert",
         "newsBrief":"sadf",
         "newsDetails":"\u003Cp\u003Easdf\u003C/p\u003E\r\n",
         "newsDate":"2020-04-30T00:00:00",
         "newsHijriDate":null,
         "languageID":1,
         "newsActive":true,
         "newsVisible":true,
         "newsImage":"9789bdc2-e12c-4502-9848-458ae31a2447_majlis_crp.jpg",
         "newsUpdatedOn":null,
         "newsCreatedOn":null,
         "newsCaption":"asdf"
      
},
      {
         "newsID":2079,
         "newsHeading":"fghdfghdfg",
         "newsBrief":"dfghdfgh",
         "newsDetails":null,
         "newsDate":"2020-04-30T00:00:00",
         "newsHijriDate":null,
         "languageID":1,
         "newsActive":true,
         "newsVisible":true,
         "newsImage":"99de83e0-8536-4691-b2b8-895bb0c055ce_forestbridge.jpg",
         "newsUpdatedOn":null,
         "newsCreatedOn":null,
         "newsCaption":"dfghdfghfgh"
      
},
      {
         "newsID":2083,
         "newsHeading":"tttt",
         "newsBrief":"ttttt",
         "newsDetails":"\u003Cp\u003Etttttt\u003C/p\u003E\r\n",
         "newsDate":"2020-04-27T00:00:00",
         "newsHijriDate":null,
         "languageID":1,
         "newsActive":true,
         "newsVisible":true,
         "newsImage":"218f3087-e53f-4bed-8579-c40f356ab407_ttt.jpg",
         "newsUpdatedOn":null,
         "newsCreatedOn":null,
         "newsCaption":null
      
},
      {
         "newsID":2091,
         "newsHeading":"sret",
         "newsBrief":"wert",
         "newsDetails":"\u003Cp\u003Ewert\u003C/p\u003E\r\n",
         "newsDate":"2020-04-23T00:00:00",
         "newsHijriDate":null,
         "languageID":1,
         "newsActive":true,
         "newsVisible":true,
         "newsImage":"390c140c-6b27-492c-989b-fed110e52c99_Shadow PP _0767.jpg",
         "newsUpdatedOn":null,
         "newsCreatedOn":null,
         "newsCaption":null
      
}
   
]
}

success: function (response) {
    var len = response.data.length;
    var table = $("<table><tr><th>Details</th></tr>");
    for (var i = 0; i < len; i++) {
        table.append('<tr class="row'+i+'"><td>Title:</td><td class="content"></td></tr>');
        $('tr.row'+i+' .content').text(response.data[i].newsHeading);
    }
    table.append("</table>");
    $("#news").html(table);
}