Каков оптимальный способ защиты JWT в файлах cookie для приложения React / Redux?

Question

Сейчас я работаю над приложением React / Redux с полным стеком и работаю над настройкой аутентификации JWT и передачей JWT с помощью файлов cookie. У меня была пара вопросов по обработке токена CSRF, сгенерированного сервером.

1) После установки токена CSRF на стороне сервера он передается клиенту? Как именно это проходит? (Я видел примеры, когда это передавалось как объект, но те, которые я обнаружил, не были объяснены очень хорошо или просто недостаточны)

server.js

// config csrf in server
app.use(csrf({
  cookie: {
    key: '_csrf',
    secure: true,
    httpOnly: true,
    sameSite: 'strict',
    maxAge: 86400
  }
}))

// Hits my api routes, and if these arent hit, the index.html file is rendered
app.use(routes)

// Route used to fetch the index html file
app.get('*', (req, res) => {
  let csrfToken = req.csrfToken()
  console.log(csrfToken) // This doesnt console log anything on the server side
  res.sendFile(path.join(__dirname, "./client/build/index.html"), {
    _csrf: csrfToken
  })
})

2) Как только токен CSRF установлен, должен ли он храниться в состоянии приложения (хранилище Redux) для постоянного хранения? Или это будет ненужным?

3) На стороне клиента, когда я буду готов отправить данные в маршрут через запрос POST, если я правильно понимаю, вам нужно будет включить скрытое поле ввода в переменную csrf, например:

<input type="hidden" name="_csrf" value=csrfToken/>

Поэтому, когда вы отправляете форму, вы включаете этот ввод, а затем в запросе post (при условии извлечения или axios) вы устанавливаете заголовки для включения этого токена csrf, чтобы сервер мог сравнить его с токен, который клиент отправляет на маршрут, я правильно понимаю?

Спасибо!

Answer 1

Ничто из того, что вы спросили, не имеет отношения к реакции или избыточности.Речь идет об обмене запросами / ответами с HTTP-сервером.

При использовании промежуточного программного обеспечения CSRF он автоматически предоставляет токены CSRF в виде куки-файла сеанса по запросу, и ожидается, что вы передадите его обратно на сервер.при последующих запросах.

1) Маркеры CSRF обычно устанавливаются сервером в файл cookie или задаются как метатег в HTML.Этот код генерируется уникально для каждого HTTP-запроса к серверу.Приложения несут ответственность за чтение мета-тега cookie, а затем отправку его обратно на сервер для будущих запросов.Один из возможных способов в качестве заголовка: «X-csrf-token» (https://en.m.wikipedia.org/wiki/Cross-site_request_forgery)

2) в некоторых случаях не нужен: но это только в силу того факта, что если сервер отправляет cookieответ в заголовке, тогда ваш браузер всегда будет хранить этот файл cookie, если только у вас не отключены файлы cookie.При отправке запроса на сервер вам нужно извлечь этот файл cookie и отправить его в качестве заголовка выше

3) Я предлагаю вам прочитать файл readme для промежуточного программного обеспечения Express CSRF (https://github.com/expressjs/csurf/blob/master/README.md),, особенно эту часть окак промежуточное ПО ищет токены CSRF в ответах или дальнейших запросах:

Значением по умолчанию является функция, которая считывает токен из следующих мест в следующем порядке: • req.body._csrf - обычно генерируетсямодулем body-parser. • req.query._csrf - встроенный из Express.js для чтения из строки запроса URL. • req.headers ['csrf-token'] - заголовок HTTP-запроса CSRF-Token.• req.headers ['xsrf-token'] - заголовок HTTP-запроса XSRF-Token. • req.headers ['x-csrf-token'] - заголовок HTTP-запроса X-CSRF-Token. • req.headers ['x-xsrf-token '] - заголовок HTTP-запроса X-XSRF-Token.

Как вы можете видеть - как вы предоставляете его обратно на сервер, зависит от вас - большинство людей выбирают заголовок, но это может быть как тело или получить требованиеЕсть строка запроса.