Question posted in 
I am displaying data from and API using Ajax call, this code works fine but is prone to 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>
Output:
Title: Article Title 1
Title: Article Title 2
Title: Article Title 3
Title: Article Title 4
Title: Article Title 5
I changed code to use .text() but it only display last row data
$.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);
}
});
Output of this code only show last row
Title: Article Title 5
Update
When i change $("#news").html(table); to $("#news").text(table); i get [object Object] in result but no errors in console.
How can i protect my code from XSS or what is teh best way to write code for above
JSON Data
{
"data":[
{
"newsID":2111,
"newsHeading":"Test",
"newsBrief":"Test",
"newsDetails":"u003Cpu003ETestu003C/pu003Ern",
"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":"u003Cpu003Easdfu003C/pu003Ern",
"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":"u003Cpu003Ettttttu003C/pu003Ern",
"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":"u003Cpu003Ewertu003C/pu003Ern",
"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
}
]
}
2
Answers
You cannot insert partial elements into the DOM using any methods, jQuery or appendChild. So the smallest entity you can append is a cell or a span in the cell.
You cannot render html as text using DOM parsing unless you insert it as textContent or .text() or as text attribute like I do here
You can try this below code. this will help you.