Javascript 这个json对XSS安全吗

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

我曾读到，创建一个变量并将所有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);
   }
});

$.ajax({
类型：“post”，
url:“getdata.php”，
cache:false，
成功：功能（人物列表）{
var peopleinfo=JSON.parse（peoplelist）；
变量i，x=“”；
对于（我在peopleinfo中）{
var idnumstringed=pupilinfo[i].idnum.replace（/[^a-zA-Z0-9]/g，'.'''.'替换）；
var firstnamestringed=pupilinfo[i].firstname.replace（/[^a-zA-Z0-9]/g，“"”）；
var namestringed=pupilinfo[i]。姓氏。替换（/[^a-zA-Z0-9]/g，'.''''；
变量sortcat1 stringed=pupilinfo[i].sortcat1.replace（/[^a-zA-Z0-9]/g，''.'替换'）；
变量sortcat2stringed=pupilinfo[i].sortcat2.replace（/[^a-zA-Z0-9]/g，'.'''.'替换'）；
变量SORTCAT3STRING=pupilinfo[i]。sortcat3。替换（/[^a-zA-Z0-9]/g，'.'''''.'替换）；
变量x+=''+名字+''+姓氏+''；
}
$（“#putdatahere”）.html（x）；
}
});

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

$.ajax({
类型：“post”，
url:“getdata.php”，
cache:false，
成功：功能（人物列表）{
var peopleinfo=JSON.parse（peoplelist）；
变量i，x=“”；
对于（我在peopleinfo中）{
var idnumstringed=pupilinfo[i].idnum.replace（/[^a-zA-Z0-9]/g，'.'''.'替换）；
var firstnamestringed=pupilinfo[i].firstname.replace（/[^a-zA-Z0-9]/g，“"”）；
var namestringed=pupilinfo[i]。姓氏。替换（/[^a-zA-Z0-9]/g，'.''''；
变量sortcat1 stringed=pupilinfo[i].sortcat1.replace（/[^a-zA-Z0-9]/g，''.'替换'）；
变量sortcat2stringed=pupilinfo[i].sortcat2.replace（/[^a-zA-Z0-9]/g，'.'''.'替换'）；
变量SORTCAT3STRING=pupilinfo[i]。sortcat3。替换（/[^a-zA-Z0-9]/g，'.'''''.'替换）；
$（“#putdatahere”）。追加（“”）；
$（“#pupdiv”+idnumstringed）.text（firstname+“”+姓氏）；
}
}
}); 

我的问题是：

1） 上述append方法是否安全，不受XSS或其他攻击

---

2） 有更好的方法吗？

删除所有非字母数字字符应该会更安全。但是更好的方法是使用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
}));

$（“#putdatahere”）。追加（$（“”{
id:“pupdiv”+idnum，
数据：{
名字：pupilinfo[i]。名字，
姓:普匹林佛(一),姓,，
sortcat:pupilinfo[i].sortcat1，
sortcat2:pupilinfo[i].sortcat2，
sortcat3:pupilinfo[i]。sortcat3
},
text:pupilinfo[i]。firstname+“”+pupilinfo[i]。姓氏
}));

---

顺便说一句，您忘记将

sortcat3

放在元素中，并且在调用

.text（）

时取消了

pupilinfo[i]。

。所以，如果我使用上面显示的方法，那么XSS不会发生？即使说pupilinfo[i].sortcat3里面有一些顽皮的代码？我很肯定。这里的任何内容都不会执行数据。通过.attr使用.text和attributes插入文本将是安全的。append绕过了那些安全措施Hanks Kevin。你能举例说明我是如何做到这一点的吗？不，请参阅文档。什么文档？我希望能够修改data属性，我已经读到，如果我使用.attr（“data-something”），我就不需要使用.data（）。只是想了解你的评论。这不是这个网站的全部内容吗？你问过我使用这些东西的例子。文档中已经给出了示例，我认为没有必要重复这些示例。（如果您想查看，它们在这里也被重复了数千次，但文档更容易找到）

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

$("#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
}));