403 Forbidden Access to CodeIgniter controller from ajax request

Question

Im having trouble with sending an ajax request to codeigniter controller. It is throwing back a 404 Forbidden Access error. I have found some sort of similar question to thi

Answer 1

CodeIgniter use csrf_protection, you can use it with Ajax and JQuery simply. This (ultimate ?) solution work on multiple Ajax request (no 403 ;-) and preserve the security).

Change the configuration

Open the file /application/config/config.php and change the line $config['csrf_token_name'] by :

$config['csrf_token_name'] = 'token';

You can use another name, but change it everywhere in future steps.

Add CSRF in your Javascript

Add script in a view; for me is in footer.php to display the code in all views.

This script create an object named CFG. This object can be used in your Javascript code. CFG.url contain the url of your website and CFG.token ... the token.

Automatically renew the CSRF

Add this code in your part $(document).ready(function($){---}) as

$(document).ready(function($){
    $.ajaxSetup({data: {token: CFG.token}});
    $(document).ajaxSuccess(function(e,x) {
        var result = $.parseJSON(x.responseText);
        $('input:hidden[name="token"]').val(result.token);
        $.ajaxSetup({data: {token: result.token}});
    });
});

This script initialize the CSRF token and update it everytime when a request Ajax is sended.

Send the CSRF in PHP

I've created a new controller, named Ajax. In CodeIgniter, the link to use it is http://www.domain.ltd/ajax/foo

send(array('foo' => 'bar'));
    }

    private function send($array) {

        if (!is_array($array)) return false;

        $send = array('token' => $this->security->get_csrf_hash()) + $array;

        if (!headers_sent()) {
            header('Cache-Control: no-cache, must-revalidate');
            header('Expires: ' . date('r'));
            header('Content-type: application/json');
        }

        exit(json_encode($send, JSON_FORCE_OBJECT));

    }

}

The send function add the CSRF automatically and transform an array in object.

The final result

Now, you can use Ajax with JQuery very simply !

$.post(CFG.url + 'ajax/foo/', function(data) {
    console.log(data)
}, 'json');

Result :

{"token":"8f65cf8e54ae8b71f4dc1f996ed4dc59","foo":"bar"}

When the request get data, the CSRF is automatically updated to the next Ajax request.

Et voilà !