Implementacja tokenów csrf po stronie clienta react/express

Question

Próbuję zaimplementować tokeny CSRF po stronie clienta, po stronie servera już mam to zrobione.

Po stronie servera wygląda to tak:

server.js

import cookieParser from 'cookie-parser';
import csurf from 'csurf';

app.use(cookieParser());
const csrfProtection = csurf({ cookie: true });
app.use(csrfProtection);

app.use(function(req, res, next) {
  res.cookie('XSRF-TOKEN', req.csrfToken());
  res.locals._csrf = req.csrfToken();
  next();
});

router:

  app.post('/add', async (req, res) => {
    const jobs = await new Job({
      name: req.body.name,
      company: req.body.company,
    }).save();
    return res.json({ jobs, csrfToken: req.csrfToken() });
  });

komponent którym próbuję wysłać dane do serwera:

import React from 'react';
import axios from 'axios';
import { useForm } from 'react-hook-form';
export default function Test() {
  const { register, handleSubmit } = useForm();

  const getSearch = async data => {
    try {
      const response = await axios.post('http://localhost:4000/add', {
        name: data.name,
        company: data.company
      });
      console.log(response);
    } catch (error) {
      console.log(`err ${error}`);
    }
  };

  return (
    <form onSubmit={handleSubmit(getSearch)}>
      <input ref={register} type="text" name="name"></input>
      <input ref={register} type="text" name="company"></input>

      <input type="submit" value="Wyślij"></input>
    </form>
  );
}

Za każdym razem gdy wysyłam dane zwraca:

ForbiddenError: invalid csrf token

W jaki sposób mogę przekazać ten token aby to działało prawidłowo?

Answer 1

Dla kogoś kto będzie miał podobny problem

Ja rozwiązałem to tak:

W expressie do cors dodałem takie parametry

app.use(
  cors({
    origin: 'http://localhost:3000',
    credentials: true
  })
);

 oraz do axiosa w reaccie dodałem

  axios.defaults.withCredentials = true;

Teraz wszystko działa prawidłowo, po wysłaniu formularza zwraca status 200 a Ciasteczko z tokenem generuje nową wartość

Answer 2

Zapewne nie ustawiasz headera csrf w axios https://github.com/axios/axios/issues/2024

https://vsupalov.com/avoid-csrf-errors-axios-django/

Answer 3

Trochę to pozmieniałem.

Teraz za każdym razem po wejściu na stronę, generuje token CSRF i przekazuje go do headera

  app.get('/api/csrf', (req, res) => {
    res.json({ csrfToken: req.csrfToken() });
  });

server:

app.use(cookieParser());
const csrfProtection = csurf({ cookie: true });
app.use(csrfProtection);

app.use(function(req, res, next) {
  res.cookie('XSRF-TOKEN', req.csrfToken());
  res.locals._csrf = req.csrfToken();
  next();
});

Od strony clienta:

  useEffect(() => {
    axios.get(`http://localhost:4000/api/csrf`).then(res => {
      console.log(res.data.csrfToken);
      axios.defaults.headers.common['XSRF-TOKEN'] = res.data.csrfToken;
    });
  }, []);

 

Po wysłaniu axiosa który ma przekazać dane z formularza nadal wywala error

invalid csrf token

komponent z formularzem:

  const getSearch = async data => {
    try {
      const response = await axios.post('http://localhost:4000/add', {
        name: data.name,
        company: data.company
      });
      console.log(response);
    } catch (error) {
      console.log(`err ${error}`);
    }
  };

 

W nagłówkach po wysłaniu formularza token się pojawia

Co tym razem zrobiłem źle?