CSRF Anti-Attack Guide

Introduction

CSRF (Cross-Site Request Forgery) is a type of attack targeting user sessions. Attackers trick the victim's browser into sending requests (accompanied by identification cookies) to websites where they are logged in without permission.

To prevent CSRF, we have 3 main strategies:

  • Method 1: Check Origin / Referer headers Check if the Origin or Referer header matches the server domain. If they differ, block them immediately at the NextJS Proxy layer before forwarding to the server.
  • Method 2: Configure SameSite for Cookies When setting cookies for the client, you must set the SameSite=Strict or SameSite=Lax attribute. In this case, if the request originates from a different website, the browser will refuse to attach the Cookie, NextJS receives an empty request and will return a 401 Unauthorized error.
  • Method 3: Use CSRF Token Require the client to send a Token (generated randomly for each user or using JWT) in the Header. Since a fake site cannot have this token, the outgoing request will miss the token and we only need to check this condition to block requests sent to the core service.


The attack process is as follows: A hacker creates a website fake.com, when a user accesses it, it will call your api at yourdomain.com. Because the browser sees this as a request to your domain, it will automatically attach the cookie to the request, thus the Hacker can perform actions on behalf of the user.

  • If you configure cookie SameSite=Strict or SameSite=Lax, the browser will no longer automatically attach cookies for such api call operations and you have avoided most CSRF-related issues.

  • Blocking by cookie usually applies to users after login. For operations with public permissions for everyone, cookies will not be checked, thus hackers can still call through your service.

    • If you want to thoroughly block and only allow users using your web to use the services you provide, check the Origin / Referer headers.
    • When the browser performs an api call, it will attach Origin / Referer fields to the header, you just need to check if this value matches your server to block it immediately.

  • Using a CSRF Token is a more advanced way to add a layer of security to your system, because Origin / Referer header values can be easily modified using Postman or on old browser versions with poor security. If you encrypt specifically to create a unique token for each user, the hacker will not be able to use your service without the appropriate token.


Here, if you wonder how a NextJS server not configured to allow CORS can receive api calls from other websites to our server and why we need the security operations above:

  • Please note an important point that CORS is only a browser mechanism. When you call an api cross-site, the browser actually still sends the request and only when there is a response (if the browser does not support cross-site for that api) does the browser block further processing.
  • You can check by calling an api cross-site and you will still see logs on the server processing it, which is why we need additional check operations to stop this processing.

  • Note that in most systems, if you deploy a CSRF Token using JWT where the token information is stored in LocalStorage or SessionStorage instead of a cookie, you have almost avoided CSRF risks. Each web app on the browser has separate memory. If a hacker calls an api from fake.com, they cannot read data from LocalStorage in your yourdomain.com.
  • However, doing so faces another risk which is XSS (Cross-Site Scripting), which I will explain in detail in subsequent articles.

Detail

In this article, I will still guide using NextJS as a reverse proxy and the server as NestJS (you can replace it with any server you are familiar with).

NestJS project

Create file src/controller/auth.controller.ts, here I only focus on configuring cookies to avoid CSRF, so I will not talk specifically about the JWT part, you can see more in my previous articles.

import {
  Body,
  Controller,
  Post,
  Res,
} from '@nestjs/common'
import express from 'express'
import {LoginDto} from 'src/dto/auth.dto'
import {AuthService} from 'src/service/auth.service'

@Controller('auth')
export class AuthController {
  constructor(private authService: AuthService) {}

