我必须在React SPA中使用CSRF保护吗？

Question

我使用React Single Page Application作为客户端或Create React App（CRA）。

在后端，我使用Node.js＆Express。

要获取数据或存储，我需要从客户端到后端调用API。

实际上，我已经看过几种中间件，例如：-Express CSURF

但老实说，我不明白如何在每次请求时都向客户端发送CSRF令牌。我尝试了几次，方法是将CSRF插入cookie中，然后将其放在客户端。但是当存储第一个请求或新的cookie时，出现error 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 });
})

这意味着CSRF_token cookie将更改每个请求。但我只这样设置一次：axios.defaults.headers.common['csrf-token'] = csrf;结果仍然有效，但不起作用。

那我需要CSRF吗？或如何在React SPA上配置正确的SPA。

Answer 1

So do I need CSRF?

As stated here: Am I under risk of CSRF attacks in a POST form that doesn't require the user to be logged in? I think you should still set it.

As for why it is not working for you, I assume it is because of the header name. You may check what CSURF checks by default.

The default value is a function that reads the token from the following locations, in order:

• req.body._csrf - typically generated by the body-parser module.
• req.query._csrf - a built-in from Express.js to read from the URL query string.
• req.headers['csrf-token'] - the CSRF-Token HTTP request header.
• req.headers['xsrf-token'] - the XSRF-Token HTTP request header.
• req.headers['x-csrf-token'] - the X-CSRF-Token HTTP request header.
• req.headers['x-xsrf-token'] - the X-XSRF-Token HTTP request header.

Going by what CSURF checks, you have a variety of options to choose from, and looking at axios, it seems to have a couple options for setting xsrf cookie and header names.

...
// `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
...

For example, in order to use the X-XSRF-TOKEN header key axios comes with by default, I used the following method in my App.js file:

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.
      })
  }

You could, however, use a form hidden input or any other method you're comfortable with. You can read more about why it's common to put them in cookies here.

I'm not sure what you're using for your client, but if you're using Redux, you may look here for help. If it doesn't work, you may Google other methods.