Javascript 清理AJAX响应，更新选择框中的选项_Javascript_Jquery_Ajax

Javascript 清理AJAX响应，更新选择框中的选项

javascript jquery ajax

Javascript 清理AJAX响应，更新选择框中的选项,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有博客和博客。每个博客都与一个博客相关联。以下是博客记录的图片：请注意，Jennell的第一个博客的title属性中有一些javascript，如果在某些情况下未正确清理，可能会触发这些javascript 这正是其中一种情况。我有两个选择框：对于第一个选择框：用户选择一个Blogger。发生这种情况时： AJAX请求被发送到服务器，以获取所选Blogger的所有相关blog 服务器将所有相关的博客抓取到该博客并将其发送回请求者 ajax请求的响应将删除Blog选择框中的所有选项 a

我有

博客

和

博客

。每个

博客

都与一个

博客

相关联。以下是博客记录的图片：

请注意，Jennell的第一个

博客

的

title

属性中有一些javascript，如果在某些情况下未正确清理，可能会触发这些javascript

这正是其中一种情况。我有两个选择框：

对于第一个选择框：用户选择一个

Blogger

。发生这种情况时：

AJAX请求被发送到服务器，以获取所选
```
Blogger的所有相关blog
```


服务器将所有相关的博客
抓取到该博客
并将其发送回请求者
ajax请求的响应将删除Blog
选择框中的所有选项
ajax请求的响应随后作为选项添加到Blog
选择框中，选择服务器上捕获的所有Blog


名为Jennell的博主
有一个关联的博客
，其标题包含一个javascript黑客。因此：当JennellBlogger
被选中时：

她关联的博客中的黑客将被执行：

以下是AJAX请求的实际代码：
$("body").on('change', '[data-action="blogger_sel"]', function() {
  var blog_sel = $(this).closest('[data-parent-for="blog_sel"]').find('[data-action="blog_sel"]');
  $.ajax({
    url: "/blogs",
    type: "GET",
    data: {blogger_id: $(this).val()},
    success: function (data) {
      blog_sel.children().remove();
      $.each(data, function (index, value) {
        /* DO NOT APPEND THIS WAY.  VULNERABLE TO USER-ENTERED JAVASCRIPT EXECUTING */
        blog_sel.append('<option value=' + value.id + '>' + value.title + '</option>');
      });
    }
  })
});

我需要消毒一下
问题：在AJAX响应中：如何清理value.title
？
通过属性而不是html字符串设置文本/值

var str=“警报（'x'）；测试”，
opt=$（“”，{“text”：str，值：“foo”}）；
$（“选择”）.append（opt）
如果有人想看到问题的代码解决方案：
$("body").on('change', '[data-action="blogger_sel"]', function() {
  var blog_sel = $(this).closest('[data-parent-for="blog_sel"]').find('[data-action="blog_sel"]');
  $.ajax({
    url: "/blogs",
    type: "GET",
    data: {blogger_id: $(this).val()},
    success: function (data) {
      blog_sel.children().remove();
      $.each(data, function (index, item) {
        blog_sel.append($('<option>', {
          value: item.id,
          text : item.title
        }));
      });
    }
  })
});

$（“body”）。关于（'change'，'data action=“blogger_sel”]”，函数（）{
var blog_sel=$（this）.closest（“[data parent for=“blog_sel”]”）。find（“[data action=“blog_sel”]”）；
$.ajax({
网址：“/blogs”，
键入：“获取”，
数据：{blogger_id:$（this.val（）}，
成功：功能（数据）{
blog_sel.children（）.remove（）；
$。每个（数据、功能（索引、项目）{
博客选择附加（$（''）{
值：item.id，
文本：item.title
}));
});
}
})
});
在插入数据库之前，您应该清理内容，并且永远不要问此类问题（清理数据客户端）。简单地说，对于title
来说，不允许使用标记。@skobaljic这是一个很好的观点。不过，这更像是一种练习。我想更现实一点：假设我们有一个巨大的数据库，里面可能有一些黑客。接下来，我们将清理标记的属性，但无论出于何种原因，我们都无法清理旧数据，因此我们将在客户端对其进行清理。您的问题应该是如何从字符串中剥离标记，因为您已经有了-下面是jQuerytext（）
方法。询问如何使用Javascript清理输出可能会令人困惑，因为这几乎从未发生过。谢谢您的回答。它是有效的，但我不知道为什么有效。我想既然您显式地设置了选项的text值，那么它知道忽略脚本标记吗？我想它知道如何将它们作为文本而不是标记添加到html中？因为文本是文本，所以可以显示实际字符。
$("body").on('change', '[data-action="blogger_sel"]', function() {
  var blog_sel = $(this).closest('[data-parent-for="blog_sel"]').find('[data-action="blog_sel"]');
  $.ajax({
    url: "/blogs",
    type: "GET",
    data: {blogger_id: $(this).val()},
    success: function (data) {
      blog_sel.children().remove();
      $.each(data, function (index, item) {
        blog_sel.append($('<option>', {
          value: item.id,
          text : item.title
        }));
      });
    }
  })
});