Implement CSRF protection - Double submit token

what is double submit token Cookies?


as above figure when client login to the system server generates the CSRF token and store it in the client side (on cookie) when next reques goes to server, client embed the csrf token in to submit form and sends with CSRF token cookie. when server receive an request from client, it will validate user by comparering  both CSRF token field on the submit form and CSRF token cookie.

How to implement ?

In this web app there are 3 files

 client side -> index.html

 server side -> login.php

                        sever.php

step 1 - login UI

    you need to model simple its index.html this is the main page of the app. this is my index.html

step 2 - when user click log in data will send to server side (login.php) and authenticate user, start session  and set 2 cookies in client webbrowser

1 - Session cookie

2 - CSRF token cookie

step 3 - when client submitted the form it should have and hidden field to store CSRF token.

step 4 - then lets check server.php that compares embedded CSRF value and CSRF cookie value.

as you see above code check the 2 CSRFs and if it successful it redirect to success.html

if not it will redirect to "failed page"

 thats it we have successfully implemented the CSRF Double submit token Pattern to our web application

you can refer my source code from here