如何在表单的AJAX发布请求中传递CSRF令牌？

小编典典

如何在表单的AJAX发布请求中传递CSRF令牌？

ajax

我正在使用Scala Play！2.6框架，但这可能不是问题。我正在使用他们的Javascript路由-
似乎可以正常工作，但出现了问题。我有一个带有CSRF令牌的表单，在渲染时会产生这种情况：

<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令牌？

阅读 401

2020-07-26

共1个答案

小编典典

好的，经过几个小时的努力，并尝试解密Play上经常出现的主题上下文文档不足的问题，我明白了。

因此，从他们的文档中：

为了对非浏览器请求提供简单保护，“播放”仅检查标头中包含Cookie的请求。如果使用AJAX发出请求，则可以将CSRF令牌放在HTML页面中，然后使用Csrf- Token标题将其添加到请求中。

然后没有代码或示例。谢谢玩。非常具有描述性。无论如何，这是如何：

在你的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令牌，并在要在Javascript中使用的var中获取其值。

所有AJAX的另一个重要块在这里：

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

使用$.ajaxSetup，您可以设置标题中的内容。这是您从他们的文档中得出的结论：

使用Csrf-Token标头将其添加到请求中。

祝好运！让我知道是否清楚。

注意：使用lusca时，请使用X-CSRF- Token代替Csrf-Token。

2020-07-26