React 前端和 REST API、CSRF
React frontend and REST API, CSRF
在前端使用 React，以 RESTful API 作为后端，并通过 JSON Web 令牌 (JWT) 授权，我们如何处理会话？例如，登录后，我从 REST 获得了一个 JWT 令牌。如果我将它保存到 localStorage，我很容易受到 XSS 攻击，如果我将它保存到 cookie，同样的问题，除了我将 cookie 设置为 HttpOnly，但 React 无法读取 HttpOnly Cookie（我需要读取 cookie 以从中获取 JWT，并使用这个带有 REST 请求的 JWT），我也没有提到跨站请求伪造（CSRF）问题。如果您使用 REST 作为后端，则不能使用 CSRF 令牌。
因此，React with REST 似乎是一个糟糕的解决方案，我需要重新考虑我的架构。是否有可能为您的用户提供一个安全的 React 应用程序来处理 REST API 端的所有业务逻辑而不用担心丢失他们的数据？
更新：
据我了解，可以这样做：
- React 对 REST 进行 AJAX 调用 API
- React 从 REST 获取 JWT 令牌 API
- React 写入 HttpOnly cookie
- 因为 React 无法读取 HttpOnly cookie，我们在所有需要身份验证的 REST 调用中使用它as-is
- REST API 调用检查 XMLHttpRequest header，这是某种 CSRF 保护
- REST API 端检查 cookie，从中读取 JWT 并执行操作
我这里缺乏理论知识。逻辑看起来很安全，但我仍然需要回答我的问题并批准这个“工作流程”。
- React makes AJAX call to REST API
放心，有很多 restful 资源客户端库可用
- React gets JWT token from REST
放心，这是智威汤逊应该做的
- React writes httponly cookie
我不这么认为，它应该不起作用，但是session不是那么重要的东西，它很快就会过时，并且在关键操作上重新检查密码，即使是黑客也得到了在很短的时间内，您可以在用户登录时将 session 令牌与 IP 绑定在一起，并在您的后端 api 中检查它。如果您希望它最安全，只需将令牌保留在内存中，并在打开新页面或页面刷新时重新登录
- Because react can't read httponly cookie, we use it as-is in our all REST call where we need authentication
放心，通过登录令牌检查用户和权限，例如 csrf，您可以将登录令牌放入您的请求 header，并在您的后端 api 中检查它。
将登录令牌绑定到您自己的 restful 库将为您节省很多代码
- REST on calls checks XMLHttpRequest header, what is some kind of CSRF protection
REST side check for cookie, read JWT from it and do stuff
像大多数人一样放心。
此外，将 csrf 令牌绑定到您自己的 restful 库将为您节省很多代码
在 header https://www.npmjs.com/package/express-jwt-token 中使用用户令牌
Authorization JWT < jwt token >
在 header https://github.com/expressjs/csurf 中使用 csrf 令牌
req.headers['csrf-token'] - the CSRF-Token HTTP request header.
restful 客户 https://github.com/cujojs/rest
与 jwt 反应 https://github.com/joshgeller/react-redux-jwt-auth-example
您的服务器可以直接设置 JWT cookie 作为对登录请求的响应。
服务器用 Set-Cookie: JWT=xxxxxx 响应 POST /login。该 cookie 仅为 http，因此不易受到 XSS 攻击，并且将自动包含在来自客户端的所有提取请求中（只要您使用 withCredentials: true）。
CSRF 已如您所述得到缓解，请参阅 details 的 OWASP。
在前端使用 React，以 RESTful API 作为后端，并通过 JSON Web 令牌 (JWT) 授权，我们如何处理会话？例如，登录后，我从 REST 获得了一个 JWT 令牌。如果我将它保存到 localStorage，我很容易受到 XSS 攻击，如果我将它保存到 cookie，同样的问题，除了我将 cookie 设置为 HttpOnly，但 React 无法读取 HttpOnly Cookie（我需要读取 cookie 以从中获取 JWT，并使用这个带有 REST 请求的 JWT），我也没有提到跨站请求伪造（CSRF）问题。如果您使用 REST 作为后端，则不能使用 CSRF 令牌。
因此，React with REST 似乎是一个糟糕的解决方案，我需要重新考虑我的架构。是否有可能为您的用户提供一个安全的 React 应用程序来处理 REST API 端的所有业务逻辑而不用担心丢失他们的数据？
更新：
据我了解，可以这样做：
- React 对 REST 进行 AJAX 调用 API
- React 从 REST 获取 JWT 令牌 API
- React 写入 HttpOnly cookie
- 因为 React 无法读取 HttpOnly cookie，我们在所有需要身份验证的 REST 调用中使用它as-is
- REST API 调用检查 XMLHttpRequest header，这是某种 CSRF 保护
- REST API 端检查 cookie，从中读取 JWT 并执行操作
我这里缺乏理论知识。逻辑看起来很安全，但我仍然需要回答我的问题并批准这个“工作流程”。
- React makes AJAX call to REST API
放心，有很多 restful 资源客户端库可用
- React gets JWT token from REST
放心，这是智威汤逊应该做的
- React writes httponly cookie
我不这么认为，它应该不起作用，但是session不是那么重要的东西，它很快就会过时，并且在关键操作上重新检查密码，即使是黑客也得到了在很短的时间内，您可以在用户登录时将 session 令牌与 IP 绑定在一起，并在您的后端 api 中检查它。如果您希望它最安全，只需将令牌保留在内存中，并在打开新页面或页面刷新时重新登录
- Because react can't read httponly cookie, we use it as-is in our all REST call where we need authentication
放心，通过登录令牌检查用户和权限，例如 csrf，您可以将登录令牌放入您的请求 header，并在您的后端 api 中检查它。 将登录令牌绑定到您自己的 restful 库将为您节省很多代码
- REST on calls checks XMLHttpRequest header, what is some kind of CSRF protection REST side check for cookie, read JWT from it and do stuff
像大多数人一样放心。 此外，将 csrf 令牌绑定到您自己的 restful 库将为您节省很多代码
在 header https://www.npmjs.com/package/express-jwt-token 中使用用户令牌
Authorization JWT < jwt token >
在 header https://github.com/expressjs/csurf 中使用 csrf 令牌
req.headers['csrf-token'] - the CSRF-Token HTTP request header.
restful 客户 https://github.com/cujojs/rest
与 jwt 反应 https://github.com/joshgeller/react-redux-jwt-auth-example
您的服务器可以直接设置 JWT cookie 作为对登录请求的响应。
服务器用 Set-Cookie: JWT=xxxxxx 响应 POST /login。该 cookie 仅为 http，因此不易受到 XSS 攻击，并且将自动包含在来自客户端的所有提取请求中（只要您使用 withCredentials: true）。
CSRF 已如您所述得到缓解，请参阅 details 的 OWASP。