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

Question

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

在发出简单$.post()请求时,我收到'Illuminate\Session\TokenMismatchException'错误,因为_tokenPOST数据中缺少所需的表单输入.以下是有问题的$ .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文档:

例如,您可以将令牌存储在"meta"标记中:

创建元标记后,您可以指示像jQuery这样的库将标记添加到所有请求标头中.这为基于AJAX的应用程序提供了简单,方便的CSRF保护:

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

例如,您可以像下面那样提出要求.

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

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

这是一个示例脚本,您可以与Laravel进行通信(当您单击id ="some-id"的元素时发送请求,您可以在id ="result"的元素中看到响应):

<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"
});

要么

$.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

关于CSRF的Django文档提供了一个很好的代码片段,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);
        }
    }
});