Global csrf token check

[mauriceoc]

Hi, I'd like to implement a global csrf check for every handler in my MSW configuration.

• If the client sends a request with no csrf token attached, msw should give a 401 status back with an empty response.
• If the csrf token is present then msw should continue to handle the request as per the behaviour for the given endpoint.

I'm guessing the correct way to do this is via a response composition, but a bit confused as to how to implement.

Are there any code examples out there for this? Thanks!

[kettanaito]

Hi, @mauriceoc.

It should be enough to prepend a less specific request handler to capture all requests and implement that CRSF validation token in it:

// mocks/handlers.js
import { rest } from 'msw'

export const handlers = [
  rest.all('*', (req, res, ctx) => {
    // If the token is valid, proceed with the request.
    // Just returning undefined from the handler will instruct MSW
    // to fallthrough, looking for any other matching handlers.
    if (validateCrsfToken(req)) {
      return
    }

    // If the token validation failed, respond with a mock 401 response. 
    return res(ctx.status(401))
  }),
  // ...other handlers.
]

There are, of course, multiple ways of doing this in case this particular suggestion doesn't suit your needs. You can introduce a higher-order resolver, adding that validation logic there, as an example. But I'd recommend going with the simplest approach.

Also, on a related note, I highly recommend updating to msw@next and reading through #1464. We are preparing an awesome change to the library and it's in a stable state now. The sooner you update to it the better! It also includes a few improvements to the fallthrough behavior of MSW, which will be beneficial in your use case. Thanks.

[mauriceoc]

Aha, I think I tried this but failed somehow due to how I specified the handler. This works, thanks for the suggestion!

[Toshinaki]

@kettanaito
Hi
I want to parse the token then fetch the user and pass the user (or false if invalid token) to the next handler.
Is is possible to achieve this?

[kettanaito]

Hi, @Toshinaki. Yes, that should be possible. The exact steps of it will depend on how you create and manage your CSRF tokens. I've illustrated in the request handler above the high-level steps you have to take:

1. Access the token on the request, e.g. by reading the request cookie.
2. Parse the token in whichever fashion you need.
3. Do anything with the token.

The same goes for fetching the user. You can fetch the real user using ctx.fetch(), or use a regular fetch() to hit another request handler with MSW to respond with a mocked user.

[Toshinaki]

@kettanaito
Thanks!
What should I return in the handler so that next handler could access the fetched user?

export const handlers = [
  rest.all('*', (req, res, ctx) => {
    const user = verifyUserToken(req)
    return ???
  }),
  rest.update("/projects/:id", (req, res, ctx) => {
    if (user && user.role === "admin") { // HOW to get the user fetch above???
      // able to update
    } else {
      return res(ctx.status(401))
    }
  })
]