  @Post('login')
  async login(
    @Body() body: LoginDto,
    @Res({passthrough: true}) response: express.Response
  ) {
    const token = await this.authService.login(body)
    response.cookie('token', token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'lax',
      path: '/',
    })
    return token
  }
}
  • Check NODE_ENV to determine the environment because when secure is true, it works on HTTPS, while in your development environment, it is HTTP.
  • The sameSite property in CookieOptions determines whether the browser allows automatically attaching this Cookie to Requests originating from another website (Cross-Origin). This is the key factor in fighting CSRF attacks.
  • Below are the detailed differences between the values:
    • strict (Maximum Security)
      • How it works: The browser only sends the Cookie if the request originates from the same website that owns the Cookie (Same-Site).
      • Behavior: If a user is on a website and clicks a link leading to your site, the browser will not send the Cookie. The user will be in an "unlogged" state at that first page load (only when they manually type the URL or reload the page will the Cookie work).
      • Use case: Banking websites, e-wallets, or payment gateways that need absolute security for data change actions.
    • lax (Default for modern browsers)
      • How it works: This is a balance between security and user experience. The browser blocks Cookies for background requests (like API calls), but allows sending Cookies for safe top-level navigations.
      • When a user clicks a link from one website to yours, which is a public GET navigation operation, the cookie is attached and the user remains logged in. But if that fake.com site calls an api to your site (using fetch/axios), the cookie will not be attached and the CSRF attack fails.
      • Use case: Suitable for most common websites (E-commerce, Social Networks, Dashboards) to maintain a smooth experience when users click links from Google/Facebook to their site.
    • none (No restriction)
      • How it works: The browser will send the Cookie in all cases, regardless of whether the request originates from inside or outside your website.
      • Mandatory condition: If you set sameSite: "none", you must also set the secure: true attribute (Cookie only transmitted via HTTPS). Without secure: true, the browser will refuse to store this Cookie.
      • Use case: When building embedded systems (Embed Component), chat widgets, or Third-party Cookie systems that need to share data across completely different domains.
    • boolean (true or false)
      • true: Equivalent to configuring strict. The browser will apply the strictest security policy.
      • false: Completely turns off the SameSite feature. However, in practice on modern browser versions (Chrome, Edge, Safari), if you set false or leave it blank (undefined), the browser will automatically force it to the default value of lax to protect users.

NextJS project

Update file next.config.ts

import type {NextConfig} from 'next'

const nextConfig: NextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: process.env.SERVER_HOST + '/:path*',
      },
    ]
  },
}

export default nextConfig

Create file proxy.ts at the same level as the app folder

import {NextResponse, type NextRequest} from 'next/server'

export function proxy(request: NextRequest) {
  const {pathname} = request.nextUrl
  const origin = request.headers.get('origin')
  const referer = request.headers.get('referer')
  const allowedDomain = process.env.HOST!
  const isAllowed =
    (origin && origin === allowedDomain) ||
    (referer && referer.startsWith(allowedDomain))

  if (!isAllowed) {
    return NextResponse.json(
      {message: 'Forbidden: Invalid Origin'},
      {status: 403}
    )
  }

  const tokenCookie = request.cookies.get('token')
  let token = tokenCookie?.value

  if (!token && !pathname.includes('/auth/login')) {
    return NextResponse.json(
      {message: 'Unauthorized: Missing token'},
      {status: 401}
    )
  }

  let tokenJson
  if (token?.startsWith('j:')) {
    token = token.slice(2)
    tokenJson = JSON.parse(token!)
  }

  const headers = new Headers(request.headers)
  const accessToken = tokenJson?.accessToken
  if (accessToken) {
    headers.set('Authorization', `Bearer ${accessToken}`)
  }

  console.log('headers', Object.fromEntries(headers.entries()))
  return NextResponse.next({request: {headers}})
}

export const config = {
  matcher: ['/api/:path*'],
}

Most security logic will reside here:

  • Check header values of origin and referer, if it is not a request from NextJS then throw error 403.
  • If attempting to use private services without a cookie then throw error 401.
  • Then you just need to attach the Authorization field with the token value taken from the cookie into the header (this is exactly the CSRF Token).

Create file app/hook.ts used only to create hooks for api calls using Tanstack React Query

import {useMutation} from '@tanstack/react-query'

interface ApiResponse {
  message: string
}

interface CreatePayload {
  name: string
}

export interface LoginPayload {
  username?: string
  password?: string
}

const requestPostApi = async (
  url: string,
  payload: any
): Promise<ApiResponse> => {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(payload),
  })

  if (!response.ok) {
    throw new Error(`An error occurred`)
  }
  return response.json()
}

export function useLogin() {
  return useMutation({
    mutationFn: (payload: LoginPayload) =>
      requestPostApi('/api/auth/login', payload),
  })
}

export function useCreate() {
  return useMutation({
    mutationFn: (payload: CreatePayload) =>
      requestPostApi('/api/test/create', payload),
  })
}

Create file app/login/page.tsx with simple functionality to navigate to the Welcome page after successful login

'use client'

import {LockOutlined, UserOutlined} from '@ant-design/icons'
import {Alert, Button, Form, Input} from 'antd'
import {useRouter} from 'next/navigation'
import {useLogin, type LoginPayload} from '../hook'

