首页 文章

当POST只是方法时,如何用jQuery从头中检索csrf令牌?

提问于
浏览
0

我正在使用Spring编写Rest Api并使用jQuery作为使用此API的前端应用程序 . 会话存储在cookie中,因此我需要使用令牌进行CSRF保护 . 令牌在请求/响应头中发送并存储在页面上的元标记中 . 这不是完整的SPA,因此在身份验证和注册时我会发送单独的html页面:index.html(对于经过身份验证的用户),login.html(登录页面),register.html(注册页面) . 这是问题,我不知道如何在注册和登录时检索csrf令牌,因为第一个和唯一的请求总是POST但不知何故我需要首先在页面上设置csrf令牌 . 我检索的静态页面只是通过调用静态资源:window.location ='/ register.html';例如 . 我试图为“/ token” endpoints 设置get请求,该 endpoints 返回仅具有状态的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);
}

1 回答

  • 1

    我认为你在AJAX回调函数中使用了错误的参数 . 试试这个:

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

相关问题