Codeigniter CSRF valid for only one time ajax request

Question

I want to upload image on the server on change event of jQuery but using codeigniter csrf I am able to upload image only one time. How can I upload images using ajax for multiple requests.Please keep in mind when I set this

config['csrf_protection'] = FALSE;

then I am able to send multiple request jQuery onchange event but when csrf_protection is going to be false then I think there is no advantage of csrf. so the question is how can I send multiple requests using ajax while csrf_protection is enable. My jquery code is following

$("#avatar").change(function(){
    var link = $("#avatar").val();     
    $.ajax({
        url : "<?php echo base_url('main/test'); ?>",
        type: 'post',
        data: {'<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>',"id":"hello","link":link},            
        success : function(data)
        {   
            alert(data);
        }  
    });
});

My controller:

public function test()
{
    $config['upload_path'] = './uploads/';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size'] = 500;
    $config['max_width'] = 260;
    $config['max_height'] = 260;
    $this->load->library('upload', $config);
    if (!$this->upload->do_upload('link')) {
        echo "error";
    } else {
        $data = array('upload_data' => $this->upload->data());
        $image_name = $data['upload_data']['file_name'];
        echo $image_name;
    }
}

score 23 · Accepted Answer · edited May 01 '19 at 00:46

In my opinion you should try to recreate your csrf token each request

Try this code example...

For the js funcion

var csrfName = '<?php echo $this->security->get_csrf_token_name(); ?>',
    csrfHash = '<?php echo $this->security->get_csrf_hash(); ?>';
("#avatar").change(function(){
    var link = $("#avatar").val();

    var dataJson = { [csrfName]: csrfHash, id: "hello", link: link };

    $.ajax({
        url : "<?php echo base_url('main/test'); ?>",
        type: 'post',
        data: dataJson,            
        success : function(data)
        {   
            csrfName = data.csrfName;
            csrfHash = data.csrfHash;
            alert(data.message);
        }  
    });
});

and for the controller

public function test() { 
    $config['upload_path'] = './uploads/'; 
    $config['allowed_types'] = 'gif|jpg|png'; 
    $config['max_size'] = 500; 
    $config['max_width'] = 260; 
    $config['max_height'] = 260; 

    $reponse = array(
                'csrfName' => $this->security->get_csrf_token_name(),
                'csrfHash' => $this->security->get_csrf_hash()
                )

    $this->load->library('upload', $config); 
    if (!$this->upload->do_upload('link')) { 
        $reponse['message'] = "error"; 
    } 
    else { 
        $data = array('upload_data' => $this->upload->data()); 
        $image_name = $data['upload_data']['file_name']; 
        $reponse['message'] = $image_name; 
    } 

    echo json_encode($reponse);
}

Let me know and good luck

Note: When someone ask you for posting more data to the question, don't post it as a comment or answer, it's better to edit the question itself and adding the stuff

Hi Edu, any suggestions on how I can go about recreate your csrf token each request? Thanks in advance for your insights. — user752746, Mar 20 '19 at 17:56

score 4 · Answer 2 · edited Jan 30 '18 at 05:57

4

You can set this in config.php

$config['csrf_regenerate'] = FALSE;

so the csrf protection is valid during all the session time it will solve your problem. If you set $config['csrf_regenerate'] = true; then CI generate new csrf token every request so your old csrf token not match with new generated csrf token

edited Jan 30 '18 at 05:57

Muhammad Hassaan

7,296
6
30
50

answered Jun 30 '17 at 09:03

Eloise85

648
1
6
26

5

I searched a lot and can tell that use this approach is not recomended, it will cause loss of security, there are other methods. – Marcelo Agimóvel Nov 28 '17 at 02:16
1

I agree Marcelo CSRF protection is necessary on public web apps. – Eloise85 Nov 30 '17 at 08:08
I find out that always regenerate csrf token is not the best way and the problems it bring's to multiple tabs (example) may break your app, so there are other ways. It's a shame CI doesn't have any solution to that, it really makes me sad and I'm leaving code igniter (for other reasons as well). – Marcelo Agimóvel Nov 30 '17 at 12:31
I remember I had the same trouble but I found a workaround, I think you should post this question on CI's forum. For me CI stay a good framework for medium/small sites and I think CI 4 will change soon, it's a good open source project maintained by an non profit team. – Eloise85 Dec 22 '17 at 14:29
@MarceloAgimóvel CSRF token is intended to be used on security critical app.. what kind of condition requires your user to open this app in multiple tabs? Multiple tabs are used usually in reading app only (news/blog). User shouldn't open multiple tabs for banking / online money transfer / managing company data's app. – Daniel Wu Sep 13 '22 at 04:50

score 1 · Answer 3 · edited Oct 22 '19 at 15:50

1

All you need to do is reload the CSRF token in your AJAX response. It is that simple!.

edited Oct 22 '19 at 15:50

Lets-c-codeigniter

682
2
5
18

answered Dec 22 '17 at 14:33

Eloise85

648
1
6
26

All you need is that your ajax controler's response is in json format and in your json you can pass the new csrf token, your frontend parse the json and replace the scrf value in your form's hidden input. Is that clear enough ? – Eloise85 Dec 31 '17 at 11:43

