Codeigniter fetching data with from ajax with CSRF on

Question

Hi there I have CSRF protection set to true in my codeigniter framework, I want to know how to apply CSRF token in my AJAX request because I am getting The action you requested is not allowed is my AJAX request , Here is the sample of the code I am working on:

HTML

     <button type="button" 
      class="btn btn-primary btn-sm edit_category" 
      data-id="<?= $category->category_id ?>">
          <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
     </button>

When the user clicks the button this JS runs:

$(document).on('click', '.edit_category', function() {

  $.ajax({
    type: 'POST',
    url: base_url + 'admin/getinfo_category',
    data: {
      'category_id': $(this).data('id')
    },
    success:function(data){
      console.log( JSON.parse(data) );
    },
    error: function (data) {

      console.log('ajax error');
    } // end of error

  }); // ajax

});

Controller

public function getinfo_category() {
  if( ($this->session->userdata('logged_in') && $this->session->userdata('role') ) &&
  ($this->session->userdata('logged_in') == TRUE && $this->session->userdata('role') == 'admin' ) ) {

    $query = $this->admin_model->getinfo_category($this->input->post('category_id'));

    if( isset($query) ) {
      echo json_encode($query);
    } else {
      echo 'ajax fail';
    }

  } else {
      redirect(base_url() . 'admin/index');
  }
}

Model

 public function getinfo_category($category_id) {
          $query = $this->db->select('category_name, category_desc')->where('category_id', $category_id)->get('category');

          if($query) {
            return $query->row();
          } else {
            return false;
          }
        }

Right now what it is supposed to do is fetching the data from the db based $category_id then outputting the result on the console.

EDIT

I am sorry I am still getting the error

Answer 1

You must send the CSRF token to your request :

$(document).on('click', '.edit_category', function() {

  $.ajax({
    type: 'POST',
    url: base_url + 'admin/getinfo_category',
    data: {
      'category_id': $(this).data('id'),
      '<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>',
    },
    success:function(data){
      console.log( JSON.parse(data) );
    },
    error: function (data) {

      console.log('ajax error');
    } // end of error

  }); // ajax

});

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

Answer 2

How about this approach.

$.ajaxSetup({
    headers: {
        '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
    }
});

$(document).on('click', '.edit_category', function() {

  $.ajax({
    type: 'POST',
    url: base_url + 'admin/getinfo_category',
    data: {
      'category_id': $(this).data('id')
    },
    success:function(data){
      console.log( JSON.parse(data) );
    },
    error: function (data) {

      console.log('ajax error');
    } // end of error

  }); // ajax

});