小编典典

如何在表单的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令牌?


阅读 402

收藏
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