jquery - CORS、Ajax 和 CSRF

Question

django 应用程序中的 CSRF 预防支持通过 cookie 将 CSRF token 发送到客户端，并通过 header (X-CSRFToken) 或 cookie 接受来自客户端的 CSRF token 。这对于非 CORS、非 AJAX Web 应用程序来说效果很好。但如果您 a) 有一个通过 AJAX 与服务器通信的单页 Web 应用程序，并且 b) 单页 Web 应用程序托管在与服务器 (CORS) 不同的域中，那么它似乎不起作用。

问题在于，由于 CORS 限制，单页 Web 应用程序(来自domain1)无法使用 xhr.getResponseHeader 或 getCookie 读取服务器域(domain2)cookie。 javascript web 应用程序如何将适当的 CSRF token 发送到服务器，因为它无法读取 cookie？

xhr.getResponseHeader api 被限制检索 Set-Cookie 或 Set-Cookie2 header (按规范)，并且各种支持 CORS 的浏览器似乎强制执行此限制。同样，getCookie JS 函数将读取 webapp 域(domain1)中的所有非 httpOnly cookie，但不会读取服务器在其域(domain2)中设置的 cookie。

这在非 CORS 情况下不是问题，但在我们的应用程序中，我们希望将 API 托管在与客户端 Web 应用程序不同的域中。有什么建议么？

Answer 1

我想我遇到了同样的问题，并通过服务器端和客户端的组合解决了它。服务器端(Django-Python):

origin = request.META.get('HTTP_ORIGIN', None)
if origin and origin in settings.safe_origins:
    response['Access-Control-Allow-Origin'] = origin
    response['Access-Control-Allow-Credentials'] = 'true'
    response['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS'
    response['Access-Control-Allow-Headers'] = request.META.get('Access-Control-Allow-Headers', 'x-requested-with, X-CSRFToken',)
    response['Access-Control-Max-Age'] = 15
    response['Allow'] = 'GET, POST, PUT, DELETE, OPTIONS'

启动时的客户端:

$.ajaxPrefilter(function(options, originalOptions, jqXHR)
{
    options.crossDomain =
    {
        crossDomain: true
    };
    options.xhrFields =
    {
        withCredentials: true
    };
});

function csrfSafeMethod(method)
{
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup(
{
    crossDomain: false, // obviates need for sameOrigin test
    beforeSend: function(xhr, settings)
    {
        if (!csrfSafeMethod(settings.type))
        {
            xhr.setRequestHeader("X-CSRFToken", csrf);
        }
    }
});

然后，为了更好地衡量 $.ajax 调用本身:

$.ajax(
{
    type: "POST",
    url: theUrl,
    data: theData,
    contentType: 'application/x-www-form-urlencoded',
    dataType: 'json',
    xhrFields:
    {
       withCredentials: true
    }
});

对我来说，我错过的就是这部分:

xhrFields:
{
   withCredentials: true
}

希望这对某人有帮助。