Implementing Cross-Site Request Forgery Protection using Double Submit Cookies Pattern

Cross-Site Request Forgery(CSRF) is a kind of attack that targets executing actions chosen by attacker in web applications from an authenticated user end by tricking the user. Mainly these attacks target state changing requests such as change email, fund transferring etc. but not to theft of data.

You can find the implementation of Synchronizer Token Pattern strategy to prevent CSRF in here. Today we gonna discuss on new strategy called Double Submit Cookies Pattern which is quite popular.

Check the following php based voting application that I have implemented for the demonstartion purpose.

lathlk/CSRF-Double-Submit-Cookies-Pattern

Here we gonna make sure that a partcular vote is made only by the authenticated user whereas the attacker fails in following flow..

1. Logs into the application (username: username, password: password)

2. Vote and Submit

Initially, a unique session identifier(session_id) and token(csrf_token) are generated and set as cookies once the login is successful.

It has been implemented as below:

// Generate session id and csrf token
$session_id = uniqid();
$csrf_token = uniqid() . $session_id;
// set session_id, csrf_token and username(this is optional and used // for saving votes) cookies
setcookie('session_id', $session_id, time() + (86400 * 30), "/");
setcookie('csrf_token', $csrf_token, time() + (86400 * 30), "/");
setcookie('username', $username, time() + (86400 * 30), "/");

Main advantage of this approach is the memory saving since we are not storing session id or csrf token in server side.

Added cookies to the browser are visible as follows:

Secondly, the loaded homepage will display the voting form. csrf token is retrieved from the cookie and set its value for the hidden field inside the voting form when the page is loaded.

Cookie value retrieving and setting the hidden field value (home.php)

$(document).ready(function(){
    $("#csrf_token").val(getCookie("csrf_token"));
});
function getCookie(name) {
    var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return v ? v[2] : null;
}

value embedded in the form can be seen using element inspector as follows:

Finally, the form is submitted with the csrf token and it is validated against the csrf token cookie.

Source code as follows(vote.php):

// Validate the csrf token cookie and the csrf_token submitted along
// with the form
if($_COOKIE['csrf_token'] == $_POST["csrf_token"]){
    $votes[$_COOKIE['username']] = $_POST["vote"];
    file_put_contents('./database/votes.txt',  '<?php return ' . var_export($votes, true) . ';');
    header("location: ../home.php?success=Your vote was succuessfully saved !");
}else{
    header("location: ../home.php?error=Failed! Please login and try again!");
}

If this validation gets failed, The error will be shown with the message of ‘’Failed! Please login and try again!’’ whereas “Your vote was succuessfully saved !” upon the success.

Attacker fails since cross-origin attacker cannot read any data sent from the server or modify them because of the same origin policy. Therefore the application is CSRF protected!

Hope you got the understanding on how to prevent CSRF using Double Submit Cookies Pattern. See you soon!