reactjs - 如果用户可以更改状态，如何在 React 中实现访问控制

Question

我正在尝试使用 react-redux 实现基于角色的访问控制系统。到目前为止，我一直在阅读它并看到了一些通用的方法:

<View>
    {!user && <LoginScreen />}
    {user && <WelcomeScreen user={user} />}
</View>

这基本上是使用变量或状态来测试条件并授予对某些组件的访问权限。当我遇到这篇文章时，我的困境发生了:

Can react state be tampered with to bypass security measures?

如果用户可以篡改状态并查看他们没有权限的组件，那么确保基于角色的访问的正确方法是什么？将用户数据存储为 position: employee 可以在客户端更改为 position: manager ，然后他们将能够看到经理可以使用哪些选项，即使没有发出 REST 请求。

我目前正在使用 session cookie 来验证用户服务器端，并且任何数据敏感的 REST get/posts 都经过身份验证——但这如何转化为客户端？

用户登录
-> 服务器验证
-> 服务器发回保存 user.position 的 session 变量/或发送 json(user)
-> 客户端查看来自服务器或 json(user) 的 session ，将 user.position 存储在 state.user.position 中
-> state.user.position 用于条件if判断是否显示组件如上
---*but*---> 客户端进入并改变状态 state.user.position 并且无论如何都可以访问组件

如果我们可以在客户端改变状态，我们如何安全地在 react/redux 中使用条件测试？

Answer 1

像这样的事情是由后端处理的，而不是由 React 处理的。无论你做什么，不要只是抓取所有数据并在 React 中过滤它。我不知道您如何根据您的示例区分用户，但是，为简单起见，我假设您使用的是 JWT .在此实现中，当您登录时会生成一个 token ，您可以将其安全地存储在例如本地存储或 redux 中。对于您进行的所有 api 调用，您应该为它们附加一个 token 。然后，对于登录用户发出的每个调用，后端应该做一些事情:

• 验证 token 签名
• 从 token 中获取用户 ID 并获取权限/角色
• 检查用户是否有权访问 api 调用

这样，即使奇迹般地有人更改了 token 并通过了验证(这不太可能)，数据库中的条目仍保持不变，并且不会让他们访问他们正在寻找的数据。

您可以按角色保护 API 路由，甚至可以通过特定的权限标志来更细粒度地保护 API 路由。由于您正在执行角色，因此大多数后端框架都允许您应用一些中间件，因此为所有管理员调用应用一个角色检查中间件，为所有登录的用户调用应用另一个中间件，这将为您省去很多麻烦.

请记住，无论何时进行客户端过滤，都是将所有安全措施置于黑客的笔记本电脑上。

编辑:处理评论

JWT 只是提供了一个标准化的方法来解决这个问题。

让我们暂时假设您的 session 变量存储以下信息 {'userid': 5, 'position': manager}。因此，如果我是一个不错的攻击者，我会把 manager 更改为 admin，看看我在哪里，但如果我不好，我会尝试从 0 到 10000 的所有用户 ID，包括 manager 和 admin位置，看看它能把我带到哪里。那么你尝试一个随机的用户 ID，比如时间戳的哈希值。尽管如此，攻击面只是有所增加。现在你对这些黑客很生气。你好像没问题，我要加密这个 session 变量，但我不能真正将 key 存储在 React 中，因为它是可破解的，我将把加密的东西附加到每个请求，解密它，验证它，并批准它是否有效。在这一点上，您基本上几乎重新发明了 JWT。