Vishnu Bhadoriya · Answer 4 · 2019-06-20T13:20:23.773

$config['csrf_regenerate'] = TRUE;

keep auto generate to true it will be more safer. In similar case when csrf is expired in first request. What i have implemented

$(document).ajaxComplete(function (event, xhr, settings) {
 let response = xhr.responseText,
 let obj = JSON.parse(response),
 let csrfData = obj.csrf;
 document.querySelector('input[name="' + csrfData.name + '"]').value = csrfData.hash; 
}); //Also here you can update any other non input element

In every ajax response we are passing csrf data in which latest csrf data will be replaced with current one

Sample response from request

{ 
csrf : {
  name : 'csrf_name',
  hash : 'qw76sd7s6f78sdfs8dfs9df8cx9'
 }
}

I update csrf token in every ajax request. Also don't choose this method if you are working with multi tab environment

score 1 · Answer 5 · answered Aug 03 '19 at 09:29

Each time you make a request, the csrf_token is being updated by CI. That's why the CSRF only work once. So everytime we make a request we need to update the csrf_token too. I solve this problem by doing this.

Conroller: get the updated csrf using this code.

public function update_csrf()
{
  $data['csrf_hash'] = $this->security->get_csrf_hash();
  echo json_encode($data);
}

AJAX: replace the old value of your csrf name="csrf_token_name"

var jqXHR = $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
        })
        jqXHR.done(function(response) {
            $('input[name=csrf_token_name]').val(response.csrf_hash); //update the csrf to the form 
        })
        jqXHR.fail(function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        });

Important!: use dataType: 'json'

So now each time you have a successful request, the csrf_token is updated too and you are now free from 403 (Forbidden) error.

score 1 · Answer 6 · answered Dec 25 '19 at 04:52

Maybe you can try using jquery cookie

First you need to add this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

then change your code to this

$("#avatar").change(function(){
var link = $("#avatar").val();     
$.ajax({
    url : "<?php echo base_url('main/test'); ?>",
    type: 'post',
    data: {csrf_test_name: $.cookie('csrf_cookie_name'),"id":"hello","link":link},
    dataType : "JSON",
    success : function(data)
    {   
        alert(data);
    }  
});

Finally you can try to set your csrf_protection to true

[csrf_protection] = TRUE;

the most simplest than others. – Noryn Basaya Jun 30 '22 at 14:20 — Noryn Basaya, Jun 30 '22 at 14:20

score 0 · Answer 7 · answered Apr 08 '18 at 07:06

add this at a js file which is loaded every page (I put this at the end of jquery.js )

    $.ajaxSetup({
        beforeSend:function(jqXHR, Obj){
            var value = "; " + document.cookie;
            var parts = value.split("; csrf_cookie_name=");
            if(parts.length == 2)   
            Obj.data += '&csrf_token='+parts.pop().split(";").shift();
        }
    });

(notice that in every ajax request you can not have empty data to send)

"csrf_cookie_name" at top defined in config.php

$config['csrf_cookie_name'] = 'csrf_cookie_name';

score 0 · Answer 8 · answered Feb 11 '19 at 17:47

Please try like my code. its working my application

your view file

$token_name = $this->security->get_csrf_token_name();
$token_hash = $this->security->get_csrf_hash();

<input type="text" id="search-text" name="parent_name" placeholder="Search" value=""  >
<input type="hidden" id="csrf" name="<?php echo $token_name; ?>" value="<?php echo $token_hash; ?>" />

after set jquery post method like below

// Get Keyup 
jQuery( "#search-text").keyup(function() {
    // Get Data 
    var val       = jQuery("#search-text").val();
    var hashValue = jQuery('#csrf').val();

    // Get jquery post for ajax task
    jQuery.post( 
        '<?php echo $base_controler; ?>',
        {val:val,'<?php echo $this->security->get_csrf_token_name(); ?>':hashValue}, 
        function(data)
        { 
            // Get return data to decode
            var obj = jQuery.parseJSON(data);
            // Get csrf new hash value
            var new_hash = obj.csrfHash;
            // Set csrf new hash value update
            jQuery('#csrf').val(new_hash);

        }
    );        

});

please set your controller like below

$reponse = array(
        'csrfName' => $this->security->get_csrf_token_name(),
        'csrfHash' => $this->security->get_csrf_hash()
        );
echo json_encode($reponse);

above all code recreate your csrf token each request.

score -1 · Answer 9 · answered Jan 05 '18 at 12:47

Edit the config:

$config['csrf_exclude_uris'] = ['controller/method'];

Array can include all whitelisted controllers/methods you want the csrf protection to be disabled for.

The array can also handle regular expressions such as:

$config['csrf_exclude_uris'] = array(
                                        'api/record/[0-9]+',
                                        'api/title/[a-z]+'
                                );

For more information visit Codeigniter Documentation - Security Class

Please note; although this answer could be great for APIs, it's not a good practice for ajax -or other post- requests. Disabling CSRF may cause security problems. — semihcosu, Jun 06 '18 at 23:15

Codeigniter CSRF valid for only one time ajax request

9 Answers9

Linked