来自文档:
AJAX¶
虽然上述方法可以用于 AJAX POST 请求,但它有一些不便之处:您必须记住在每个 POST 请求中将 CSRF 令牌作为 POST 数据传递。为此,有一种替代方法:在每个 XMLHttpRequest 上,将自定义 X-CSRFToken 标头设置为 CSRF 令牌的值。这通常更容易,因为许多 JavaScript 框架提供了允许在每个请求上设置标头的钩子。
首先,您必须获得 CSRF 令牌。如何做到这一点取决于是否启用了 CSRF_USE_SESSIONS 设置。
如果 CSRF_USE_SESSIONS 为 False,则获取令牌¶
令牌的推荐来源是 csrftoken cookie,如果您如上所述为您的视图启用 CSRF 保护,则会设置它。
注意
CSRF 令牌 cookie 默认命名为 csrftoken,但您可以通过 CSRF_COOKIE_NAME 设置控制 cookie 名称。
默认情况下,CSRF 标头名称为 HTTP_X_CSRFTOKEN,但您可以使用 CSRF_HEADER_NAME 设置对其进行自定义。
获取令牌很简单:
// 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');
上面的代码可以通过使用JavaScript Cookie库代替getCookie来简化:
var csrftoken = Cookies.get('csrftoken');
注意
CSRF 令牌也存在于 DOM 中,但前提是在模板中使用 csrf_token 明确包含。 cookie 包含规范令牌; CsrfViewMiddleware 将更喜欢 cookie 而不是 DOM 中的令牌。无论如何,如果令牌存在于 DOM 中,则保证您拥有 cookie,因此您应该使用 cookie!
警告
如果您的视图未呈现包含 csrf_token 模板标签的模板,则 Django 可能不会设置 CSRF 令牌 cookie。这在表单被动态添加到页面的情况下很常见。为了解决这种情况,Django 提供了一个视图装饰器来强制设置 cookie:ensure_csrf_cookie()。
如果 CSRF_USE_SESSIONS 为 True 则获取令牌¶
如果激活 CSRF_USE_SESSIONS,则必须在 HTML 中包含 CSRF 令牌并使用 JavaScript 从 DOM 中读取令牌:
{% csrf_token %}
<script type="text/javascript">
// using jQuery
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
</script>
在 AJAX 请求上设置令牌¶
最后,您必须在 AJAX 请求中实际设置标头,同时在 jQuery 1.5.1 及更高版本中使用 settings.crossDomain 保护 CSRF 令牌不被发送到其他域:
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);
}
}
});
简单来说,就是在一个js文件中提供getCookie函数并设置csrftoken变量。
然后添加 ajaxSetup 函数,这样就可以了。