Question

我正在做一些计算，以检查用户是否输入了有效金额。我在文本字段的keyup事件上调用JQuery方法。由于此请求将在keyup上一次又一次发送，因此我在窗体内创建了csrf令牌，并将其生成的值用于JQuery方法中。每次调用它时，都会出现错误“ 403 Forbidden”。请让我知道我在做什么错。

这是我的html：

<form id="form1" method="post" action="">
                             <?php 
                                                    $hash_name=$this->security->get_csrf_token_name();
                        $hash_value=$this->security->get_csrf_hash();
                        ?>
                        <input type="text" id="hash_value" value="<?php echo $hash_value;?>" style="display: none" />                           
                              <h3>Transfer to cash wallet</h3>
                              <div class="form-group form-animate-text" style="margin-top:40px !important;">
                                <input type="text" class="form-text" name="amount" id="ent_amount" onkeyup="check_balance(this.value)" required>
                                <span class="bar"></span>
                                <label>Amount to transfer</label>
                              </div>                                 
                              <h5 id="amount_over"></h5>                                  
                              <input type='button' class="btn btn-sm btn-primary m-t-n-xs" onclick="submitCash()" id='myBtn' value="Transfer" />
                            </form>

这是我的JQuery方法：

<script type="text/javascript">

function check_balance(str){

    $(document).ready(function(){   

        var hash_value=$("#hash_value").val();

         $.ajax({
             type: "POST",
             url: "<?php echo base_url(); ?>" + "Users/check_earning", 
             data: {amount: str, csrf_snt_token: hash_value},
             dataType: "text",  
             cache:false,
             success: 
                  function(data){
                   if(data==200){

                   }
                  else{

                    $('#amount_over').html('* Transfer amount is greater than total balance'); 

                    }


                  }
              });
         return false;

     });   


}
     </script>

这是我的控制器功能

public function check_earning(){

        $entered_amount=$this->input->post('amount');                   
        $total_earnings=500;           
        if($entered_amount>$total_earnings){

            echo "error";
        }
        else{

            echo "200";
        }

    }

任何帮助将不胜感激。

Answer 1

可以测试吗？

function check_balance(str){
        var hash_value = $("#hash_value").val();
        $.ajax({
            type: "POST",
            url: "<?php echo site_url('users/check_earning'); ?>", //changes
            data: ({amount: str, csrf_snt_token: hash_value}), //changes
            dataType: 'json',  
            cache:false,
            success:function(data){
                if(data.status == 0){

                }else{
                    $('#amount_over').html('* Transfer amount is greater than total balance'); 
                }
            }
        });
        return false;
    }

控制器：

public function check_earning() {
        $entered_amount = $this->input->post('amount');
        $total_earnings = 500;
        if ($entered_amount > $total_earnings) {
            $response_array['status'] = 1;
        } else {
            $response_array['status'] = 0;
        }
        echo json_encode($response_array);
        exit();
    }

Answer 2

您可以直接在JS中尝试从HTML尝试csrf令牌

 $.ajax({
         type: "POST",
         url: '<?php echo site_url("users/check_earning"); ?>', 
         data: {amount: str, '<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>'},
         cache:false,
         success: 
              function(data){
               if(data=='200'){

               }
              else{

                $('#amount_over').html('* Transfer amount is greater than total balance'); 

                }


              }
          });

请注意那里的一些更改。同样不要忘记在csrf_protection

中启用TRUE至config/config.php

Answer 3

我认为dataType: "text"是造成此问题的原因。尝试使用application/x-www-form-urlencoded或application/json的值，具体取决于后端预期的dataType。像这样-

          $.ajax({
             type: "POST",
             url: "<?php echo base_url(); ?>" + "users/check_earning", 
             data: {amount: str, csrf_snt_token: hash_value},
             dataType: "application/json",  
             cache:false,
             success: 
                  function(data){
                   if(data==200){

                   }
                  else{

                    $('#amount_over').html('* Transfer amount is greater than total balance'); 

                    }


                  }
              });

PS：User必须在端点user。

Answer 4

实际上，问题在于获取新生成的令牌。我在此页面上提出了多个Ajax请求。在对控制器的每个请求中，codeigniter生成新的CSRF令牌，而我一次又一次发送相同的令牌。我使用cookie来获取新鲜的CSRF令牌，因为Codeigniter将每个新鲜的CSRF令牌存储在cookie中。我从表格中删除了这些行

$hash_name=$this->security->get_csrf_token_name();
$hash_value=$this->security->get_csrf_hash();
<input type="text" id="hash_value" value="<?php echo $hash_value;?>" style="display: none" />

将其删除后，我使用JavaScript从Cookie中获取了新令牌。这是我的代码

<script type="text/javascript">

function get_cookie(ck) {    
    var name = ck + "=";
    var ca = document.cookie.split(';'); 
    for(var i=0; i<ca.length; i++) {
       var c = ca[i];
       while (c.charAt(0)==' ') c = c.substring(1);
       if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
   }
   return "";   
}

function check_balance(str){

    var csrf_ck=get_cookie('csrf_cookie_snt');
    $.ajax({
    type: "POST",
    url: '<?php echo site_url("users/check_earning"); ?>', 
    data: {amount: str, '<?php echo $this->security->get_csrf_token_name(); ?>':csrf_ck},
    dataType: "text",  
    cache:false,
    success: 
         function(data){
          if(data=='200'){

          }
         else{

           $('#amount_over').html('* Transfer amount is greater than total balance'); 

           }


         }
     });

}

</script>

jQuery在codeigniter中给出403禁止错误

4 个答案: