jquery – 如何在表单的AJAX post请求中传递CSRF令牌?

前端之家收集整理的这篇文章主要介绍了jquery – 如何在表单的AJAX post请求中传递CSRF令牌?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 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) { ...  }
        })

});

但是当我发布这个时,我从我的服务器获得了一个UNAUTHORIZED响应,我在IntelliJ中的控制台告诉我CSRF检查失败了.我如何在请求中传递CSRF令牌?

解决方法

好吧,经过几个小时的斗争并尝试解密Play上经常缺乏的上下文文档在 subject上,我已经知道了.

所以,从他们的文档:

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',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,error: function (data) { ...  }
        })

});

有了这条线:
var token = $(‘input [name =“csrfToken”]’).attr(‘value’)
您正在选择在表单字段中自动生成的CSRF令牌,并在var中获取其值以在Javascript中使用.

来自AJAX的另一个重要组块是:

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

使用$.ajaxSetup,您可以设置标题中的内容.这是你必须从他们的文档推断:

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

祝好运!如果这一点很清楚,请告诉我.

注意:使用lusca时,请使用X-CSRF-Token而不是Csrf-Token.

猜你在找的jQuery相关文章