我正在开发一个使用 Django REST Framework 作为后端的项目(假设在api.somecompany.com
但有一个 React.js 前端(位于www.somecompany.com
) 不由发出 AJAX 请求的 Django 提供服务。
因此,我不能使用 Django 的传统方法让模板包含这样的 CSRF 令牌<form action="." method="post">{% csrf_token %}
我可以向 Django REST Framework 发出请求api-auth\login\
url,它将返回此标头:Set-Cookie:csrftoken=tjQfRZXWW4GtnWfe5fhTYor7uWnAYqhz; expires=Mon, 01-Aug-2016 16:32:10 GMT; Max-Age=31449600; Path=/
- 但我无法检索此 cookie 以与我的 AJAX 请求一起发回X-CSRFToken
(我的理解是单独的子域),并且它似乎不会自动包含在内。
这是我的相关代码:
// 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;
}
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)) {
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
}
});
当页面加载时,我调用它以确保我有一个令牌:
$.ajax(loginUrl, { method: "OPTIONS", async: false })
.done(function(data, textStatus, jqXHR) {
console.log(jqXHR)
app.csrftoken@ = $.cookie("csrftoken")
console.log($.cookie("csrftoken"))
console.log(app.csrftoken)
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR)
});
这并不完全干净,但我还没有向自己证明这个概念。
当前端和后端位于不同的端口/域时,验证/防止 CSRF 的“正确”方法是什么?