CSRF Protection - Synchronizer Token Pattern example

What is CSRF ?

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.
Most CSRF prevention techniques work by embedding additional authentication data into requests that allows the web application to detect requests from unauthorized locations.

What is Synchronizer Token Pattern ?

It 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. The token may be generated by any method that ensures unpredictability and uniqueness. The attacker is thus unable to place a correct token in their requests to authenticate them.

Here an example of the synchronizer token pattern that uses for Cross-Site Request Forgery (CSRF).

I have created a simple login page to enter username and password as follows.

It’s basically a simple form that the method is post and the action is server.php. Login button capture the values from the input fields and submit it to the action. 

Please enter the username as "admin" and password as "123". Here I have hardcoded values for username and password, since this a simple demo application which I have develop to explain synchronizer token pattern.

If you enter invalid user credentials, then you will be directed to page errorlogin.html as follows.

When username and password is correct it will be directed to page login.php where you need to add a comment as follows. Upon login, it generate session identifier and set as a cookie in the browser, only if user authenticated client browser with current session id and relevant information. At the same time, generate the CSRF token and store it in the server side. The CSRF token is mapped to the session identifier. In this web application, there's an endpoint (check server.php) that accepts HTTP POST requests and respond with the CSRF token. The endpoint receives the session cookie and based on the session identifier, return the CSRF token value.

To get CSRF token from server, I have implemented a function called loadDOC() as follows.

When this page loads, execute an Ajax call via a javascript (see loadDOC() , which invokes the endpoint for obtaining the CSRF token created for the session and store it in a hidden field. 

Once the page is loaded, modify the HTML form’s document object model (DOM) by allowing the user enter a comment and press "Submit" button, sessionvalidate() method will be invoked which compare extract the received CSRF token value and check if it is the correct token issued for the particular session. If the received CSRF token is valid, user will be directed to page success.html as follows.

 If validation failed, it will be directed to page error.html. 

You can find the source code here.