Должен ли я использовать защиту csrf в React SPA? - PullRequest
Новая
       35

Должен ли я использовать защиту csrf в React SPA?

0 голосов
/ 07 февраля 2019

Я использую одностраничное приложение React в качестве клиентской стороны или создаю приложение React (CRA).

В своем бэкэнде я использую Node.js & Express.

, чтобы получить данные или сохранить их.нужно вызвать API от клиента до бэкэнда.

на самом деле я видел несколько промежуточных программ, таких как: - Express CSURF

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

, и даже если я сделал это: 

app.use(session({
    genid: function (req) {
        return uuidv4() // use UUIDs for session IDs
    },
    name:keys.session.name,
    secret: keys.session.secret,
    resave: false,
    saveUninitialized: true,
    rolling:true,
    cookie: { 
        secure: false,
        httpOnly: true,
        maxAge:keys.session.maxAge, // satu hari,
        sameSite:true,
     }

}));
app.use(passport.session());
app.use(cookieParser());
app.use(csrf({ cookie: false }));


app.use((req,res,next)=>{
     res.cookie('CSRF_token', req.csrfToken(), { sameSite: true });
})

Это означает, что файл cookie CSRF_token будет изменять каждый запрос.но я установил его только один раз так: axios.defaults.headers.common['csrf-token'] = csrf; и результаты все еще работают, что не должно работать.

Так мне нужен CSRF?или как правильно настроить на реагирующий SPA.

1 Ответ

0 голосов
/ 18 апреля 2019

Так нужен ли мне CSRF?

Как указано здесь: Я нахожусь под угрозой CSRF-атак в форме POST, которая не требует входа пользователя в систему? Я думаю, вы все равно должны установить его.

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

Значением по умолчанию является функция, которая считывает токен из следующих мест в следующем порядке:

  • 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-Tokenheader.

Исходя из того, что проверяет CSURF, у вас есть множество вариантов на выбор, и, глядя на axios, кажется, есть несколько вариантов для установки cookie-файла xsrf иИмена заголовков . 

...
// `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
xsrfCookieName: 'XSRF-TOKEN', // default

// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
xsrfHeaderName: 'X-XSRF-TOKEN', // default
...

Например, для использования ключа заголовка X-XSRF-TOKEN axios по умолчанию, я использовал следующий метод в моем ApФайл p.js: 

componentDidMount() {
    axios.get(`/api/csrf`) // Send get request to get CSRF token once site is visited.
      .then(res => {
        axios.defaults.headers.post['X-XSRF-TOKEN'] = res.data; // Set it in header for the rest of the axios requests.
      })
  }

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

Я не уверен, что вы используете для своего клиента, но если вы используете Redux, выможете посмотреть здесь за помощью.Если это не сработает, вы можете использовать Google другими способами.

...