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

Question

我正在使用 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 令牌？

Answer 1

好的，经过几个小时的斗争并尝试在 subject 上解密 Play 经常缺少的上下文文档，我明白了。

因此，从他们的文档中：

为了对非浏览器请求进行简单保护，Play 仅检查 标头中带有 cookie 的请求。如果您提出请求 AJAX，可以在HTML页面中放置CSRF token，然后添加 使用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 令牌，并在 var 中获取其值以在 Javascript 中使用。

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

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

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

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

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

---

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

Answer 2

来自 JSP

<form method="post" id="myForm" action="someURL">
    <input name="csrfToken" value="5965f0d244b7d32b334eff840...etc" type="hidden">    
</form>

这是在挣扎了 3 小时后对我有用的最简单的方法，只需像这样从输入隐藏字段中获取令牌，并且在执行 AJAX 请求时只需在标头中传递此令牌，如下所示：-

来自 JQuery

var token =  $('input[name="csrfToken"]').attr('value'); 

来自纯 Javascript

var token = document.getElementsByName("csrfToken").value;

最终的 AJAX 请求

$.ajax({
          url: route.url,
          data : JSON.stringify(data),
          method : 'POST',
          headers: {
                        'X-CSRFToken': token 
                   },
          success: function (data) { ...      },
          error: function (data) { ...  }
});

现在您不需要在 web config 中禁用 crsf 安全性，这也不会在控制台上出现 405(Method Not Allowed) 错误。

希望这会对人们有所帮助..!!

Answer 3

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

感谢 NateH06 提供标题名称！我试图通过 ajax 函数调用为“删除”按钮发送 csrf 令牌，但我遇到了以下问题：

@import helper._
....
<button id="deleteBookBtn" class="btn btn-danger"
        data-csrf-name="@helper.CSRF.getToken.name"
        data-csrf-value="@helper.CSRF.getToken.value"
        data-delete-url="@routes.BooksController.destroy(book.id)"
        data-redirect-url="@routes.HomeController.index()">Delete</button>

我无法在 onclick() 事件中添加在线 js，因为 Play 2.6 中也设置了 CSP。

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“default-src 'self'”。

在 JS 文件上：

function sendDeleteRequest(event) {
  url = event.target.getAttribute("data-delete-url")
  redirect = event.target.getAttribute("data-redirect-url")
  csrfTokenName = event.target.getAttribute("data-csrf-name")
  csrfTokenValue = event.target.getAttribute("data-csrf-value")
  $.ajax({
    url: url,
    method: "DELETE",
    beforeSend: function(request) {
      //'Csrf-Token' is the expected header name, not $csrfTokenName
      request.setRequestHeader(/*$csrfTokenName*/'Csrf-Token', csrfTokenValue);
    },
    success: function() {
      window.location = redirect;
    },
    error: function() {
      window.location.reload();
    }
  })
}

var deleteBookBtn = document.getElementById("deleteBookBtn");
if(deleteBookBtn) {
    deleteBookBtn.addEventListener("click", sendDeleteRequest);
}

将标头名称设置为'Csrf-Token' 后，ajax 调用完美！

Answer 4

如果它对正在谷歌搜索试图理解为什么他们无法获得正确令牌出现的其他人有用....我一直在为 Play 后端/React 前端组合的相同问题而苦苦挣扎- 因此无法（轻松）使用 token-in-htmlpage 技术我最终遇到了另一种在 cookie 中设置当前令牌的解决方案......只需添加：

play.filters.csrf {
  cookie.name = "csrftoken"
}

到 application.conf 和 csrftoken cookie 将被设置为令牌。然后，我使用https://www.npmjs.com/package/js-cookie 来获取我的 JS 代码中的值并将其发送回请求标头中 - 不包括此处的代码，因为它是 React 而不是 jQuery 对于 OP 并且不想混淆问题。

Answer 5

您可以使用headers 选项添加Csrf-Token 标头。

$.ajax({
    url: '@routes.MyController.myPostAction()',
    method: 'post',
    headers: {
        'Csrf-Token': '@play.filters.csrf.CSRF.getToken.map(_.value)'
    },
    data: {
        name: '@name'
    },
    success: function (data, textStatus, jqXHR) {
        location.reload();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        debugger;
    }
});

Answer 6

如Play Framework 2.6 Documentation 中所述，您可以使用 Play 生成的令牌设置一个 'Csrf-Token' Header：

如果您使用 AJAX 发出请求，您可以将 CSRF 令牌放在 HTML 页面中，然后使用 Csrf-Token 标头将其添加到请求中。

在 Scala 模板中，您可以使用 @helper.CSRF.getToken.value 获取令牌值

在jQuerys Documentation 之后，您可以通过使用ajaxSetup 配置jQuery 为所有Ajax 请求设置一次

$.ajaxSetup({
  beforeSend: function(xhr) {
    xhr.setRequestHeader('Csrf-Token', '@helper.CSRF.getToken.value');
  }
});

或者通过像这样配置headers 对象来设置每个请求的标头：

$.ajax({
  url: route.url,
  ...
  headers: {
    'Csrf-Token': '@helper.CSRF.getToken.value'
  }
});

Answer 7

slim csrf gurd，在 jQuery 中传递 csrf key 和 token 的方式，用于带有 twig 的 slim 应用程序

$(document).ready(function(){
    $.ajaxPrefilter(function(options, originalOptions, jqXHR){

        var allowedMethod = ["post", "put", "delete"];

        if (allowedMethod.includes(options.type.toLowerCase())  ) {
            // initialize `data` to empty string if it does not exist
            options.data = options.data || "";

            // add leading ampersand if `data` is non-empty
            options.data += options.data?"&":"";

            // add _token entry
            options.data += "{{csrf.keys.name}}={{csrf.name}}&{{csrf.keys.value}}={{csrf.value}}";
        }
    });
});