ajax - 当 CodeIgniter 3 中的 csrf 再生为真时，如何使 Ajax 工作？

Question

我目前正在 CI3 上开展我的项目，但我在 上遇到了一些问题CSRF_Regeneration .

我的目的:

当用户输入电子邮件时，我将通过检查电子邮件是否存在来在用户登录和注册时使用 CSRF 来保护我的表单数据。

如果 CSRF_generation 为 False，则有效

当我配置 时就可以工作了CSRF_Regeneration 至 错误 和 csrf_expire 将在 到期7200 .

问题 当我启用 时会出现如下问题CSRF_generation 至 真

POST http://localhost/com/account/register 403 (Forbidden)

这是用于检查电子邮件是否存在的 Ajax

<script type="text/javascript">
    $(document).ready(function () {

        $("#email-error").css({'display': 'none', 'color': 'red'});
        $("#email").keyup(function () {
            var emailValue = $("#email"); // This is a bit naughty BUT you should always define the DOM element as a var so it only looks it up once
            var tokenValue = $("input[name='csrf_token_name']");
//            console.log('The Email length is ' + emailValue.val().length);
            if (emailValue.val().length >= 0 || emailValue.val() !== '') {
//                console.log('Token is ' + tokenValue.val()); // Now why is this not getting the coorect value?? It should
                $.ajax({
                    type: "post",
                    url: "<?php echo base_url('account/check_user_existing'); ?>",
                    data: {
                        '<?php echo $this->security->get_csrf_token_name(); ?>': tokenValue.val(),
                        email: $("#email").val()
                    },
                    dataType: "json",
                    cache: false,
                    success: function (data) {
//                        console.log('The returned DATA is ' + JSON.stringify(data));
//                        console.log('The returned token is ' + data.token);
                        tokenValue.val(data.token);
                        if (data.response == false) {
                            $("#email-error").css({'display': 'none'});
                            $(".form-error").css({'border': '', 'background-color': '', 'color': ''});
                            document.getElementById("csubmit").disabled = false;
                        } else {
                            $("#email-error").css({'display': 'inline', 'font-size': '12px'});
                            $(".form-error").css({'border': '1px solid red', 'background-color': 'rgba(255, 0, 0, 0.17)', 'color': 'black'});
                            document.getElementById("csubmit").disabled = true;
                        }
                    }
                });
            }
        });
    });
</script>

这里是我的表格

<?PHP echo form_open('account', array('method' => 'POST', 'id' =>'createform')); ?>
 <div class="control-group">
   <label class="control-label"  for="lname">Last Name</label>
   <div class="control">
    <?PHP echo form_input('lastname', set_value('lastname', ''), 'id="lastname" class="form-control ln-error" ') ?>
    </div>
   </div>
 <div class="control-group">
   <label class="control-label"  for="fname">First Name</label>
     <div class="control">
    <?PHP echo form_input('firstname', set_value('firstname', ''), 'id="firstname" class="form-control ln-error" ') ?>
     </div>
   </div>
  <div class="control-group">
  <label class="control-label"  for="email"> Email <span id="email-error">Email is existed</span></label>
   <div class="control">
     <?PHP echo form_input('email', set_value('email', ''), 'id="email" class="form-control ln-error" placeholder="Example@website.com" ') ?>
      </div>
     </div>
  <div class="control-group">
      <label class="control-label" >Password</label>
       <div class="control">
       <?PHP echo form_password('pass', set_value('pass', ''), 'id="pass" class="form-control ln-error" ') ?>
      </div>
     </div>
  <div class="control-group">
     <div class="controls">
       <?PHP echo form_submit('csubmit', "Create Account", 'id="csubmit" class="btn btn-success btn-lg" ') ?>
       </div>
      </div>
<?PHP echo form_close(); ?>

这是 Controller 检查用户的方法

public function check_user_existing() {

        $data = $this->input->post('email'); // This should be passed in as a parameter as depending upon Form Names isn't that good.
        $new_token = $this->security->get_csrf_hash();
        $response = FALSE; // Set the default so we know what it is in case the IF fails or we could use an else at the end but this is nicer.
        $check_email = $this->user->check_user_exist_email($data);
        if ($check_email == TRUE) {
            $response = TRUE; // Change it to TRUE if it's true but our $response Always has a KNOWN Value :)
        }
        echo json_encode(array('response' => $response, 'token' => $new_token));
        exit(); // This is here for safety... Terminate and leave!
    }

谢谢你的建议

Answer 1

我遇到了这个问题，我 没有 想设置 csrf_regeneration 至 错误 因为它不太安全。

所以我所做的是以下内容:

csrf_token_name = '<?php echo $this->security->get_csrf_token_name(); ?>';
csrf_cookie_name = '<?php echo $this->config->item('csrf_cookie_name'); ?>';
$(function ($) {
    // this bit needs to be loaded on every page where an ajax POST 
    var object = {};
    object[csrf_token_name] = $.cookie(csrf_cookie_name);
    $.ajaxSetup({
        data: object
    });
    $(document).ajaxComplete(function () {
        object[csrf_token_name] = $.cookie(csrf_cookie_name);
        $.ajaxSetup({
            data: object
        });
    });
});

如果您使用的是 blueimp/jQuery-文件上传您可以执行以下操作:

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
    data.formData = [
        {name: csrf_token_name, value: $.cookie(csrf_cookie_name)}
    ]
});

引用:

https://www.codeigniter.com/user_guide/libraries/security.html

http://jerel.co/blog/2012/03/a-simple-solution-to-codeigniter-csrf-protection-and-ajax

http://api.jquery.com/ajaxcomplete/

https://api.jquery.com/jquery.ajaxsetup/

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data#setting-formdata-on-upload-start