Cross-site Request Forgery prevention in web applications.(Part 01)

senuri seneviratne
4 min readOct 4, 2018

Synchronizer Token Pattern.

Synchronizer Token Pattern Workflow

Synchronizer Token Pattern is a method where unique value, token and the secret for each request, embedded by the web application in all HTML forms and verified on the server page.
The token can be generated by any method that ensures uniqueness and unpredictability. For an example a hash chain of random seeds can be used. The attacker will not be able to place a correct token to the request for authenticating them.

STP relies on HTML therefore it is the most compatible process. due to the burden associated with checking validity of the token on each request STP has some complexities on the server side. As the token is unique and unpredictable, it also enforces proper sequence of events which raises usability problem. It can be relaxed by using per session CSRF token instead of per request CSRF token.

Sample Project.

Synchronizer Token Pattern Project Workflow

This project is a NodeJS application and colorlib templates are used.

Login UI
Details UI
Success message added to the div
CSRF token added to the hidden field.
Cookies which were created.

Code for the application is given below.

login.html

You have to create a user login which allows the user to provide credentials and login to the site.

loginCtrl.js
server.js
detail.html

Process.

Here when the user logged into the site it will check the user validity by comparing the credentials in the loginCtrl.js file. if the user is a valid user session identifier are generated using genSessionId() method and set as a cookie in the browser and also the CSRF token is also generated using the genCSRFToken(sessionId,saltValue) method and stored in the server side as let csrfToken. In the detail.html an endpoint is implemented to accepts HTTP POST requests and respond with the CSRF token. Endpoint receives the session cookie and based on the session identifier /getCsrfToken route return the CSRF token value. When the detail page is loading it calls the accessToken () function which retrieve the session cookie using the getSessionCookie(cookiename) function and accesses the/getCsrfToken route if the session id matches then the CSRF token is returned. If the CSRF is returned the token will be added to the hidden field or else, it is not added. Once the detail form is submitted, the server side extract the received CSRF token value by accessing the /validateCsrfToken route and check if it is the correct token issued for the particular session. If the value matches a parameter is sent through the URL as “error=false”. Then access the returned value from the URL using getParameterByName(name, url) method and after it returns the value. Then it checks whether the result is a success or a failure then the message which is relevant to the status will be displayed by making the <div> tags visible.

Thank You!!
See you soon :)

GitHub Link.

Other Posts.

References.

--

--