django1.7中对ajax设置csrf

AJAX¶

我们可以在每个 XMLHttpRequest中, 设置一个定制的X-CSRFToken 头部，其值为csrftoken.

首先你得先得到CSRF令牌.一般token的来源是csrftoken cookie, csrftoken cookie将会在你已经对view开启了 CSRF 保护的前提下被设置.

提示：

CSRF token cookie 默认名称为 csrftoken,但你也能通过CSRF_COOKIE_NAME setting设置cookie名称.

获取token:

// using jQuery

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;

}

var csrftoken = getCookie('csrftoken');

以上代码可以通过使用jQuerycookie plugin来代替getCookie的方式来简化。

var csrftoken = $.cookie('csrftoken');

提示：

在你显式地在模板中使用了csrf token时，CSRF令牌也会体现在DOM中。Cookie包括了标准的token;相比于DOM，CsrfViewMiddleware 更偏向于在cookie中使用csrftoken. 不管怎样, 如果token出现在DOM中的话，你肯定会有cookie， 所以还是在cookie中使用csrf token吧!

警告

如果你的view并不在渲染模板时囊括了csrftoken模板标签，Django可能没办法设置CSRF tokencookie。当表单是动态地添加到页面时，这种情况经常发生，为此django提供了view装饰器来强迫设置cookieensure_csrf_cookie()。

最后, 你必须设置AJAX请求头来确保CSRFtoken不会泄露给外站。

function csrfSafeMethod(method) {

    // these HTTP methods do not require CSRF protection

    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));

}

function sameOrigin(url) {

    // test that a given url is a same-origin URL

    // url could be relative or scheme relative or absolute

    var host = document.location.host; // host + port

    var protocol = document.location.protocol;

    var sr_origin = '//' + host;

    var origin = protocol + sr_origin;

    // Allow absolute or scheme relative URLs to same origin

    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||

        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||

        // or any other URL that isn't scheme relative or absolute i.e relative.

        !(/^(\/\/|http:|https:).*/.test(url));

}

$.ajaxSetup({

    beforeSend: function(xhr, settings) {

        if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {

            // Send the token to same-origin, relative URLs only.

            // Send the token only if the method warrants CSRF protection

            // Using the CSRFToken value acquired earlier

            xhr.setRequestHeader("X-CSRFToken", csrftoken);

        }

    }

});

提示

由于jQuery1.5中出现了一个bug，上面的例子在jQuery1.5无法正常运作。保证你使用的jQuery版本至少是1.5.1的。

你可以在jQuery1.5以及更高的版本中使用 settings.crossDomain  来替换上面例子中的sameOrigin方法:

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

        }

    }

});

提示

在https://www.djangoproject.com/weblog/2011/feb/08/security/中有一个更简单的“same origin test” 例子用以测试相对域名。 上面的sameOrigin 测试所提供的功能超过了这篇文章介绍的方法，该博客的方法是用来边缘测试的。