javascript - rails : How to escape_javascript with client-side AJAX request

Question

当我通过 to_json 从 Controller 操作直接客户端发送集合时，如何转义集合？

• 当我说请求从 Controller 操作发送，然后直接发送到客户端(跳过预处理)时，它看起来像这样:

  • AJAX 请求被路由到 Controller 操作
  • Controller Action 直接通过 javascript 将结果发送给请求者，并在客户端由请求者的 javascript 进行处理。类似于:app/assets/javascripts/blogs.js

• 这与将请求发送到controller_action，然后发送到服务器端 View 进行预处理，然后将结果发送到请求者相反。看起来像这样:

  • AJAX 请求
  • 路由到 Controller 操作
  • 发送到 View 进行预处理。类似于:app/views/blogs/index.js.erb
  • 结果发送给请求者

简短示例:

def some_action
  @blogs = Blog.all
  respond_to do |format|
    format.json {render json: @blogs} # currently dangerous, @blogs is not sanitized.
  end
end

举个例子:假设该集合中的 @blogs 记录之一包含来自黑客的以下数据输入:

@blogs.first.title
  => <script>alert('Site now hacked if this javascript runs!')</script>

当 @blogs 在浏览器中呈现时:我想转义 @blogs 内容，这样 JavaScript 就不会从该被黑的条目中触发。

更长的示例:

• 用户在选择框中选择博主。
• 发送的 AJAX 请求会获取与所选博主关联的所有博客。
• 然后，AJAX 请求会更新博客的第二个选择框，该选择框现在会将属于所选的所有博客列为选项>博主。

对于代码:上面的 Controller 操作代码完全相同。下面是客户端 JavaScript:

app/assets/javascripts/blogs.js

$("body").on('change', '[data-action="blogger_sel"]', function() {
  var blogs_selection = $(this).closest('[data-parent-for="blogs_sel"]').find('[data-action="blogs_sel"]');
  $.ajax({
    url: "/blogs",
    type: "GET",
    data: {blogger_id: $(this).val()},
    success: function (data) {
      blogs_selection.children().remove();
      $.each(data, function (index, item) {
        blogs_selection.append('<option value=' + item.id + '>' + item.title + '</option>');
       });
     }
   })
 });

所以上面:我关心的部分是 value.id 和 value.title。如果我不逃避的话，这些事情可能会很危险。我想确保它被转义，以便任何危险的输入都变得无害。

Answer 1

下面是一个解决方案。请记住，在将数据持久保存到数据库之前对数据进行清理通常是一个好主意。另外:最好在将响应发送给请求者之前清理服务器端:

app/assets/javascripts/blogs.js

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

不要按以下方式附加选项，因为它会执行危险的黑客攻击:

blogs_selection.append('<option value=' + value.id + '>' + value.title + '</option>');