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

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

Update:

据我所知,这样做是可能的:

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

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

推荐答案

  1. React对restapi进行AJAX调用

放心吧,有很多restful资源客户端库可用

  1. React从REST获取JWT令牌

当然,这是JWT应该做的

  1. React写入httponly cookie

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

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

请放心,通过登录令牌判断用户和权限,比如csrf,您可以将登录令牌放入请求头中,并在后端API中进行判断.

  1. REST on calls判断XMLHttpRequest头,什么是CSRF保护

就像大多数人一样,这是肯定的.

在头https://www.npmjs.com/package/express-jwt-token中使用用户令牌

在报头https://github.com/expressjs/csurf中使用csrf令牌

restful客户端https://github.com/cujojs/rest

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

Reactjs相关问答推荐

用于获取带有事件处理程序的API的动态路由

我如何在不被 destruct 的情况下将导航栏固定在顶部?

如何修复ReferenceError:在构建过程中未定义导航器

生产部署:控制台中 Firebase 无效 api 密钥错误

找不到名称setCometChat

在 useSelector() 中使用 array.map() 如何导致组件在分派操作时重新渲染?

在一个事件处理程序中进行多次调度是个好主意吗?

Reactjs:MUI5:MobileDateTimePicker API:如何自定义日历中的文本

未捕获的运行时错误:对象作为 React 子项无效

如何到达类组件中的状态?

使用 MuiCssBaseline 在所有 MUI v5 标签上设置边距 0

React - 错误边界未捕获错误

当每个元素都可拖动时,移动设备上的滚动列表出现问题

使用 axios 响应路由 Dom 操作

意外的标记.您可能需要一个合适的加载器来处理这种文件类型.书?.img? /*#__PURE__*/React.createElement("img",

在 redux 中分派到另一个减少时状态值不会改变

在嵌套的 Stack Navigator 中的 BottomTabBar 中导航会导致比以前更多的渲染

react-markdown 不渲染 Markdown

在视图列表上react 本机无限循环的反弹动画?

如何在按钮左下角制作 Material UI 菜单下拉菜单