export default function LoginPage() {
  const router = useRouter()
  const loginMutation = useLogin()
  const isAuthPending = loginMutation.isPending
  const authError = loginMutation.error

  const onFinishLogin = (values: LoginPayload) => {
    loginMutation.mutate(values, {
      onSuccess: () => {
        router.push('/feature/security/csrf/welcome')
      },
    })
  }

  return (
    <div className="flex flex-col items-center justify-center min-h-[400px] p-6 bg-gray-50 rounded-xl border border-gray-200 max-w-md mx-auto my-10 shadow-sm">
      <h2 className="text-xl font-semibold text-gray-800 mb-6">
        Account Login
      </h2>

      <Form
        name="login_form"
        className="w-full"
        initialValues={{username: '', password: ''}}
        onFinish={onFinishLogin}
        layout="vertical"
      >
        <Form.Item
          name="username"
          rules={[{required: true, message: 'Please input your Username!'}]}
        >
          <Input
            prefix={<UserOutlined className="text-gray-400" />}
            placeholder="Username"
            size="large"
            disabled={isAuthPending}
          />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[{required: true, message: 'Please input your Password!'}]}
        >
          <Input.Password
            prefix={<LockOutlined className="text-gray-400" />}
            placeholder="Password"
            size="large"
            disabled={isAuthPending}
          />
        </Form.Item>

        {authError && (
          <Alert
            title={
              authError instanceof Error ? authError.message : 'Login failed'
            }
            type="error"
            showIcon
            className="mb-4 rounded-lg"
          />
        )}

        <div className="flex gap-4 mt-2">
          <Button
            type="primary"
            htmlType="submit"
            size="large"
            loading={isAuthPending}
            className="flex-1 bg-blue-600 hover:bg-blue-500 font-medium rounded-lg"
          >
            Login
          </Button>
        </div>
      </Form>
    </div>
  )
}

Create file app/welcome/page.tsx to test attached JWT from cookie into header automatically when calling api

'use client'

import {MessageOutlined, PlusOutlined} from '@ant-design/icons'
import {Button, Card} from 'antd'
import {useCreate} from '../hook'

export default function WelcomePage() {
  const createMutation = useCreate()
  const createData = createMutation.data

  const handleCreateData = () => {
    const payload = {name: 'Test Item'}
    createMutation.mutate(payload)
  }

  return (
    <div className="flex flex-col items-center justify-center min-h-[400px] p-6 bg-gray-50 rounded-xl border border-gray-200 max-w-md mx-auto my-10 shadow-sm">
      <h2 className="text-2xl font-bold text-gray-800 mb-2 text-center">
        Welcome Back!
      </h2>
      <p className="text-sm text-gray-500 text-center mb-6">
        You have successfully logged in.
      </p>

      <Button
        type="primary"
        size="large"
        icon={<PlusOutlined />}
        onClick={handleCreateData}
        className="bg-green-600 hover:bg-green-500 font-medium rounded-lg px-8 py-5 flex items-center justify-center w-full shadow-md"
      >
        Test Create API
      </Button>

      <div className="w-full mt-6">
        {createData && (
          <Card
            title={
              <div className="flex items-center gap-2 text-gray-700">
                <MessageOutlined />
                <span>Response Data</span>
              </div>
            }
            className="w-full border border-gray-200 shadow-sm rounded-lg"
            styles={{header: {backgroundColor: '#f9fafb'}}}
          >
            <p className="text-gray-700 font-mono bg-gray-50 p-3 rounded border border-gray-100 break-words text-sm">
              {createData.message}
            </p>
          </Card>
        )}
      </div>
    </div>
  )
}


The results are as follows:


View request detail to see the browser has automatically attached Origin and Referer to Request Headers.


You can test by calling the API from a different origin and you will see a message blocked by CORS policy, however, checking the logs will still show that the NextJS server processed that request.



When you check the headers received on the NextJS server, you can see that the origin and referer fields are attached to the header by the browser. However, cookies are missing because they have been configured with SameSite=strict or SameSite=lax. We will rely on this information to determine the request's origin and block it immediately.

{
  pathname: '/api/test/create',
  headers: {
    accept: '*/*',
    accept-encoding: 'gzip, deflate, br, zstd',
    accept-language: 'vi,en-US;q=0.9,en;q=0.8,zh;q=0.7,zh-HK;q=0.6,zh-CN;q=0.5,zh-TW;q=0.4,ja;q=0.3',
    access-control-request-headers: 'cache-control,content-type,pragma',
    access-control-request-method: 'POST',
    cache-control: 'no-cache',
    connection: 'keep-alive',
    host: 'localhost:3000',
    origin: 'http://localhost:4000',
    pragma: 'no-cache',
    referer: 'http://localhost:4000/',
    sec-fetch-dest: 'empty',
    sec-fetch-mode: 'cors',
    sec-fetch-site: 'same-site',
    x-forwarded-for: '::1',
    x-forwarded-host: 'localhost:3000',
    x-forwarded-port: '3000',
    x-forwarded-proto: 'http'
  }
}


