在 javascript POST 中发送 CSRF 令牌会出现错误

Posted

技术标签:

【中文标题】在 javascript POST 中发送 CSRF 令牌会出现错误【英文标题】:Send CSRF token inside javascript POST gives an Error 【发布时间】:2014-05-03 02:31:18 【问题描述】:

在我的 Web 应用程序中,我使用的是 spring security 3.2.x,并且我正在进行 CSRF 验证。在我的登录页面中,我已成功完成此操作。但在里面,我有一个按钮,按钮操作是写在一个 javascript

        $('#download').click(function()

            var paramValue = '$params';
            var params = $('#params_').clone()
            $('<form target="_blank" action="report" method="post"></form>').append(params).appendTo('body').submit().remove();

        );

现在的问题是当我点击那个按钮时它给出了以下错误

在请求参数“_csrf”或标头“X-CSRF-TOKEN”上发现无效的 CSRF 令牌“null”。

我认为这是因为它发送 CSRF 令牌失败。谁能告诉我如何解决这个问题。

提前致谢

【问题讨论】:

【参考方案1】:

是的,正如您所说,这是因为您动态创建的表单不包含有效的 CSRF 令牌输入。来自Spring Security documentation:

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

这将为您的 ajax 请求添加所需的标头。

【讨论】:

您在 ajax 请求标头中看到此标头吗? 找到了答案。检查我给出的答案 你是对的。这不是 ajax 请求,不知道为什么我看不到。【参考方案2】:

好的,我的问题在于下一行我没有像在正常的表单提交中那样发送 csrf 令牌。

        $('<form target="_blank" action="report" method="post"></form>').append(params).appendTo('body').submit().remove();

所以我所做的是我创建了隐藏字段并像下面这样插入它。

<script type="text/javascript">

    $(document).ready(function () 
    $('#download').click(function()                

            var params = $('#params_').clone();
            var csrftoken = $("#csrftoken_").clone();
            $('<form target="_blank" action="report" method="post"></form>')
                .append(params)
                .append(csrftoken)
                .appendTo('body')
                .submit()
                .remove();

        );
    );
</script>

  <input type='hidden' id='params_' name='params' value='$params' />
  <input type="hidden" id="csrftoken_" name="$_csrf.parameterName" value="$_csrf.token" /> 

这行得通....

【讨论】:

以上是关于在 javascript POST 中发送 CSRF 令牌会出现错误的主要内容,如果未能解决你的问题,请参考以下文章

使用 JavaScript Fetch 和 POST 发送表单数据,然后在 PHP 中处理它

发送 Javascript 推送通知 - 在表单 POST 和 URL 重定向之后

接收通过 POST 从 Javascript 发送到 PHP 的对象

怎么用javascript发送post请求?

向Tomcat发送POST请求时如何解决浏览器中的Javascript fetch API错误?

Javascript POST 函数仅发送到一个 POST 位置