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

Question

我有Bloggers和Blogs。每个blog都与blogger相关联。这是博客记录的图片：

请注意，Jennell的第一个title的{​​{1}}属性有一些javascript，如果在某些情况下未正确消毒，可能会触发。

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

对于第一个选择框：用户选择blog。发生这种情况时：

• 将AJAX请求发送到服务器以获取所选Blogger的所有关联Blogs
• 服务器将所有关联的Blogger抓取到该blogs并将其发送回请求者
• ajax请求的响应会删除blogger选择框
中的所有选项
• 然后，ajax请求的响应将Blog选择框中的选项添加为服务器上抓取的所有Blog。

名为Jennell的blogs有一个关联的Blogger，其中blog包含javascript hack。因此：当Jennell title被选中时：

她关联的Blogger内的黑客将被执行：

以下是AJAX请求的实际代码：

Blog

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 ？

Answer 1

通过属性设置文本/值，而不是html字符串。

＆＃13;

＆＃13;

var str = "<script>alert('x');<\/script>Test",
    opt = $("<option></option>", { "text" : str, value : "foo" });
$("select").append(opt);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果有人想看到问题的代码解决方案：

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