You can log the NextJS server to see the header attached with Authorization before sending to the core service.

headers {
  accept: '*/*',
  accept-encoding: 'gzip, deflate, br, zstd',
  accept-language: 'vi,en-US;q=0.9,en;q=0.8,zh;q=0.7,zh-HK;q=0.6,zh-CN;q=0.5,zh-TW;q=0.4,ja;q=0.3',
  authorization: 'Bearer eyJhbGciOiJIU1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWF0Ij7wrcNzc5NjgyMjg1LCJleHAiOjE3Nzk2ODI1ODV9.7HRGieHfidpkaTVK6zAkh2PNTRU-gvaJ3cghWWXAsnU',
  cache-control: 'no-cache',
  connection: 'keep-alive',
  content-length: '20',
  content-type: 'application/json',
  cookie: 'token value',
  host: 'localhost:3000',
  origin: 'http://localhost:3000',
  pragma: 'no-cache',
  referer: 'http://localhost:3000/feature/security/csrf/welcome',
  x-forwarded-for: '::1',
  x-forwarded-host: 'localhost:3000',
  x-forwarded-port: '3000',
  x-forwarded-proto: 'http'
}

Happy coding!

See more articles here.

Comments

Post a Comment

Popular posts from this blog

All Practice Series

Image
Introduction This is a comprehensive page about the technologies I have shared in series format. You can view brief introductions and links to directly access each series you are interested in. In the field of software development, to deploy a product from the initial idea to its release, the standard process typically involves several stages as follows: Database : Designing and implementing the database according to business requirements, storing data during the system's operation. Backend : Handling the main logic of the system, communicating with the database and services. Frontend : Building the interface for users to interact with the system, which could be a desktop, mobile, or web application. This usually includes implementing UI/UX and integrating APIs from the backend. DevOps : Deploying the system for use, which can be done on a server or in the cloud. Testing : Applying testing methods to ensure the product meets the standards for release. Of course, these are just stan...
Read more

Kubernetes Deployment for Zero Downtime

Image
Introduction In Kubernetes (K8s) , a Pod is the smallest resource unit used to run one or more containers during deployment. There are several ways to create a Pod : you can create it directly, use a ReplicationController , or a ReplicaSet . However, the most commonly used resource for managing Pods is the Deployment . When you use a Deployment , it actually creates a ReplicaSet to manage the Pods but comes with many additional benefits that support the deployment process. Some Advantages of Deployment : Ensures Pod Availability : It guarantees that the specified number of Pods are always running according to the configuration, automatically deploying additional Pods if any failures occur. Supports Restart and Undo Deployment : Allows you to easily restart or roll back to previous versions of your Deployment . Zero Downtime Deployment : When updating configurations or scaling Deployments , zero downtime is crucial. This means that new Pods are created while the old Pods are stil...
Read more

Deploying a NodeJS Server on Google Kubernetes Engine

Image
Introduction to GKE Google Kubernetes Engine (GKE) is a managed Kubernetes service provided by Google Cloud Platform , facilitating simple and efficient deployment of Docker images. We only need to provide some configuration for the number of nodes, machine types, and replicas to use. Some Concepts Cluster A Cluster is a collection of Nodes where Kubernetes can deploy applications. A cluster includes at least one Master Node and multiple Worker Nodes . The Master Node is used to manage the Worker Nodes . Node A Node is a server in the Kubernetes Cluster. Nodes can be physical servers or virtual machines. Each Node runs  Kubernetes , which is responsible for communication between the Master Node and Worker Node , as well as managing Pods and containers running on it. Pod A Pod is the smallest deployable unit in Kubernetes . Each Pod contains one or more containers, typically Docker containers. Containers in the same Pod share a network namespace, meaning they have the ...
Read more

Setting up Kubernetes Dashboard with Kind

Image
Introduction In a previous article, I guided you through using Helm to deploy on Google Kubernetes Engine . However, if you want to cut down costs by using Kubernetes in your local environment instead of relying on a cloud provider during development, then Kind is your go-to. There are several tools to help set up Kubernetes locally, such as MiniKube , Kind , K3S , KubeAdm , and more. Each tool has its own pros and cons. In this article, I'll walk you through using Kind to quickly set up a Kubernetes cluster on Docker . Kind stands out for its compactness, making Kubernetes start up quickly, being user-friendly, and supporting the latest Kubernetes versions. Working with Kind Firstly, follow the instructions here to install Kind according to your operating system. If you're using Ubuntu , execute the command: [ $( uname -m ) = x86_64 ] && curl -Lo ./kind https://kind.sigs.k8s.io/dl/v0.23.0/kind-linux-amd64 chmod +x ./kind sudo mv ./kind /usr/local/bin/ki...
Read more

