Question

我正在开发一个Laravel 5应用程序，该应用程序默认为所有POST请求启用CSRF保护。我喜欢这种增加的安全性，所以我正在尝试使用它。

在发出简单的$.post()请求时，我收到了'Illuminate\Session\TokenMismatchException'错误，因为POST数据中缺少所需的表单输入_token。以下是有问题的$ .post请求的示例：

var userID = $("#userID").val();
$.post('/admin/users/delete-user', {id:userID}, function() {
// User deleted
});

我将CSRF令牌存储为标题中的元字段，可以使用以下方法轻松访问它：

var csrf_token = $('meta[name="csrf-token"]').attr('content');

是否可以将此附加到所有传出$.post()请求的json数据中？我尝试使用标题，但Laravel似乎没有认出它们 -

var csrf_token = $('meta[name="csrf-token"]').attr('content');
alert(csrf_token);
$.ajaxPrefilter(function(options, originalOptions, jqXHR){
    if (options['type'].toLowerCase() === "post") {
        jqXHR.setRequestHeader('X-CSRFToken', csrf_token);
    }
});

Answer 1

您的$.ajaxPrefilter方法很好。但是，您不需要添加标题;您只需要在data字符串中添加属性。

数据作为$.post的第二个参数提供，然后在预过滤器访问id=foo&bar=baz&...选项之前格式化为查询字符串（data）。因此，您需要将自己的字段添加到查询字符串中：

var csrf_token = $('meta[name="csrf-token"]').attr('content');
$.ajaxPrefilter(function(options, originalOptions, jqXHR){
    if (options.type.toLowerCase() === "post") {
        // 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 += "_token=" + encodeURIComponent(csrf_token);
    }
});

这会将id=userID变为id=userID&_token=csrf_token。

Answer 2

来自Laravel文档：

  例如，您可以将令牌存储在＆＃34; meta＆＃34;标记：



创建元标记后，您可以指示库   jQuery将令牌添加到所有请求标头。这提供简单，   为基于AJAX的应用程序提供方便的CSRF保护：

$。ajaxSetup（{           标题：{               ＆＃39; X-CSRF-TOKEN＆＃39;：$（＆＃39; meta [name =＆＃34; csrf-token＆＃34;]＆＃39;）。attr（＆＃39; content＆＃39; ）           }}）;

例如，您可以像下面那样提出请求。

将此元标记添加到您的视图中：

<meta name="csrf-token" content="{{ csrf_token() }}">

这是一个示例脚本，您可以与Laravel进行通信（当您单击id =＆＃34的元素时发送请求; some-id＆＃34;您可以在id =＆＃的元素中看到响应34;导致＆＃34）：

<script type="text/javascript">
    $(document).ready(function(){

        $.ajaxSetup({
            headers:
            { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
        });

        $("#some-id").on("click", function () {
            var request;


            request = $.ajax({
                url: "/your/url",
                method: "POST",
                data:
                {
                    a: 'something',
                    b: 'something else',
                },
                datatype: "json"
            });

            request.done(function(msg) {
                $("#result").html(msg);
            });

            request.fail(function(jqXHR, textStatus) {
                $("#result").html("Request failed: " + textStatus);
            });
        });

    });
</script>

Answer 3

一般来说，我同意Kornel建议的概念，除了一件事。

是的，Laravel的文档建议使用$.ajaxSetup，但不建议这样做，因为此方法会影响所有后续的ajax请求。为每个请求设置ajax设置更为正确。虽然你可以重新设置东西：

使用任何函数的所有后续Ajax调用都将使用新设置，除非被单个调用覆盖，直到下一次调用$ .ajaxSetup（）

如果您使用$.ajax()，则使用data属性或headers会更方便。 Laravel允许CSRF令牌作为请求参数或标题。

首先，将以下元标记添加到视图

中

<meta name="csrf-token" content="{{ csrf_token() }}">

然后以任何一种方式发出ajax请求：

$.ajax({
    url: "/your/url",
    method: "POST",
    data:
    {
        a: 'something',
        b: 'something else',
        _token: $('meta[name="csrf-token"]').attr('content')
    },
    datatype: "json"
});

OR

$.ajax({
    url: "/your/url",
    method: "POST",
    data:
    {
        a: 'something',
        b: 'something else',
    },
    headers: 
    {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    datatype: "json"
});

Answer 4

Django documentation on CSRF为ajaxSetup提供了一个很好的代码段，用于自动将适当的标头添加到重要的所有请求类型中：

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

Answer 5

我认为上述解决方案可能效果不佳。当你这样做时：

var x; 
x + ""
// "undefined" + empty string coerces value to string

您将获得类似＆＃34; undefined_token = xxx＆＃34;

的数据

例如，当您使用上述解决方案进行laravel删除时，您必须像这样检查：

if (typeof options.data === "undefined")
    options.data = "";
else
    options.data += "&";
options.data = "_token=" + csrf_token;

Answer 6

有一种更简单的方法可以在发送

之前序列化数据

<form method="post" id="formData">
 <input type="text" name="name" >
 <input type="hidden" name="_token" value="{{ csrf_token() }}">
 <input type="submit" id="sub" class="btn btn-default" value="Submit" />                            
</form>
<script>
    $(document).on('submit', '#formData', function (event) {
    event.preventDefault();
     var formData = $('#formData').serialize();
    $.ajax({
        url: url,
       type: "POST",
       data : formData,   
                success: function (result) {
                    console.log(result);                             
                }
           });
        });

    });
</script>

具有名称attr的所有内容都将被放入查询并提交

Answer 7

无需设置任何元标记，无需设置 csrf_token（）或 csrf_field（）！

您可以使用以下jQuery代码段：

$.ajaxPrefilter(function( settings, original, xhr ) {
    if (['post','put','delete'].includes(settings.type.toLowerCase())
        && !settings.crossDomain) {
            xhr.setRequestHeader("X-XSRF-TOKEN", getCookie('XSRF-TOKEN'));
    }
});

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

仅有少数其他答案尝试设置csrf标头，但根据Laravel文档（here），标头密钥应为“ X-XSRF-TOKEN” ，而Laravel本身提供了在名为“ XSRF-TOKEN”

的Cookie中对我们的每个请求所需的价值

所以只纠正了键并编辑了几行，谢谢

jQuery将CSRF令牌添加到所有$ .post（）请求的数据中

7 个答案: