CakePHP ajax CSRF 令牌不匹配答案

【问题标题】：CakePHP ajax CSRF token mismatchCakePHP ajax CSRF 令牌不匹配
【发布时间】：2015-11-25 14:13:10
【问题描述】：

我正在通过我的 AppController 中加载 Csrf 组件发出 ajax 请求

但是我收到错误{"message":"CSRF token mismatch.","url":"\/module_slides\/loadDeck.json","code":403}

这里是请求头

POST /module_slides/loadDeck.json HTTP/1.1
Host: www.hotelieracademy.com
Connection: keep-alive
Content-Length: 18
Origin: https://www.hotelieracademy.com
X-XSRF-TOKEN: 3d3901b1de9c5182dce2877c9e1d9db36cdf46a6
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Accept: application/json, text/javascript, */*; q=0.01
X-Requested-With: XMLHttpRequest
Referer: https://www.hotelieracademy.com/courses_employees/player/70
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: csrfToken=3d3901b1de9c5182dce2877c9e1d9db36cdf46a6; CAKEPHP=3n6lpi94hrdgsg8mv4fsnp1m30; _ga=GA1.2.2010364689.1424741587

我的 ajax 代码

$.ajax({
            url: '/module_slides/loadDeck.json',
            type: 'POST',
            headers: { 'X-XSRF-TOKEN' : this.csrfToken },
            beforeSend: function (xhr) {
                xhr.setRequestHeader('X-CSRF-Token', this.csrfToken);
            },
            dataType: 'json',
            data: {

我已经按照另一篇帖子的建议留下了beforeSend:，但似乎没有改变标题，所以我添加了headers:

我使用隐藏输入来获取要在我的 js 代码中使用的 CsfR 令牌

<input id="csrfToken" type="hidden" value="<?= $this->request->getParam('_csrfToken') ?>">

【问题讨论】：

XSRF?只是这个例子中的一个错字？
我一定是雪盲症，谢谢

标签： ajax cakephp-3.0 csrf

【解决方案1】：

我遇到了同样的问题。可能，这就是将 "_csrfToken":"xxxxxxx" 添加到 data{} 的答案。

$.ajax({
        url: '/module_slides/loadDeck.json',
        type: 'POST',
        headers: { 'X-XSRF-TOKEN' : this.csrfToken },
        beforeSend: function (xhr) {
            xhr.setRequestHeader('X-CSRF-Token', this.csrfToken);
        },
        dataType: 'json',
        data: {
           "_csrfToken":"3d3901b1de9c5182dce2877c9e1d9db36cdf46a6"
        }

这是我的博客。但只有日语。 http://www.tsuji75.com/?p=62

【讨论】：

【解决方案2】：

这是我的解决方案。
对于 CSRF 令牌，我正在创建一个空的 cakephp 表单，它提供了 CSRF 令牌。另外，我不解锁任何动作。相反，我会解锁字段。

参考：https://book.cakephp.org/3.0/en/controllers/components/security.html

这是我的工作示例。

场景：由于 cakephp 3 CSRF 令牌不匹配问题，添加事件的 Ajax 调用失败。

解决方案：

我在视图中创建了一个空表单，因此它可以为我的表单提供 CSRF 令牌，然后在 ajax 之前附加所需的输入字段。在表单本身中，我解锁了隐藏字段。这样我就不会打扰 CSRF 组件。 查看中

<?= $this->Form->create(false, [
    'id' => "ajaxForm",
                        'url' => ['controller' => 'XYZ', 'action' => 'add'],
                        'class'=> "addUpdateDeleteEventForm"
                        ] );
                        $eventdata = [];
                        ?>
                            <?= $this->Form->unlockField('id'); ?>
                            <?= $this->Form->unlockField('start'); ?>
                            <?= $this->Form->unlockField('end'); ?>
                            <?= $this->Form->unlockField('title'); ?>
                        <?= $this->Form->button('Submit Form', ['type' => 'submit']);?>

                       <?= $this->Form->end(); ?>

阿贾克斯：

        var id = $("<input>")
        .attr("type", "hidden")
        .attr("name", "id").val(id);
    var titleField = $("<input>")
        .attr("type", "hidden")
        .attr("name", "title").val(title);
    var startTime = $("<input>")
        .attr("type", "hidden")
        .attr("name", "start").val(start);
    var endTime = $("<input>")
        .attr("type", "hidden")
        .attr("name", "end").val(end);
    $('#ajaxForm').append(id);
    $('#ajaxForm').append(titleField);
    $('#ajaxForm').append(startTime);
    $('#ajaxForm').append(endTime);


    var ajaxdata = $("#ajaxForm").serializeArray();

    $.ajax({
        url:$("#ajaxForm").attr("action"),
        type:"POST",
        data:ajaxdata,
        dataType: "json",
        success:function(response)
        {
            toastr.success(response.message, response.title);
            calendar.fullCalendar("removeEvents");
            calendar.fullCalendar("refetchEvents");
        },
        error: function(response)
        {
            toastr.error(response.message, response.title);
        }
    });

希望这会有所帮助。

【讨论】：