React 前端和 REST API、CSRF答案

【问题标题】：React frontend and REST API, CSRFReact 前端和 REST API、CSRF
【发布时间】：2018-02-06 02:21:02
【问题描述】：

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

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

更新：

据我了解，可以这样做：

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

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

【问题讨论】：

first.. 如果您使用 JWT 令牌进行身份验证，您为什么还要在前端读取它。它应该是 http-only 和安全的.. 其次.. 很有可能将 CSRF 令牌与 REST 一起使用。作为参考，您可以查看 OWASP 的指南。希望这会有所帮助owasp.org/index.php/…
@TasmineRout 但我如何在后端读取它？例如，我获取 rest api 来获取 JWT，我如何才能读取并保存它而不是在前端？
@MyMomSaysIamSpecial 您可以阅读有关 HTTP Only Cookies here 的信息。当您发出其余请求以获取令牌时，服务器会将其作为仅 HTTP cookie 发送回，浏览器将其与您域的其他 cookie 一起存储在其末尾。然后在每个请求中将相同的 cookie 与所有其他 cookie 一起发送到您的服务器（ajax 或其他）。您无需在客户端执行任何操作即可实现这一点。事实上，浏览器不允许使用 Javascript 读取 cookie。所以他们不能被劫持。
@MyMomSaysIamSpecial 您可以读取后端的所有 cookie。您可以从 Http 标头中获取它。 CSRF 令牌是为了防止跨站点请求。它们用于确保对 Web 服务的请求仅来自相应的 UI/用户。它们不用于对请求者进行身份验证或授权。它们仅用于保护 Web 服务免受来自外部的欺诈性请求。它们可以是特定于会话/请求的，因此没有其他人可以使用您的令牌。
你看过这篇文章吗？ stackoverflow.com/questions/27067251/…

标签： reactjs cookies csrf rest

【解决方案1】：

React 对 REST API 进行 AJAX 调用

放心，有大量可用的宁静资源客户端库

React 从 REST 获取 JWT 令牌

放心，这是 JWT 应该做的

React 写入 httponly cookie

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

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

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

REST 调用检查 XMLHttpRequest 标头，什么是某种 CSRF 保护 REST 端检查 cookie，从中读取 JWT 并做一些事情

放心，就像大多数人一样。另外，将 csrf 令牌绑定到你自己的 restful 库会为你节省很多代码

在标头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-example 反应

【讨论】：

您能否详细说明“会话不是那么重要，它很快就会过时”？
“您可以在用户登录时将会话令牌与 IP 绑定在一起并在您的后端 api 中检查它”甚至是一个理智的想法吗？ IP 在各地共享。
“只需将令牌保存在内存中，并在打开新页面或页面刷新时重做登录”因此您建议忽略过去 20 多年发明的所有会话，并将网络体验倒退到石器时代?
@Stefan session is not such a important thing 表示如果你使用 session 或 cookie 来存储登录令牌，那么你必须在短时间内限制它，否则黑客获得并利用它的机会更大
@JoseA 希望这会有所帮助github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/…

【解决方案2】：

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

服务器以Set-Cookie: JWT=xxxxxx 响应POST /login。该 cookie 仅是 http 的，因此不易受到 XSS 攻击，并且会自动包含在来自客户端的所有 fetch 请求中（只要您使用 withCredentials: true）。

如您所述，CSRF 已得到缓解，请参阅 details 的 OWASP。

【讨论】：

“并将自动包含在所有获取请求中”这就是黑客可以对受害者进行 CSRF 的原因。