CodeIgniter CSRF Token and AJAX with JavaScript

When building web applications, it's important to implement security measures to prevent malicious attacks. Cross-Site Request Forgery (CSRF) is one such vulnerability that can be exploited by attackers to perform unauthorized actions on behalf of the user. CodeIgniter provides built-in support for CSRF protection, and in this tutorial, we'll see how to utilize it while making AJAX requests using JavaScript.

What is CSRF and how does it work?

In a CSRF attack, an attacker crafts a website link that when clicked by a user, performs a malicious action on a website where the user is logged in. For example, if the user is logged in to a bank's website, the attacker can craft a link that transfers funds from the user's account to the attacker's account. When the user clicks on the link, the action is performed without their knowledge or consent.

To mitigate this vulnerability, CodeIgniter generates a CSRF token for each form submission. This token is added as a hidden field in the form, and upon submission, the token is verified to ensure that the request is coming from a trusted source.

Enabling CSRF protection in CodeIgniter

By default, CSRF protection is enabled in CodeIgniter. However, we need to make sure that it is enabled and configured correctly in our application. The CSRF settings are defined in the config.php file located in application/config folder. We can enable CSRF protection by setting the csrf_protection configuration item to true:

$config['csrf_protection'] = true;

By default, CodeIgniter uses cookies to store and retrieve the CSRF token. We can also configure it to use session storage by setting the csrf_token_name configuration item:

$config['csrf_token_name'] = 'csrf_token';
$config['csrf_cookie_name'] = 'csrf_cookie';
$config['csrf_expire'] = 7200;
$config['csrf_regenerate'] = false;
$config['csrf_exclude_uris'] = array();

In the above example, we've set the csrf_token_name configuration item to csrf_token, and the csrf_cookie_name configuration item to csrf_cookie. We've also set the token expiry time to 7200 seconds (2 hours), and disabled token regeneration by setting the csrf_regenerate configuration item to false. Finally, we've excluded some URIs from CSRF protection by adding them to the csrf_exclude_uris configuration item.

Making AJAX requests with CSRF protection

When making AJAX requests, we need to include the CSRF token in the request header. We can retrieve the token using JavaScript and add it to the request. Here's an example:

$.ajax({
    method: "POST",
    url: "/path/to/api",
    data: { name: "John", age: 30 },
    beforeSend: function(xhr, settings) {
        xhr.setRequestHeader("X-CSRF-Token", getCSRFToken());
    }
})
.done(function( msg ) {
    alert( "Data Saved: " + msg );
});

function getCSRFToken() {
    var csrf_token = document.querySelector('meta[name="csrf-token"]').content;
    return csrf_token;
}

In this example, we're using jQuery's $.ajax function to make a POST request to an API endpoint. We're retrieving the CSRF token using the getCSRFToken function, which uses the document.querySelector method to retrieve the CSRF token from a meta tag in the HTML markup. We're then adding the token to the request header using the xhr.setRequestHeader method.

Conclusion

In this tutorial, we saw how to enable and configure CSRF protection in CodeIgniter, and how to make AJAX requests with CSRF protection using JavaScript. CSRF protection is an important security measure that can help prevent malicious attacks on our web applications.