Monitoring with cAdvisor, Prometheus and Grafana on Docker

Image
Introduction Monitoring a system is crucial after deploying a product to a production environment. Keeping an eye on system metrics like logs , CPU , RAM , disks , etc, helps identify the system's status, performance issues, and provides timely solutions to ensure stable operations. While cloud providers like Google , Amazon , or Azure offer built-in monitoring systems, if your company needs to manage multiple applications/systems/containers and desires a centralized monitoring system for easier management, using cAdvisor , Prometheus , and Grafana is a sensible choice. These three popular open-source tools are widely used by DevOps teams, especially for monitoring container applications. cAdvisor Developed by Google , cAdvisor is an open-source project used to analyze resource usage, performance, and other metrics from container applications, providing an overview of all running containers. Find more details here Prometheus Prometheus is a toolkit for system monitoring and a...
Read more

Using Kafka with Docker and NodeJS

Image
Introduction to Kafka Kafka is an open-source , distributed messaging system that functions on a publish/subscribe model. It is widely used by numerous large companies for high-performance , real-time data streaming. Developed by LinkedIn since 2011, Kafka has grown into the most popular distributed streaming platform. It can handle vast amounts of records with high efficiency. Advantages of Kafka Open-source : Freely available and continuously improved by a large community. High-throughput, high-frequency : Capable of processing large volumes of data across topics continuously. Automatic message storage : Allows for easy message retrieval and verification. Large user community : Offers extensive support and shared resources. Basic Concepts If you're new to Kafka and Message Queues, here are some key concepts to understand: Producer : Creates and sends data to the Kafka server, where data is sent as messages in byte array format. Consumer : One or more consumers subscribe to...
Read more

Sitemap

Image
A page aggregator designed for easy reference and search, compiling all blog posts for convenient access. Loading all posts...
Read more

React Practice Series

Image
Introduction React is a JavaScript library created by Facebook , often referred to as the most popular frontend framework today. This page aims to gather articles related to ReactJS , covering topics such as theory, features, and commonly used packages in the process of building ReactJS applications. I will update this series with more articles in the future as new ideas for content come up. The articles are arranged in increasing order of difficulty, so if you have time, it's recommended to start from the beginning of the series. This will ensure you grasp the essential knowledge and information needed for the subsequent articles. Here are some key topics in the series that you need to explore to effectively use ReactJS : Fundamental : React Hook, React Reconciliation. State management : redux, mobx, recoil, zustand, xstate, etc. Middleware libraries : redux-thunk, redux-saga, redux-observable, etc. Popular packages : tasnstack query, immer, styled-components, etc. Rendering te...
Read more

Practicing with Google Cloud Platform - Google Kubernetes Engine to deploy nginx

Image
Introduction This article provides simple step-by-step instructions for those who are new to Google Cloud Platform (GCP) and Google Kubernetes Engine (GKE) . I'll guide you through using  GKE  to create clusters and deploy nginx . The instructions below will primarily use gcloud  and kubectl  to initialize the cluster, which is more convenient than manual management on the Google Cloud interface. Prerequisites First, you need to prepare the following: Have a GCP account with permission to use Cloud services. If you're new, you'll get a $300 free trial to use for 90 days . Create a new GCP project. Enable Compute Engine and Kubernetes Engine services. Install Google Cloud SDK and kubectl For this installation step, refer to the GCP documentation for instructions tailored to your operating system. Once installed, execute the following commands to check if gcloud  and kubectl  are installed: gcloud version kubectl version If you see the version resul...
Read more

Kubernetes Practice Series

Image
Introduction Kubernetes (often abbreviated as K8s ) is an open-source system designed to automate the deployment, scaling, and management of containerized applications. This page serves as a collection of articles related to Kubernetes (K8s) , including theoretical concepts and practical guides on using Kubernetes to set up essential tools for the software development process. I will continue to update this series with new articles as ideas come to mind, to ensure the series becomes more comprehensive. The articles are arranged in increasing order of difficulty to make it easier for you to follow. If you have time, it's recommended that you start from the beginning of the series to acquire the necessary knowledge and information that will prepare you for the subsequent articles. Key Topics Covered in This Series Basic Knowledge : Fundamental concepts, common commands, etc. Resources : Pod, Deployment, Service, StatefulSet, Ingress, etc. Pod Autoscaler : Horizontal and Vertical sc...
Read more