如何将csrf令牌添加到ajax请求中

我在向ajax请求添加csrf时遇到问题。我在客户端使用thymeleaf和springboot/springsecurity。Spring security不允许该请求，因为缺少csrf令牌。这是我的ajax代码

function bits(){
    var xhttp = new XMLHttpRequest();
    var selected = document.getElementById("product").value;
    xhttp.onreadystatechange = function(){
      if(xhttp.readyState==4 && xhttp.status==200){
        var result= JSON.parse(xhttp.responseText)
        var length = result.length;
        for(i=0; i<length; i++){

           console.log(result[k].spid);
        }
    }

};

 xhttp.open("POST", "http://localhost:8080/bids?q="+selected,  true);
 xhttp.send();

函数位（）{
var xhttp=newXMLHttpRequest（）；
所选变量=document.getElementById（“产品”）.value；
xhttp.onreadystatechange=函数（）{
if（xhttp.readyState==4&&xhttp.status==200）{
var result=JSON.parse（xhttp.responseText）
变量长度=result.length；
对于下面的（i=0；i），您可以找到我使用ajax和csrf的代码。我也使用Spring安全性

    // In your JSP meta tags
    <meta name="_csrf" content="${_csrf.token}"/>
    <!-- default header name is X-CSRF-TOKEN -->
    <meta name="_csrf_header" content="${_csrf.headerName}"/>

    // In your javascript
    // CSRF Variables
    var _tc = $("meta[name='_csrf']").attr("content");
    var _hc = $("meta[name='_csrf_header']").attr("content");


    // Header
    var headersStomp = {};
    headersStomp[_hc] = _tc;

    $(document).ajaxSend(function(e, xhr, options) {
        xhr.setRequestHeader(_hc, _tc);
    });

//在JSP元标记中
//在javascript中
//CSRF变量
var_tc=$（“meta[name=''u csrf']”）attr（“content”）；
var_hc=$（“meta[name=''u csrf_header']”）attr（“content”）；
//标题
var headersStomp={}；
人头跺脚[_hc]=\u tc；
$（文档）.ajaxSend（函数（e、xhr、选项）{
setRequestHeader（hc，tc）；
});
在jsp元标记中存储CSRF令牌

<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>

我修改了@Prakash Hari Sharma的解决方案，并使用了以下代码

--标题部分

<meta th:name="_csrf" th:content="${_csrf.token}"/>
<meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>

希望这对其他人也有帮助。
作为@EdwardoS答案的补充，在您向
元素添加元标记后：

百里香：

<meta th:name="_csrf" th:content="${_csrf.token}"/>
<meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>

您可以将Spring Security的CSRF令牌设置为名为
MyApp.csrfToken
的Javascript变量

在JSP中，添加流动脚本，以便在文档准备就绪后调用init函数：

<script type="text/javascript">
    document.onreadystatechange = function () {
       var state = document.readyState;
       if (state == 'complete') {
         fnInit("${_csrf.parameterName}", "${_csrf.token}"); 
       }
    }​;
</script>

现在，您可以在任何ajax调用中使用标记

...
...
xhttp.open("POST", "http://localhost:8080/bids?q="+selected + "&"+ MyApp.csrfToken.param+"="+ MyApp.csrfToken.value,  true);
xhttp.send();

PS:不需要对于jQuery，它是纯JavaScript。
在spring文档中，出于安全原因，还建议不要在GET请求中使用csrf令牌

“能够确定接收令牌的请求的范围有助于保护
防止向第三方泄露CSRF令牌。”

因此，您可以通过以下方式筛选仅为POST请求传递令牌：

$(function() {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    $(document).ajaxSend(function(e, xhr, options) {
        if (options.type == "POST") {
            xhr.setRequestHeader(header, token);
        }
    });
});

元素中的元标记与前面的答案相同：

<meta th:name="_csrf" th:content="${_csrf.token}"/>
<meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>


我应用了上面的代码，但仍然出现了禁止的错误。然后，我将上面代码中的所有变量行替换为：var token=$（“meta[name=''u csrf']”）。attr（“content”）；var header=$（“meta[name=''u csrf']）。attr（“content”）；问题解决了。感谢您的帮助！对于Thymeleaf，只需在上面的metas中的“name”和“content”前缀th:即可。我使用的是Thymleaf，我就是这么做的。
<script type="text/javascript">
    document.onreadystatechange = function () {
       var state = document.readyState;
       if (state == 'complete') {
         fnInit("${_csrf.parameterName}", "${_csrf.token}"); 
       }
    }​;
</script>

var MyApp = MyApp || {};
function fnInit(csrfParam, csrfToken) {
  MyApp.csrfToken = {
      param : csrfParam,
      value : csrfToken
  }
}

...
...
xhttp.open("POST", "http://localhost:8080/bids?q="+selected + "&"+ MyApp.csrfToken.param+"="+ MyApp.csrfToken.value,  true);
xhttp.send();

$(function() {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    $(document).ajaxSend(function(e, xhr, options) {
        if (options.type == "POST") {
            xhr.setRequestHeader(header, token);
        }
    });
});

<meta th:name="_csrf" th:content="${_csrf.token}"/>
<meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>