Using csurf with react-server

Question

I would like to add csurf as an express middleware inside the react-server for a universal app.

What I want to achieve is adding the csrf token to a hidden input in a form in the react component to maintain the same csrf protection flow a server-rendered website would provide, but within a SPA.

Is this technically possible within the react-server? If so, how can I pass the csrf token that is available in the response object to the react component via the page (ideally)?

Brogan

Answer 1

I actually ran into the same problem and luckily happened to come across the solution here: https://github.com/kriasoft/react-starter-kit/issues/1142

to use it just do:

app.use(csrf({ cookie: true, value: (req) => (req.cookies.csrfToken) }));

and then for every get request set a cookie with the csrf token:

res.cookie('csrfToken', req.csrfToken ? req.csrfToken() : null, { sameSite: true, httpOnly: true }); 

Loveridge

Thanks for pointing this out, it seems to be a fairly generic solution so it may work in a react-server context as well. – Brogan

I don't get what the point of this is though. If you're auto setting the token in every request, without receiving it from the client, its pretty much useless – Butcherbird

I think that the custom value function that checks for the CSRF token shouldn't look inside the cookies, but in the body or in the header of the request, as per default behaviour in the csurf docs, otherwise checking the cookie lets the server prone to the CSRF attack you are trying to defend from! – Accipitrine