Call Modal in Codeigniter 'CSRF & AJAX' REPOERROR 403

Question

I'm trying to get Modal by clicking on a button to call my modal with form to add users :

html code:

<button data-toggle="modal" data-target="#mymodal" data-id="<?php echo 'manager_user/user_add';?>" id="menu" class="btn btn-sm btn-primary">
Add User</button>

and in my Modal form the input with csrf name & hash is inserted !

<input type="hidden" name="csrf_token" value="<?=$this->security->get_csrf_hash();?>">

ajax #menu is called by the button above.

    $(document).ready(function() {
        $(document).on('click', '#menu', function(e) {
            e.preventDefault();
            var url = $(this).data('id'); // it will get action url
            $('#dynamic-content').html(''); // leave it blank before ajax call
            $('#modal-loader').show(); // load ajax loader

            $.ajax({
                url: url,
                type: 'POST',
                dataType: 'html'
            })
            .done(function(data) {
                console.log(data);
                $('#dynamic-content').html('');
                $('#dynamic-content').html(data); // load response 
                $('#modal-loader').hide(); // hide ajax loader 
            })
            .fail(function() {
                $('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
                $('#modal-loader').hide();
            });
        });
    });



$config['csrf_protection'] = TRUE;
$config['csrf_token_name'] = 'csrf_token';
$config['csrf_cookie_name'] = 'csrf_cookie_token';
$config['csrf_expire'   ] = 7200;
$config['csrf_regenerate'] = FALSE;

When i turn csrf_protection to FALSE it works

I did also add a meta to my header !! so when I click to show my modal to add user I get 403 Forbidden ERROR.

and Error AJAX Message : Something went wrong, Please try again...

how to I resolve the csrf issue?

also this answer expains pretty well how to implement csrf with ajax: https://stackoverflow.com/a/16140018/2275490. the trick is to send the csrf token with your ajax call to the controller, get it approved and create+send a new token back to the html with the ajax done/success function. This repeats with each ajax call — Vickel, Apr 06 '20 at 22:48

score 0 · Answer 1 · answered Jan 15 '23 at 19:38

You can create a controller or method to retrieve csrf data in the form of an array, when you perform an action via ajax the csrf token will automatically change. My solution is to retrieve the csrf data again via the controller or method that we created and then call repeatedly via ajax maybe my way is not the best but this way can solve your problem

//Helper

function csrf(){
  $CI = get_instance();
  $csrf = [
    'name_key' => $CI->security->get_csrf_token_name(),
    'hash' => $CI->security->get_csrf_hash()
  ];
return $csrf;
}

//Controller

<?php 
class Sec extends CI_Controller{
    public function csrf_sec(){
        echo json_encode(csrf());
    }
}

//Modal form

<input type="hidden" id="csrf_key" name="<?=csrf()['name_key'];?>" value="<?=csrf()['hash'];?>">

//ajax

//get csrf one
$.ajax({
    url: urls.concat('Sec/csrf_sec'),
    dataType: 'json',
    success: function (x) {
        var hash = x.hash;
        $.ajax({
            url: urls.concat('Admin/mukimid'),
            data: { id: id, key: key, csrf_key: hash },
            dataType: 'json',
            method: 'post',
            success: function (data) {
                //get csrf two
                $.ajax({
                    url: urls.concat('Sec/csrf_sec'),
                    dataType: 'json',
                    success: function (x) {
                        $('#csrf_key').val(x.hash);
                    }
                });
                $('#id').val(data.id);
                $('#nama_mukim').val(data.nama_mukim);
                $('#nama_imum_mukim').val(data.nama_imum_mukim);
                $('#luas').val(data.luas);
            }
        });
    }
});

Call Modal in Codeigniter 'CSRF & AJAX' REPOERROR 403

1 Answers1