React 前端和 REST API,CSRF

IT技术 reactjs cookies csrf rest
2021-05-03 23:45:44

在前端使用 React 和 RESTful API 作为后端并通过 JSON Web Token (JWT) 进行授权,我们如何处理会话?例如,登录后,我从 REST 获取 JWT 令牌。如果我将它保存到 localStorage 我很容易受到 XSS 的攻击,如果我将它保存到 cookie,除了我将 cookie 设置为 HttpOnly 之外,同样的问题,但 React 无法读取 HttpOnly Cookie(我需要读取 cookie 以从中获取 JWT,并使用这个带有 REST 请求的 JWT),我也没有提到跨站点请求伪造(CSRF)问题。如果您使用 REST 作为后端,则不能使用 CSRF 令牌。

因此,React with REST 似乎是一个糟糕的解决方案,我需要重新考虑我的架构。是否有可能为您的用户提供一个安全的 React 应用程序来处理 REST API 端的所有业务逻辑,而不必担心丢失他们的数据?

更新:

据我了解,可以这样做:

  1. React 对 REST API 进行 AJAX 调用
  2. React 从 REST API 获取 JWT 令牌
  3. React 写入 HttpOnly cookie
  4. 因为 React 无法读取 HttpOnly cookie,所以我们在需要身份验证的所有 REST 调用中按原样使用它
  5. REST API 调用检查 XMLHttpRequest 标头,这是某种 CSRF 保护
  6. REST API 端检查 cookie,从中读取 JWT 并执行操作

我这里缺乏理论知识。逻辑看起来很安全,但我仍然需要回答我的问题并批准这个“工作流程”。

2个回答
  1. React 对 REST API 进行 AJAX 调用

放心,有很多宁静的资源客户端库可用

  1. React 从 REST 获取 JWT 令牌

放心,这就是 JWT 应该做的

  1. React 写 httponly cookie

我不这么认为,应该不行,但是session不是那么重要的东西,它很快就会过时,关键操作重新检查密码,即使黑客在很短的时间内得到了它,你可以用户登录时将会话令牌与 IP 绑定在一起,并在您的后端 api 中检查它。如果你想要它最安全,只需将令牌保留在内存中,并在打开新页面或页面刷新时重做登录

  1. 因为 react 无法读取 httponly cookie,所以我们在需要身份验证的所有 REST 调用中按原样使用它

放心,通过登录令牌检查用户和权限,例如 csrf,您可以将登录令牌放入请求标头中,并在后端 apis 中检查它。将登录令牌绑定到您自己的宁静库将为您节省大量代码

  1. REST on call 检查 XMLHttpRequest 标头,什么是 CSRF 保护 REST 端检查 cookie,从中读取 JWT 并执行操作

放心,就像大多数人一样。此外,将 csrf 令牌绑定到您自己的宁静库将为您节省很多代码

在标题https://www.npmjs.com/package/express-jwt-token 中使用用户令牌 Authorization JWT < jwt token >

在头https://github.com/expressjs/csurf 中使用 csrf 令牌 req.headers['csrf-token'] - the CSRF-Token HTTP request header.

宁静客户端https://github.com/cujojs/rest

与 jwt https://github.com/joshgeller/react-redux-jwt-auth-examplereact

您的服务器可以直接设置 JWT cookie 作为对登录请求的响应。

服务器响应POST /loginSet-Cookie: JWT=xxxxxx该 cookie 仅为 http,因此不易受到 XSS 的攻击,并将自动包含在来自客户端的所有 fetch 请求中(只要您使用withCredentials: true)。

正如您提到的,CSRF 已得到缓解,有关详细信息,请参阅 OWASP