当 POST 是唯一方法时，如何使用 jQuery 从标头中检索 csrf 令牌？

Question

我正在用 Spring 编写 Rest Api，并将 jQuery 用于前面使用此 api 的应用程序。会话存储在 cookie 中，因此我需要使用令牌进行 CSRF 保护。令牌在请求/响应标头中发送并存储在页面上的元标记中。 这不是完整的 SPA，因此在身份验证和注册时，我发送单独的 html 页面：index.html（用于经过身份验证的用户）、login.html（登录页面）、register.html（注册页面）。这是问题所在，我不知道如何在注册和登录时检索 csrf 令牌，因为第一个也是唯一的请求始终是 POST 但不知何故我需要先在页面上设置 csrf 令牌。我检索的静态页面只是通过调用静态资源：window.location = '/register.html';例如。我尝试为“/token”端点设置获取请求，该端点仅返回带有状态的 ResponseEntity 并从标头中获取令牌，但随后在 javascript 中显示错误 jqXHR.getResponseHeader('X-CSRF-TOKEN') 不是函数... 。 诡异的。在这种情况下，如何使用 jquery 编写从标头中检索令牌的方法？

例如，这里是我的 register.js 文件以及我如何处理获取和附加令牌。

In login page i have button whch redirects on registration page:

 $('#registerBtn').on('click', function () {
    window.location = '/register.html';
});
--------------------------------
And registration page is: 

    $(document).ready(function () {
    setCsrfToken();
    $('#submit').on('click', function () {
        return $.ajax({
            url: '/registration',
            type: 'POST',
            beforeSend: function (request) {
                setHeaderWithCsrfToken(request);
            },
            data: $('#registrationForm').serialize(),
            timeout: 3000
        }).then(function (data, textStatus, jqXHR) {
            console.log(jqXHR.status);
        }, function (jqXHR) {
            if (jqXHR === 422) {
                // $('#registrationForm').append(jqXHR);
                alert(jqXHR.status);
            } else {
                alert(jqXHR.status);
            }
        });
    });
});

// simple get method to retrieve response header with token
function setCsrfToken() { // TODO: how to make it reusable?
    return $.ajax({
        url: '/token',
        type: 'GET',
        timeout: 3000
    }).always(function (jqXHR) {
        getCsrfToken(jqXHR);
    });
}

function getCsrfToken(jqXHR) {
    $('meta[name="X-CSRF-TOKEN"]').attr('content', 
jqXHR.getResponseHeader('X-CSRF-TOKEN'));
    $('meta[name="X-CSRF-HEADER"]').attr('content', 
jqXHR.getResponseHeader('X-CSRF-HEADER'));
}

function setHeaderWithCsrfToken(request) {
    var token = $('meta[name="X-CSRF-TOKEN"]').attr('content');
    var header = $('meta[name="X-CSRF-HEADER"]').attr('content');
    request.setRequestHeader(header, token);
}

Answer 1

我认为您在 AJAX 回调函数中使用了错误的参数。试试这个：

$.ajax({
    url: '/token',
    type: 'GET',
    timeout: 3000
}).done(function (data, textStatus, jqXHR) {
    getCsrfToken(jqXHR);
});