Defend against CSRF attacks

Overview

Cross-Site Request Forgery (CSRF) is a type of attack. Attackers induce victims to visit a malicious website and, without the victim's knowledge, send forged requests to a trusted website. These requests will utilize the credentials of the user's current authenticated session, thereby allowing the attacker to exploit the user's identity and permissions to carry out destructive operations such as changing account information, deleting data, etc.

Precondition

Access

In order to defend against csrf attacks, we provide interface defense measures at both the front end and back end:

Backend

@blocklet/sdk provides the express middleware for the backend to validate csrf.

Basic Usage

By default, the middleware exported by @blocklet/sdk will intercept all side-effectful APIs (such as POST, PUT requests) and validate their placeholders for validity.

If verification fails, an error will be thrown: Current request status is abnormal, please retry later.

import { csrf } from '@blocklet/sdk/lib/middlewares';

app.use(csrf());

Advanced usage

In some cases, we may need to allow certain requests based on business logic. In such cases, we can achieve this by customizing the verifyToken function for CSRF token.

import { csrf } from '@blocklet/sdk/lib/middlewares';

app.use(
  csrf({
    verifyToken: async (req, res) => {
      const needVerifyToken = ...;
      if (needVerifyToken) { // only need to verify in certain cases
        await res.locals.verifyToken(req, res);
      }
    },
  })
);

front end

@blocklet/js-sdk provides createAxios , createFetch function, which carries csrf token while sending requests.

Basic Usage

The exported createAxios function from @blocklet/js-sdk will carry csrf token to the request header before sending (side-effectful) requests in the frontend. The backend middleware of the user will verify the token in csrf token, and only after successful verification, the request will be processed.

import { createAxios } from '@blocklet/js-sdk';

const api = createAxios({}); // It can also be createFetch

// when making a request, the csrf token will be automatically included in request.headers['x-csrf-token']
await api.put(...);

After successful access, you will be able to see the csrf-token in the request header, just like this:

Use other front-end request libraries

import { getCSRFToken } from '@blocklet/js-sdk';

// Send the request with the CSRF token in the header.
request.headers['x-csrf-token'] = getCSRFToken();