.text() jQuery 不显示数据以防止 XSS

Question

我正在使用 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>

输出：

Title:  Article Title 1
Title:  Article Title 2
Title:  Article Title 3
Title:  Article Title 4
Title:  Article Title 5

我更改了代码以使用 .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);
            }
        });

此代码的输出只显示最后一行

Title:  Article Title 5

更新当我将 $("#news").html(table); 更改为 $("#news").text(table); 时，我得到 [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
      
}
   
]
}

Answer 1

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

您无法使用 DOM 解析将 html 呈现为文本，除非您将其作为 textContent 或 .text() 或文本属性插入，就像我在此处所做的那样

const response = { "data":[ { "newsID":2111, "newsHeading":"Test with <xss>dangerous tags</xss>", "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 } ] }

var $table = $("<table><thead><tr><th>Details</th></tr></thead></table>");
const $tbody = $("<tbody/>");
response.data.forEach(item => {
  const $row = $("<tr><td>Title:</td></tr>");
  const $cell = $("<td/>", { // create a cell and add the newsHeading as textcontent
    text: item.newsHeading
  });
  $row.append($cell);
  $tbody.append($row);
});
$table.append($tbody);
$("#news").html($table)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="news"></div>

Answer 2

您可以试试下面的代码。这对你有帮助。

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);
}

.text() jQuery 不显示数据以防止 XSS

Data not displaying with .text() jQuery to protect against XSS

javascript

jquery

ajax

xss