这个 json 对 XSS 安全吗

Question

您好，我一直在为一堆 div 创建一个排序函数。为了让它工作，我使用每个 div 的数据属性。要将属性放入 div 我一直在使用 javascript 循环。我从一个 php 页面获取数据，在该页面中，我使用 json_encode 返回变量“peoplelist”中的数据，如下所示（尽管可能有 1000 条记录）。我已经去掉了除 A-z 和数字之外的所有字符，并用 _ 替换它们（这是为了让排序系统正常工作）

[{
    "idnum": "100899801298",
    "firstname": "Lola",
    "surname": "Richards ",
    "sortcat1": "possibly bad infor",
    "sortcat2": "possibly bad data"
}, {
    "idnum": "102697973926",
    "firstname": "Lola",
    "surname": "Simonson",
    "sortcat1": "possibly bad infor",
    "sortcat2": "possibly bad data"
}, {
    "idnum": "154845984715",
    "firstname": "Simon",
    "surname": "Jones",
    "sortcat1": "possibly bad infor",
    "sortcat2": "possibly bad data"
}]

我已经读过创建一个变量并将所有 html 添加到我的名为“putdatahere”的 div 中更有效（见下文）但是在阅读了很多之后似乎这对 XSS 是开放的。

$.ajax({
type: "post",
url: "getdata.php",
cache: false,
success: function(peoplelist) {
    var peopleinfo = JSON.parse(peoplelist);
    var i,x="";
    for (i in peopleinfo) {
        var idnumstringed = pupilinfo[i].idnum.replace(/[^a-zA-Z0-9]/g, '_');
        var firstnamestringed = pupilinfo[i].firstname.replace(/[^a-zA-Z0-9]/g, '_');
        var surnamestringed = pupilinfo[i].surname.replace(/[^a-zA-Z0-9]/g, '_');
        var sortcat1stringed = pupilinfo[i].sortcat1.replace(/[^a-zA-Z0-9]/g, '_');
        var sortcat2stringed = pupilinfo[i].sortcat2.replace(/[^a-zA-Z0-9]/g, '_');
        var sortcat3stringed = pupilinfo[i].sortcat3.replace(/[^a-zA-Z0-9]/g, '_');
        var x+='<div id="pupdiv'+idnumstringed+'" data-firstname="'+firstnamestringed+'" data-surname="'+surnamestringed+'"  data-sortcat="'+sortcat1stringed+'" data-sortcat2="'+sortcat2stringed+'">'+firstname+' '+surname+'</div>';
    }
   $("#putdatahere").html(x);
   }
});

我读过，使用未知数据的唯一安全方法是将其放入 .text 而不是 .html。我不知道如何用上面的方法做到这一点，所以我现在已经附加了每个 div（见下文）

 $.ajax({
type: "post",
url: "getdata.php",
cache: false,
success: function(peoplelist) {
    var peopleinfo = JSON.parse(peoplelist);
    var i,x="";
    for (i in peopleinfo) {
        var idnumstringed = pupilinfo[i].idnum.replace(/[^a-zA-Z0-9]/g, '_');
        var firstnamestringed = pupilinfo[i].firstname.replace(/[^a-zA-Z0-9]/g, '_');
        var surnamestringed = pupilinfo[i].surname.replace(/[^a-zA-Z0-9]/g, '_');
        var sortcat1stringed = pupilinfo[i].sortcat1.replace(/[^a-zA-Z0-9]/g, '_');
        var sortcat2stringed = pupilinfo[i].sortcat2.replace(/[^a-zA-Z0-9]/g, '_');
        var sortcat3stringed = pupilinfo[i].sortcat3.replace(/[^a-zA-Z0-9]/g, '_');         
        $("#putdatahere").append('<div id="pupdiv'+idnumstringed+'" data-firstname="'+firstnamestringed+'" data-surname="'+surnamestringed+'"  data-sortcat="'+sortcat1stringed+'" data-sortcat2="'+sortcat2stringed+'"></div>');
        $("#pupdiv"+idnumstringed).text(firstname+' '+surname);     
    }
}
}); 

我的问题是：

1) 上述 append 方法对 XSS 或其他攻击安全吗？

2) 有没有更好的方法来做到这一点？

Answer 1

删除所有非字母数字字符应使其安全。但更好的方法是使用 jQuery 的函数式方法而不是串联字符串来创建元素。

$("#putdatahere").append($("<div>", {
    id: "pupdiv" + idnum,
    data: { 
        firstname: pupilinfo[i].firstname,
        surname: pupilinfo[i].surname,
        sortcat: pupilinfo[i].sortcat1,
        sortcat2: pupilinfo[i].sortcat2,
        sortcat3: pupilinfo[i].sortcat3
    },
    text: pupilinfo[i].firstname + " " + pupilinfo[i].surname
}));

顺便说一句，您忘记在元素中输入sortcat3，并且在调用.text() 时离开了pupilinfo[i].。