implement CSRF protection - Synchronizer token pattern

what is synchronizer token pattern ? 

as above figure, first client browser request login page and log in to the system. same time server generates CSRF token and store it on server side. next time user interact with the server, user ask server to send CSRF token with AJAX and user submit data along with CSRF token.

 so server can verify this request came from legitimate user by comparing CSRF token received and own.

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.

 then only if user authenticated client browser will create a new cookie with current session id and relevant information.

step 3 -  same time sever will be generate CSRF token in server.php and store it on memory

now we are successfully start the session and generates the CSRF token in server side.

Step 4 -  now we needs to implement function to get CSRF token from server side(server.php) when      need to make request to the sever. for that we need to use Ajax with javascript bellow figure show      what i implemented to do it.

 

 this "loadDOC" function will get the CSRF token from server.php and store it in hidden field in the user submission form for submit to the server.

Step 5 - now we need to do is calling the loadDOC function for get the CSRF and store it in hidden      field.

Step 6 - next when the user submit the form , server needs to check this is coming from correct user or not, for that we implement function to compare received CSRF and own CSRF. if request coming from correct user both CSRFa are same

in above figure i implemented the separate function for check whether both CSRFs are same if so it will redirect to "success page"

if not it will redirect to "failed page"

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

you can refer my source code from here