jquery - 如何在表单的 AJAX post 请求中传递 CSRF token ？

Question

我正在使用 Scala Play! 2.6 框架，但这可能不是问题。我正在使用他们的 Javascript 路由 - 它似乎工作正常，但有问题。我有一个表单，在渲染时会生成一个带有 CSRF token 的表单:

<form method="post" id="myForm" action="someURL">

<input name="csrfToken" value="5965f0d244b7d32b334eff840...etc" type="hidden">
  <input type="text" id="sometext">
  <button type="submit"> Submit! </button>

</form>

我的 AJAX 大致如下:

$(document).on('submit', '#myForm', function (event) {

 event.preventDefault();
   var data = {
    textvalue: $('#sometext').val()
   }
 var route = jsRoutes.controllers.DashboardController.postNewProject()
 $.ajax({
    url: route.url,
    type: route.type,
    data : JSON.stringify(data),
    contentType : 'application/json',
    success: function (data) { ...      },
    error: function (data) { ...  }
        })

});

但是当我发布此内容时，我从服务器返回了未经授权的响应，并且 IntelliJ 中的控制台告诉我 CSRF 检查失败。我如何在请求中传递 CSRF token ？

Answer 1

好吧，在与此问题斗争了几个小时并尝试解密 subject 上的 Play 经常缺乏上下文的文档之后， 我懂了。

所以，从他们的文档来看:

To allow simple protection for non browser requests, Play only checks requests with cookies in the header. If you are making requests with AJAX, you can place the CSRF token in the HTML page, and then add it to the request using the Csrf-Token header.

然后就没有代码或示例了。谢谢玩。非常具有描述性。无论如何，方法如下:

在您的 view.html.formTemplate 中，您可以用 IntelliJ 编写:

@()
<form method="post" id="myForm" action="someURL">

@helper.CSRF.formField  <!-- This auto-generates a token for you -->
  <input type="text" id="sometext">
  <button type="submit"> Submit! </button>

</form>

当交付给客户端时，它会像这样呈现:

<form method="post" id="myForm" action="someURL">

<input name="csrfToken" value="5965f0d244b7d32b334eff840...etc" type="hidden">
  <input type="text" id="sometext">
  <button type="submit"> Submit! </button>

</form>

好的，差不多就这样了，现在我们必须创建 AJAX 调用。我将所有内容都放在一个单独的 main.js 文件中，但如果需要，您也可以将其放入 view.html.formTemplate 中。

$(document).on('submit', '#myForm', function (event) {

 event.preventDefault();
   var data = {
    myTextToPass: $('#sometext').val()
   }
 // LOOK AT ME! BETWEEN HERE AND
 var token =  $('input[name="csrfToken"]').attr('value')
    $.ajaxSetup({
        beforeSend: function(xhr) {
            xhr.setRequestHeader('Csrf-Token', token);
        }
    });
// HERE
 var route = jsRoutes.controllers.DashboardController.postNewProject()
 $.ajax({
    url: route.url,
    type: route.type,
    data : JSON.stringify(data),
    contentType : 'application/json',
    success: function (data) { ...      },
    error: function (data) { ...  }
        })

});

用这一行: var token = $('input[name="csrfToken"]').attr('value') 您正在提取表单字段中自动生成的 CSRF token ，并在 var 中获取其值以在 Javascript 中使用。

所有 AJAX 中的另一个重要部分在这里:

$.ajaxSetup({
            beforeSend: function(xhr) {
                xhr.setRequestHeader('Csrf-Token', token);
            }
        });

使用$.ajaxSetup，您可以设置 header 中的内容。这是您必须从他们的文档中推断出的内容:

add it to the request using the Csrf-Token header.

祝你好运!让我知道这是否清楚。

<小时/>

注意:使用lusca时，使用 X-CSRF-Token 而不是 Csrf-Token。