In this blog post, I will explain how to implement CSRF protection in web applications. But first,
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. With a little help of social engineering (such as sending a link via email or chat), an attacker may trick the users of a web application into executing actions of the attacker's choosing. If the victim is a normal user, a successful CSRF attack can force the user to perform state changing requests like transferring funds, changing their email address, and so forth. If the victim is an administrative account, CSRF can compromise the entire web application.
How we can defend against CSRF?
There are numerous patterns to defend against CSRF. In this post, I will explain only two recommended patterns using a sample web application for each pattern implemented in JavaScript.
- Synchronizer Token Pattern
- Double Submit Cookies Pattern
Synchronizer Token Pattern
You can find the link to Synchronizer token pattern Web application GitHub repository here. For demonstration purposes, a user login with hard coded credentials are implemented in the web application. The Synchronizer token pattern is explained using following criteria's.
1. User login - I have used hard coded login credentials for simplicity.
2. Upon login, generate session identifier and set as a cookie in the browser.
The following code will generate a session identifier and set a session cookie in the browser upon login as show in the chrome developer tool screenshot.
I have used a session middleware called "express-session" and UUID library for defining session id as a best practice.
3. At the same time, generate the CSRF token and store it in the server side.
The CSRF token is stored in memory and mapped to the session identifier. I have not used a CSRF middleware like csurf for creation and validation of a token, instead I have done the csrf implementation step by step.
Note that the console log is for testing purposes.
4. Implement an endpoint that accepts HTTP POST requests and respond with the CSRF token.
The endpoint '/middleware' receives the session cookie and it is validated with the session id stored in the server side memory store. This session validation process is handled by the session middleware 'express-session' explained in the second step.
If the session id's are matching, the csrf token is returned to the front-end.
5. Implement a webpage that has a HTML form. The method should be POST and action should be another URL ( '/login' ) in the website. When this page loads, execute an Ajax call ( onLoadPage() ) via a javascript, which invokes the endpoint ( '/middleware' ) for obtaining the CSRF token created for the session.
I have used Fetch API to invoke the endpoint '/middleware' and obtain the csrf token when the page loads.
<htmllang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script> //AJAX CALL
function onloadPage() { fetch('/middleware', { credentials: 'same-origin', method: 'POST', // or 'PUT' body: {}, // data can be `string` or {object}! headers: { 'Content-Type': 'application/json' } }).then((resp) => resp.json()) // Transform the data into json .then(function (data) { console.log(JSON.stringify(data)); var form = document.getElementById("form"); var input = document.createElement("input"); input.type = "hidden"; input.name = "_csrf"; input.value = data.csrfToken; form.appendChild(input); }) }</script> </head> <body onload="onloadPage()"> <div class="login"> <div class="login-triangle"></div> <h2 class="login-header">Log in</h2><form id="form" action="/login" method="POST" class="login-container"><p> <input type="email" placeholder="Email" name="email" value="jayasinghe.ashen@gmail.com"> </p> <p> <input type="password" placeholder="Password" password="password" value="123456"> </p> <p> <input type="submit" value="Log in"> </p> </form></div> </body> </html>
6. Once the page is loaded, modify the HTML form’s document object model (DOM) and add a new hidden field that has the value of the received CSRF token.
<script>
//AJAX CALL
function onloadPage() {
fetch('/middleware', {
credentials: 'same-origin',
method: 'POST', // or 'PUT'
body: {}, // data can be `string` or {object}!
headers: {
'Content-Type': 'application/json'
}
}).then((resp) => resp.json()) // Transform the data into json
.then(function (data) {
console.log(JSON.stringify(data));
var form = document.getElementById("form");
var input = document.createElement("input");
input.type = "hidden";
input.name = "_csrf";
input.value = data.csrfToken;
form.appendChild(input);
})
}
</script>
Once we obtain the csrf token returned from '/middleware' endpoint, we obtain the form id and assign it to a variable called 'form' and then, create a input type element and assign it to a variable called 'input'.
Thereafter, we set input type, name and value as hidden, '_csrf' and the csrf token value obtained from the ajax call when the page loads and then we append the updated input element as one of the child elements to the html form element.
7. Once the HTML form is submitted to the action, in the server side, extract the received CSRF token value and check if it is the correct token issued for the particular session.
In the above code, we check if the session csrf token and the csrf token passed from the hidden input field or body is the same. if it is same, then we show a success message shown in the screenshot. If it is not same, we show 'Invalid CSRF Token' error message.
Double Submit Cookies Pattern
Step 1 and 2 is same as the Synchronzier pattern. But in step 3, we generate a csrf token for the session and set a csrf cookie in the browser.
3. At the same time, generate the CSRF token for the session and set a csrf cookie in the browser.
Note that we don't store the csrf token in the server side. The reason we set httpOnly flag to false is to allow JavaScript to access the csrf cookie when the page loads.
4. Implement a webpage that has a HTML form. The method should be POST and action should be another URL in the website.
5. When the html form is loaded, run a javascript which reads the csrf token cookie value in the browser and add a hidden field to the html form modifying the DOM.
Since we have set the httpOnly flag to false, we can access the csrf cookie in the browser. We obtain all the cookies using document.cookie and split the key value pairs using ' ; '. After splitting, we pass the key value pairs to a array. Using a for loop, we identify the csrf cookie by using the csrf cookie name we set in the server side. Then we extract the csrf token value and create a input element and append the input element to the html form element with the csrf token.
If we have set httpOnly flag to true, we would get the below error response.
When the form is submitted to the action, the CSRF token cookie will be submitted and also in the form body, the CSRF token value will be submitted.
6. In the web page that accepts the form submission ('/login'), obtain the CSRF token received in the cookie and also in the message body.
req.cookies._csrf is the csrf cookie with the csrf token value which was passed to the server side after submitting the form. req.body._csrf contains the csrf token value in the hidden field inpu
t explained in step 5. . if both values are matching we get a success message as below.
IMPORTANT: Note that all the console logs in the implementation are for testing purposes.
Ashen Jayasinghe
Full Stack Developer
DMS
