General Internet Security Stuff: Cross-site Request Forgery protection in web applications via Synchronizer Token Patterns

Cross-Site Request Forgery (CSRF) is an attack that forces an end user to execute unwanted actions on a web application in which they're currently authenticated. CSRF attacks specifically target state-changing requests, not theft of data since the attacker has no way to see the response to the forged request. With a little help of social engineering (such as sending a link via email or chat), an attacker may trick the users of a web application into executing actions of the attacker's choosing. If the victim is a normal user, a successful CSRF attack can force the user to perform state-changing requests like transferring funds, changing their email address, and so forth. If the victim is an administrative account, CSRF can compromise the entire web application.

[https://www.owasp.org]

From this tutorial, I'll show you how to secure a Login Form with Synchronizer Token Patterns.

Synchronizer token pattern.

Synchronizer token pattern (STP) is a technique where a token, secret and unique value for each request, is embedded by the web application in all HTML forms and verified on the server side.

Steps

create a login form.
create a cookie and store the session id
create CSRF token
create a javascript function to obtain the CSRF token
validate values in the form

First, we need to figure out what is the client side and what is the server side.

In client side, we create the login form, javascript, and cookie
in server side, we create CSRF token.

First I created the login form using basic HTML

then I created the cookie which users to validate session id with the server side.

What is a Cookie?

Cookies are a mechanism for storing data in the remote browser and thus tracking or identifying return users. You can set cookies using the setcookie() or setrawcookie() function. Cookies are part of the HTTP header, so setcookie() must be called before any output is sent to the browser. Any cookies sent to server from the client will automatically be included in a $_COOKIE

[http://php.net/manual]

setcookie(name, value, expire, path, domain, secure, httponly);

Only the name parameter is required. other parameters are optional. but the maximum number of parameters should be 7.

The secure flag is an option that can be set by the application server when sending a new cookie to the user within an HTTP Response. The purpose of the secure flag is to prevent cookies from being observed by unauthorized parties due to the transmission of the cookie in clear text.

The browser will not send a cookie with the secure flag set over an unencrypted HTTP request.

HttpOnly is an additional flag included in a Set-Cookie HTTP response header. Using the HttpOnly flag when generating a cookie helps mitigate the risk of client side script accessing the protected cookie

In this tutorial, I created the cookie using PHP. You can use any language as you prefer.

Note: The setcookie() function must appear BEFORE the <html> tag.

If you created the cookie correctly you can find your cookie in the cookie list after the code executed.

Up to this point, we were on the client side. Now let's create the CSRF token in server side.

base64_encode(openssl_random_pseudo_bytes(32)) - Generates cryptographically secure pseudo-random bytes
hash_hmac - Generate a keyed hash value using the HMAC method

[http://php.net/manual/en/function.hash-hmac.php]

After generating the CSRF token we should store the token in the session variable.

$_SESSION['CSRF'] = $csrf_to;

Now let's create a javascript function to obtain the CSRF token via an ajax call. It should create on the client side. From this function, we request the CSRF token from the server side after the client side is loaded.

Ajax can