選択ボックス内のオプションを更新するAJAX応答をサニタイズ

Question

私はBloggersとBlogsを持っています。各blogはbloggerに関連付けられています。 Jennellのblog最初のtitle属性は、特定の状況で適切にサニタイズされていない場合にトリガすることができ、いくつかのJavaScriptを持っていることを

注意：ここではブログのレコードの画像です。

これはまさにそのような状況の1つです。最初の選択ボックスについては

：私は、2つの選択ボックスを持っているユーザーはBlogger選びます。これが発生した場合：

• をAJAXリクエストがその選択Blogger
• のために関連付けられているBlogsのすべてをつかむためにサーバーに送信されます、サーバーはそのbloggerに関連付けられているすべてのblogsをつかみ、背中要求者に送信し
AJAXリクエストのため
• 応答は
• AJAXリクエストに対する応答は、次にGであったことBlog選択ボックス全てblogsのオプションとして追加Blog選択ボックス内のすべてのオプションを削除しますサーバー上で騒々しい。

Jennellという名前Bloggerはjavascriptのハックが含まれていtitleと関連するblogを持っています。したがって：Jennell Bloggerが選択されますとき：

彼女の関連する 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 

私はそれを浄化する必要があります。

質問：AJAXの回答：value.titleはどのようにして浄化できますか？

Answer 1

属性を使用してテキスト/値を設定します.HTML文字列ではありません。

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

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

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