反应前端和REST API，CSRF

Question

使用REST API作为后端，由JWT授权反应前端，但如何处理会话？例如，登录后我从REST获取JWT令牌，如果我将其保存到localStorage，我很容易受到XSS的攻击，如果我将其保存到Cookies，只有在没有设置HttpOnly时才会出现同样的问题，但是反应无法读取HttpOnly Cookies（我需要读取cookie以从中获取JWT，并将此JWT用于休息请求），我也没有提到CSRF问题，如果您使用REST作为后端，则无法使用CSRF令牌。

因此，使用REST的React似乎是一个糟糕的解决方案，我需要重新思考我的架构，怎么样？是否有可能为您的用户提供安全的响应应用程序，以便在REST API端处理所有业务逻辑，而不必担心丢失数据？

更新

据我所知，有可能这样做：

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

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

Answer 1

  

  
1. React对REST API进行AJAX调用
  

保证，有许多可用的资源客户端库

  

  
1. React从REST获取JWT令牌
  

保证，这是JWT应该做的事情

  

  
1. React写入httponly cookie
  

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

  

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

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

  

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

像大多数人一样，保证。 此外，将csrf令牌绑定到您自己的restful lib将为您节省大量代码

在标题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.

restful client https://github.com/cujojs/rest

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

作出反应

Answer 2

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

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

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