Question

我在使用Ajax的Phalcon中遇到CSRF保护组件时遇到了问题。

html表单

<form id="signup-form" onSubmit="onSignUpSubmit(); return false;">
    <input id="username" type="text" placeholder="Username" />
    <input id="password" type="password" placeholder="Password" />
    <input id="email" type="text" placeholder="Email" />
    <input id="signup-csrf-token" name="{{ security.getTokenKey() }}" val="{{ security.getToken() }}" type="hidden" />
    <button class="btn btn-primary btn-block" type="submit">Sign Up</button>
</form> <!-- #signup-form -->

Ajax代码

var username    = $('#username', '#signup-form').val(),
    password    = $('#password', '#signup-form').val(),
    email       = $('#email', '#signup-form').val(),
    csrfKey     = $('#signup-csrf-token').attr('name'),
    csrfValue   = $('#signup-csrf-token').attr('val');

    var postData = {
        'username': username,
        'password': password,
        'email': email
    };
    postData[csrfKey] = csrfValue;

    $.ajax({
        type: 'POST',
        url: '{{ url('/accounts/signup.action') }}',
        data: postData,
        dataType: 'JSON',
        success: function(result){
            console.log(result);
        }
    });

首次发送Ajax请求时，Controller中的$this->security->checkToken()函数返回true。但是第二次及以后，该函数返回false。

我认为每个HTTP请求的csrfToken更改都会导致此问题。但是如何解决呢？

任何人都可以帮助我吗？

Answer 1

您需要在AJAX成功响应中返回新的CSRF令牌。然后使用新令牌更新您的表单字段。

帐户/ signup.action

return json_encode((object) array( 'output' => $original_output, 'csrf' => (object) array('name' => $csrf_name, 'value' => $csrf_token) ));

<强>的Javascript

$.ajax({ type: 'POST', url: '{{ url('/accounts/signup.action') }}', data: postData, dataType: 'JSON', success: function(result){ $('input#signup-csrf-token') .attr('name', result.csrf.name) .val(result.csrf.value); console.log(result.output); } });

您还应该更改

$('#signup-csrf-token').attr('val');

到

$('#signup-csrf-token').val();

在Phalcon中使用带有Ajax的CSRF保护服务

1 个答案: