• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Implementacja tokenów csrf po stronie clienta react/express

Object Storage Arubacloud
0 głosów
350 wizyt
pytanie zadane 18 stycznia 2020 w JavaScript przez Lothuss Nowicjusz (220 p.)
zamknięte 19 stycznia 2020 przez Lothuss

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?

komentarz zamknięcia: Rozwiązanie poniżej

3 odpowiedzi

+1 głos
odpowiedź 19 stycznia 2020 przez Lothuss Nowicjusz (220 p.)

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ść

0 głosów
odpowiedź 19 stycznia 2020 przez slawek763 Użytkownik (940 p.)
0 głosów
odpowiedź 19 stycznia 2020 przez Lothuss Nowicjusz (220 p.)

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?

Podobne pytania

0 głosów
0 odpowiedzi 162 wizyt
pytanie zadane 12 lipca 2019 w JavaScript przez S-Type Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 1,868 wizyt
pytanie zadane 28 stycznia 2019 w JavaScript przez azez Użytkownik (690 p.)
0 głosów
0 odpowiedzi 97 wizyt
pytanie zadane 15 kwietnia 2021 w JavaScript przez Squbany221 Użytkownik (640 p.)

92,761 zapytań

141,685 odpowiedzi

320,485 komentarzy

62,105 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...