Rails - 如何向用 javascript 创建的表单添加 CSRF 保护？

Question

我正在使用backbone.js，它效果很好。但我作为 JavaScript 模板创建的表单缺少 Rails csrf 保护令牌。如何将其添加到我用 JavaScript 创建的模板中？

Answer 1

我解决这个问题的最佳方法是在表单内：

<%= hidden_field_tag :authenticity_token, form_authenticity_token %>

更新：

看起来 form_authenticity_token 对于较新的 Rails 版本中的控制器来说是私有的。

如果您是这种情况，我的建议是：在控制器中声明一个变量，如下所示：
@form_token = form_authenticity_token
并在您正在寻找的视图中使用它。

Answer 2

如果您的布局中有 <%= csrf_meta_tag %> 并且可以从 js 访问它，那么您可以使用 $('meta[name="csrf -token"]')

请参阅 http://eunikorn.blogspot.com/2011/07/working-with- backbonejs-in-harmony-with.html 了解如何将 csrf 支持融入到每个主干请求中

Answer 3

我在 Rails 6 应用程序的 Vue 组件内有一个表单。

令我惊讶的是，在 Vue 模板中包含一个名为 authenticity_token 的隐藏输入就足够了，并且在页面加载时，Rails 使用 CSRF 保护令牌填充该值。

例如，

<template>
  <div id="app">
    <form
      action="/submit"
      method="post"
      @submit.prevent="onSubmit"
    >
      <input
        type="hidden"
        name="authenticity_token"
        value=""
      >
      <!-- rest of form -->
    </form>
  </div>
</template>

它被渲染为：

<div id="app">
  <form action="/submit" method="post">
    <input type="hidden" name="authenticity_token" value="zl9PJiE...">
    ...
  </form>
</div>

Answer 4

您可以将 csrf 令牌添加到使用“post”或“delete”的每个表单前面。这是在 CoffeeScript 中：

$ -> 
  for f in $("form")
    if f.method == 'post' or f.method == 'delete'
      $(f).prepend("<input type='hidden' name='authenticity_token' value='" + token + "'>")

确保您有 <%= csrf_meta_tags %>;在你的布局中。它应该已经位于标准“应用程序”布局中，但如果您使用不同的布局，请添加它。

Answer 5

至于 Rails 4.2.2，您不能

<%= hidden_field_tag :authenticity_token, form_authenticity_token %>

从 .js.erb 资产文件中使用。

但是，您可以在 .js.erb 文件内创建表单，并在包含表单 .html.erb 文件的视图中使用 hidden_​​field_tag 帮助器生成令牌元素。由于此元素将在表单外部生成，因此您可以使用 jquery 将此元素附加到表单。

研究案例：SweetAlert（第一个版本，版本似乎也解决了这个问题）

show.js.erb

$('.js-button-apply-offer').click(function(e) {
var urlOffer = $(this).attr('data-url-offer');
var modalParams = {
    type: 'warning',
    title: 'add file',
    text: '<p>Need to add a file before continuing</p>' // This is a hack for Sweet alert, solved in SweetAlert2 Consider upgrade
    +"<form action='"+urlOffer+"' id='formCustomCV' method='post' enctype='multipart/form-data' data-remote='true'>"
    + "<input type='file' name='custom_cv' id='fileToUploadAlert' accept='application/pdf'>\n"
    +"</form>",
    html: true,
    showCancelButton: true,
    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'Send',
    cancelButtonText: 'Cancel',
    closeOnConfirm: false
  }
swal(modalParams,
function(){
  var form_token = $('#form_token');
  $('#formCustomCV').append(form_token).submit(); //update to submit using ajax
});

show.html.erb

<%= button_tag t('offers.offer.apply'),
  class: 'center-block btn btn-success js-button-apply-offer',
  id: "js-button-apply-offer",
  data: {
    url_offer: apply_talents_offer_path(@offer),
  } 
%>
<%= hidden_field_tag :authenticity_token, form_authenticity_token, id: :form_token %>