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

senuri seneviratne
3 min readOct 4, 2018

--

Double Submit Cookies Pattern.

Double Submit Cookie Pattern Workflow

In double submit cookie pattern a CSRF token can be set by a site to a cookie and the CSRF can be inserted to hidden field in each HTML form sent to the client. After the form submission the site can compares the form token along with the cookie to check whether those two values matches. This prevents an attacker from reading or setting cookies on the target domain, so they cannot put a valid token in their crafted form

Double Submit Cookies Pattern

Sample Project.

Double Submit Cookie 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 a cookie is added. When the detail page is loading it calls the accessToken () function which retrieve the csrf cookie using the getCsrfCookie(cookiename) function .If it returns the token it is added to the hidden field or else, it is not added. Once the detail form is submitted to the action CSRF token cookie will be submitted and also in the form body, the CSRF token value will be submitted. The /validateCsrfToken route will obtain the CSRF token received in the cookie and also in the message body and it compare the two values received and also the two-session id’s were compared. Then it returns a message according to the validity. 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.

--

--