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添加到我的div中称为“ putdatahere”的效率更高（请参阅下文），但是在阅读很多内容之后，这似乎对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放在元素中，并且在调用pupilinfo[i].时放弃了.text()。

这个JSON对XSS安全吗？

1 个答案: