When building a full-stack web application, the communication between your client and server are at risk with different vulnerabilities such as XSS (Cross-Site Scripting), CSRF (Cross-Site Request Forgery) and Token Sidejacking. As a web developer, knowing such vulnerabilities and how to prevent them is highly essential.
Since I am also trying to learn and prevent this vulnerabilities in my APIs, these guides are also my reference in creating this article and this are all worth reading:
First, let’s define the three vulnerabilities as mentioned before.
According to OWASP.org
Cross-Site Scripting (XSS) attacks are a type of injection, in which malicious scripts are injected into otherwise benign and trusted websites. XSS attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user. Flaws that allow these attacks to succeed are quite widespread and occur anywhere a web application uses input from a user within the output it generates without validating or encoding it.
According to OWASP.org
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. 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.
According to JWT Cheatsheet
This attack occurs when a token has been intercepted/stolen by an attacker and they use it to gain access to the system using targeted user identity.
When I was starting out creating a Full-Stack application using Angular and Laravel. I used JSON Web Tokens (JWT) for authentication, it is easy to use but also easy to exploit if not implemented properly. Common mistakes I did was:
Local storage is a common choice since it can be easily retrieve and access from JavaScript , it is also persistent which means it does not deletes whenever the tab or the browser is closed, makes it highly vulnerable to Cross-Site Scripting (XSS) attacks.
If an XSS attack injects the following into your site:
console.log(localStorage.getItem('jwt_token'));
JWTs have a TTL, and if not configured properly in Laravel, by default, the token is set to 3600 seconds (1 hour), giving hackers an open and wide opportunity to steal the token and use it to act as the victim until the token expires.
A refresh token allows the user to get a new access token without having to reauthenticate. TTL plays a crucial role in tokens, a longer TTL is a security risk as mentioned before, but a shorter TTL will make a bad user experience, forcing them to log in again.
We will create a basic React Express application to apply and mitigate these vulnerabilities. To better understand the output of the application that we will be doing refer to the diagram below.
When authentication, the user will send username and password and POST it to the /login API to verify. Upon logging in, the server will:
Verify credentials in the database
The user credentials in JSON format will be checked in the database for authentication.
Generate User Fingerprint
Generating a random byte fingerprint for the verified user and store it in a variable.
Hash the Fingerprint
The generated fingerprint will be hashed and stored in a different variable.
Creating a Cookie for the Generated Fingerprint (Original fingerprint)
The unhashed fingerprint will be set in a hardened cookie with the name __Secure_Fgp with flags: httpOnly, secure, sameSite=Strict and maxAge of 15mins.
Creating a token for the User credentials with the Hashed Fingerprint
Generating a JWT token for the verified user with its hashed fingerprint.
Creating a cookie for the token
After generating JWT token, the token will be sent as a cookie.
After the process, there will be 2 cookies will be sent, the original fingerprint of the user, and the generated token containing the data with the hashed fingerprint of the user.
When an authenticated user accessed the protected route. A middleware will verify the cookies of the user.
Fetching cookies
The middleware of the server will fetch the 2 cookies from the client upon request.
Verify the JWT
Using JWT token, it will verify the token from the fetched cookie. Extract the data inside the JWT (e.g. User details, fingerprint etc.)
Hash the __Secure_Fgp cookie and compare it to the fingerprint from the payload JWT token.
Now for the implementation
Here are all the libraries that we need:
jsonwebtoken
For generating, signing and verifying JWT Tokens
crypto
To generate random bytes and hashing fingerprints
cookie-parser
For parsing Cookie header and creating cookies
cors
Configuring CORS policy
csurf
Generating CSRF Tokens
npm init -y //Initate a node project // Installing dependencies npm install express nodemon jsonwebtoken csurf crypto cookie-parser cors
Create a server.js file and edit the package.json, write "start": "nodemon server.js" under the scripts object.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon server.js"
},
Since we are using JWT, we’re gonna need a HMAC key
const express = require('express');
const jwt = require('jsonwebtoken');
const crypto = require('crypto');
const cookieParser = require('cookie-parser');
const cors = require('cors')
const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });
const app = express();
// MIDDLEWARES ======================================================
// Middleware to parse JSON bodies and Cookies
app.use(express.json());
app.use(cookieParser());
// Middleware to parse URL-encoded bodies (as sent by HTML forms)
app.use(express.urlencoded({ extended: true }));
// Middleware to apply CORS
const corsOptions = {
origin: 'http://localhost:5173', // Your React app's URL
credentials: true // Allow credentials (cookies, authorization headers)
};
app.use(cors(corsOptions));
const keyHMAC = crypto.randomBytes(64); // HMAC key for JWT signing
// API ======================================================
// we'll add our routes here
// Start the Express server
app.listen(3000, () => {
console.log('Server running on https://localhost:3000');
});
After setting up the Express server, we can start by creating our /login API.
I did not used database for this project, but feel free to modify the code.
app.post('/login', csrfProtection, (req, res) => {
// Fetch the username and password from the JSON
const { username, password } = req.body;
// Mock data from the database
// Assuming the user is registered in the database
const userId = crypto.randomUUID();
const user = {
'id': userId,
'username': username,
'password': password,
}
res.status(200).json({
message: 'Logged in successfully!',
user: user
});
});
Assuming that the user is registered in the database, First, we’re gonna need two functions, one for generating a random fingerprint and hashing the fingerprint.
/*
.
. ... other configurations
.
*/
const keyHMAC = crypto.randomBytes(64); // HMAC key for JWT signing
// Utility to generate a secure random string
const generateRandomFingerprint = () => {
return crypto.randomBytes(50).toString('hex');
};
// Utility to hash the fingerprint using SHA-256
const hashFingerprint = (fingerprint) => {
return crypto.createHash('sha256').update(fingerprint, 'utf-8').digest('hex');
};
As discussed earlier, we are going to generate a fingerprint for the user, hash that fingerprint and set it in a cookie with the name __Secure_Fgp..
Then generate a token with the user’s details (e.g. id, username and password) together with the original fingerprint, not the hashed one since we are going to use that for verification of the token later.
const userId = crypto.randomUUID();
const user = {
'id': userId,
'username': username,
'password': password,
}
const userFingerprint = generateRandomFingerprint(); // Generate random fingerprint
const userFingerprintHash = hashFingerprint(userFingerprint); // Hash fingerprint
// Set the fingerprint in a hardened cookie
res.cookie('__Secure_Fgp', userFingerprint, {
httpOnly: true,
secure: true, // Send only over HTTPS
sameSite: 'Strict', // Prevent cross-site request
maxAge: 15 * 60 * 1000 // Cookie expiration (15 minutes)
});
const token = jwt.sign(
{
sub: userId, // User info (e.g., ID)
username: username,
password: password,
userFingerprint: userFingerprintHash, // Store the hashed fingerprint in the JWT
exp: Math.floor(Date.now() / 1000) + 60 * 15 // Token expiration time (15 minutes)
},
keyHMAC // Signed jwt key
);
// Send JWT as a cookie
res.cookie('token', token, {
httpOnly: true,
secure: true,
sameSite: 'Strict',
maxAge: 15 * 60 * 1000
});
res.status(200).json({
message: 'Logged in successfully!',
user: user
});
});
After log in, it will pass two cookies, token and __Secure_Fgp which is the original fingerprint, into the front end.
To validate that, we are going to create a middleware for our protected route. This middleware will fetch the two cookies first and validate, if there are no cookies sent, then it will be unauthorized.
If the token that was fetched from the cookie is not verified, malformed or expired, it will be forbidden for the user to access the route.
and lastly, it will hash the fingerprint from the fetched cookie and verify it with the hashed one.
// Middleware to verify JWT and fingerprint match
const authenticateToken = (req, res, next) => {
const token = req.cookies.token;
const fingerprintCookie = req.cookies.__Secure_Fgp;
if (!token || !fingerprintCookie) {
return res.status(401).json({
status: 401,
message: "Error: Unauthorized",
desc: "Token expired"
}); // Unauthorized
}
jwt.verify(token, keyHMAC, (err, payload) => {
if (err) return res.status(403).json({
status: 403,
message: "Error: Forbidden",
desc: "Token malformed or modified"
}); // Forbidden
const fingerprintHash = hashFingerprint(fingerprintCookie);
// Compare the hashed fingerprint in the JWT with the hash of the cookie value
if (payload.userFingerprint !== fingerprintHash) {
return res.status(403).json({
status: 403,
message: "Forbidden",
desc: "Fingerprint mismatch"
}); // Forbidden - fingerprint mismatch
}
// Return the user info
req.user = payload;
next();
});
};
To use this middleware we are going to create a protected route. This route will return the user that we fetched from the verified token in our middleware.
/*
.
. ... login api
.
*/
// Protected route
app.get('/protected', authenticateToken, (req, res) => {
res.json({ message: 'This is a protected route', user: req.user });
});
// Start the Express server
app.listen(3000, () => {
console.log('Server running on https://localhost:3000');
});
With all of that set, we can now try it on our front end…
For this, I used some dependencies for styling. It does not matter what you used, the important thing is that we need to create a form that will allow the user to login.
I will not create a step by step in building a form, instead, I will just give the gist of the implementation for the client side.
In my React app, I used shadcn.ui for styling.
// App.tsx
<section className="h-svh flex justify-center items-center">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 p-7 rounded-lg w-96 border border-white">
<h1 className="text-center font-bold text-xl">Welcome</h1>
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="Username" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input type="password" placeholder="Password" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" className="mr-4">Login</Button>
<Link to={"/page"} className='py-2 px-4 rounded-lg bg-white font-medium text-black'>Go to page</Link>
</form>
</Form>
</section>
This is a simple login form with a button that will navigate the user to the other page that will fetch the protected route.
When the user click submit, it will POST request to the /login API in our server. If the response is success, it will navigate to the page.
// App.tsx
const onSubmit = async (values: z.infer<typeof formSchema>) => {
console.log(values)
try {
const res = await fetch("http://localhost:3000/login", {
method: 'POST', // Specify the HTTP method
headers: {
'Content-Type': 'application/json', // Set content type
},
credentials: 'include', // Include cookies in the request
body: JSON.stringify(values), // Send the form data as JSON
});
if (!res.ok) {
throw new Error(`Response status: ${res.status}`)
}
const result = await res.json();
navigate("/page") // navigate to the page
console.log(result);
} catch (error) {
console.error(error);
}
}
In the other page, it will fetch the /protected API to simulate an authenticated session of the user.
const fetchApi = async () => {
try {
const res = await fetch("http://localhost:3000/protected", {
method: 'GET', // Specify the HTTP method
headers: {
'Content-Type': 'application/json', // Set content type
},
credentials: 'include', // Include cookies in the request
});
if (!res.ok) {
// Throw error
throw res
}
// Fetch the response
const result = await res.json();
setUser(result.user);
console.log(result)
} catch (error: any) {
setError(true)
setStatus(error.status)
}
}
Make sure to put credentials: ‘include’ in the headers to include cookies upon request.
To test, run the app and look into the Application tab of the browser.
// React npm run dev // Express npm start
Under Application tab, go to cookies and you can see the two cookies that the server generated.
Token is good for 15 mins, and after that the user will need to reauthenticate.
With this, you have the potential prevention of XSS (Cross-Site Scripting) and Token Sidejacking into your application. This might not guarantee a full protection but it reduces the risks by setting the cookie based on the OWASP Cheat sheet.
res.cookie('__Secure_Fgp', userFingerprint, {
httpOnly: true,
secure: true, // Send only over HTTPS
sameSite: 'Strict', // Prevent cross-site request
maxAge: 15 * 60 * 1000
});
For the CSRF, we are going to tweak a few things on our server side using this:
const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });
then we’ll add it to the middleware
// MIDDLEWARES ======================================================
// Middleware to parse JSON bodies and Cookies
app.use(express.json());
app.use(cookieParser());
// Middleware to parse URL-encoded bodies (as sent by HTML forms)
app.use(express.urlencoded({ extended: true }));
// Middleware to apply CORS
const corsOptions = {
origin: 'http://localhost:5173', // Your React app's URL
credentials: true // Allow credentials (cookies, authorization headers)
};
app.use(cors(corsOptions));
// Middleware to apply csrf protection
app.use(csrfProtection);
For this we’ll need an API that will generate a CSRF Token and passed it as a cookie to the front end.
app.get('/csrf-token', (req, res) => { // Generate a CSRF token
res.cookie('XSRF-TOKEN', req.csrfToken(), { // Sends token as a cookie
httpOnly: false,
secure: true,
sameSite: 'Strict'
});
res.json({ csrfToken: req.csrfToken() });
});
Take note that this csrfProtection will only apply to the POST, PUT, DELETE requests, anything that will allow user to manipulate sensitive data. So for this, we’ll just secure our login endpoint with CSRF.
// Login route to generate JWT and set fingerprint
app.post('/login', csrfProtection, (req, res) => {
const { username, password } = req.body;
// Mock data from the database
const userId = crypto.randomUUID();
const user = {
'id': userId,
'username': username,
'password': password,
}
/*
.
. other code
.
*/
We need to make a GET request to the /csrf-token API and save the token in our local storage.
// App.tsx
useEffect(() => {
const fetchCSRFToken = async () => {
const res = await fetch('http://localhost:3000/csrf-token', {
method: 'GET',
credentials: 'include' // Send cookies with the request
});
const data = await res.json();
localStorage.setItem('csrfToken', data.csrfToken);
setCsrfToken(data.csrfToken)
};
fetchCSRFToken();
}, [])
I know, I know… we just talked about the security risk of putting tokens in a local storage. Since there are many ways to mitigate such attacks, common solution would be to refresh this token or just store it in the state variable. For now, we are going to store it in the local storage.
This will run when the component loads. everytime the user visits the App.tsx, it will generate a new CSRF Token.
Now since our /login API is protected with CSRF, we must include the CSRF-Token in the headers upon logging in.
const onSubmit = async (values: z.infer<typeof formSchema>) => {
console.log(values)
try {
const res = await fetch("http://localhost:3000/login", {
method: 'POST', // Specify the HTTP method
headers: {
'Content-Type': 'application/json', // Set content type
'CSRF-Token': csrfToken // adding the csrf token
},
credentials: 'include', // Include cookies in the request
body: JSON.stringify(values), // Send the form data as JSON
});
if (!res.ok) {
throw new Error(`Response status: ${res.status}`)
}
const result = await res.json();
navigate("/page") // navigate to the page
console.log(result);
} catch (error) {
console.error(error);
}
}
Now, when the App.tsx load, we can now see the Cookies in our browser.
The XSRF-TOKEN is our generated token from the server, while the _csrf is the token generated by the csrfProtection = csrf({ cookie: true });
Here is the full code of the application.
https://github.com/Kurt-Chan/session-auth-practice
This might not give a full protection to your app but it reduce the risks of XSS and CSRF attacks in your website. To be honest, I am new to this integrations and still learning more and more about this.
If you have questions, feel free to ask!
The above is the detailed content of Preventing CSRF and XSS Attacks with JWT and Fingerprint Cookies in Express. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
