How to ensure continuous CSRF token validation for all AJAX requests in CodeIgniter 4?

Question

Her I have created login form and with csrf token If i send first request it will validate properly. Now I tried with wrong passwod than new csrf token is received from server. And When Again i will resend request with correct password it will show error 403.

Here is my code. 1 . View File

<form action="<?=$module."/validate_login"?>" id="form" name="form">
                        <input type="hidden" class="txt_csrfname" name="<?= csrf_token() ?>" value="<?= csrf_hash() ?>" />
                        <div class="mb-4">
                            <label class="mb-1 text-dark">Email</label>
                            <input type="email" class="form-control form-control" id="username" name="username"
                                placeholder="hello@example.com">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="mb-4 position-relative">
                            <label class="mb-1 text-dark">Password</label>
                            <input type="password" id="dz-password" name="password" class="form-control"
                                placeholder="Password">
                            <span class="show-pass eye">
                                <i class="fa fa-eye-slash"></i>
                                <i class="fa fa-eye"></i>
                            </span>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-row d-flex justify-content-between mt-4 mb-2">
                            <div class="mb-4">
                                <div class="form-check custom-checkbox mb-3">
                                    <input type="checkbox" class="form-check-input" id="customCheckBox1">
                                    <label class="form-check-label" for="customCheckBox1">Remember my
                                        preference</label>
                                </div>
                            </div>
                            <div class="mb-4">
                                <a href="<?=base_url("forgot-password")?>" class="btn-link text-primary">Forgot
                                    Password?</a>
                            </div>
                        </div>
                       
                        <div class="text-center mb-4">
                            <button type="submit" class="btn btn-primary btn-block">Sign In</button>
                        </div>
                        <div class="form-row" id="alert-message" style="display: none;">
                            <div class="alert alert-danger alert-dismissible fade show">
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
                                </button>
                                <strong>Error!</strong> In-valid username or password.
                            </div>
                        </div>
                    </form>

2 . JS FILE

$("#form").validate({
    rules : {
        username : 'required',
        password : 'required'
    },
    messages : {
        username : 'Please enter e-mail',
        password : 'Please enter password'
    },
    submitHandler : function(form,e){
        e.preventDefault(); 
        var form_data = new FormData(form);
        $.ajax({
            url  : SITE_URL+"validate-login",
            type : "POST",
            contentType: false,
            cache: false,
            processData:false,
            data : form_data,
            beforeSend : function(){

            },
            success : function(response){
                $('.txt_csrfname').val(response.data.token);
                if(response.success == "1"){
                    $("#alert-message").css("display","none");  
                    window.location.href= SITE_URL+"Dashboard";                      
                }else{
                    console.log(response.data.token);
                    $("#alert-message").css("display","");
                }
            },
            error : function(){

            }
        });
    }
});

Controller

public function validate_login(){

 $request = service('request');
 $requestArr = $request->getPost();
 $responseArr = array("success"=>"1","data"=>array(),"message"=>"");
 $data = array();
 $data['token'] = csrf_hash();
 $ipaddress = $this->request->getIPAddress();


 $rules = [
     'username' => 'required|valid_email',
     'password' => 'required'
 ];

if($this->validate($rules)){
     $userArr = $this->Auth->login($requestArr['username']);    
     if(!empty($userArr)) {
         $verify_password = password_verify($requestArr['password'],$userArr->password);
         if($verify_password){
             $responseArr['success'] = "1"; 
             $responseArr['message'] = "Loged in successfully.";

             $this->session->set([                        
                 'tbl_users_id'=>$userArr->tbl_users_id,
                 'full_name'=>$userArr->full_name,
                 'username'=>$userArr->username,
                 'email'=>$userArr->email
             ]);

             $logArr = array(
                 'user_id' => $userArr->tbl_users_id,
                 'module' => $this->module,
                 'module_id' => $userArr->tbl_users_id,
                 'action' => "LOGIN",
                 'ip_address' => $ipaddress,
                 'remarks' => "User Loged In",
                 'raw_data'=> ""
             );

             insert_log($logArr);
         }else{
             $responseArr['success'] = "0";
             $responseArr['message'] = "In-valid username or password.";
         }
     }else{
         $responseArr['success'] = "0";
         $responseArr['message'] = "In-valid username or password.";
     }   
 }else{
     $responseArr['message']= "Required Fields are missing";
 }

 $responseArr['data']= $data;
 output($responseArr);

}

It will validate CSRF Token only first call. After that it will show 403 error. Want to validate csrf token with all ajax request.

Does this answer your question? [Codeigniter CSRF valid for only one time ajax request](https://stackoverflow.com/questions/38502548/codeigniter-csrf-valid-for-only-one-time-ajax-request) — Don't Panic, Sep 02 '23 at 05:05

score 0 · Answer 1 · answered Sep 01 '23 at 20:03

0

I'm not 100% sure, but if you use ajax for your form submission, you can send your data as JSON, or set any custom header for your request. Then you don't need to worry about any CSFR.

Also have a look at axios library, which can do both.

But rather confirm with someone with a better security knowledge.

answered Sep 01 '23 at 20:03

Dusan

3,284
6
25
46

This is incorrect - you need a CSRF token for AJAX POST requests, just as with any other POST request. The format of the data in your POST is irrelevant. – Don't Panic Sep 02 '23 at 05:07

How to ensure continuous CSRF token validation for all AJAX requests in CodeIgniter 4?

1 Answers1