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请求，他们也可以查看管理器可用的选项。

我当前正在使用会话cookie来验证用户服务器端，并且对任何数据敏感的REST获取/发布都进行了身份验证-但这如何转换为客户端？

user logs in -> server verifies -> server sends back session variable that holds user.position / or sends json(user) -> client looks at session from server or json(user), stores user.position in state.user.position -> state.user.position is used in conditional if to determine whether or not to display components as above ---*but*---> client goes in and changes state state.user.position and gets access to components anyways

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

Answer 1

类似的事情是由后端处理的，而不是由React处理的。无论您做什么，请勿都只需获取所有数据并将其过滤到React中。我不知道如何根据示例来区分用户，但为简单起见，我假设您使用的是JWT。在此实现中，登录时会生成令牌，您可以将其安全地存储在本地存储或Redux中。对于您进行的所有api调用，都应在它们上附加一个令牌。然后，对于登录用户的每个呼叫，后端应该做一些事情：

验证令牌签名
从令牌中获取用户ID并获取权限/角色
检查用户是否可以访问api调用

这样，即使有人奇迹般地更改了令牌并通过了验证（这不太可能），数据库中的条目仍保持不变，并且不会让他们访问所要查找的数据。

您可以通过角色或通过更具体的权限标志来保护API路由。由于您是在扮演角色，因此大多数后端框架都允许您应用一些中间件，因此对所有管理员调用都应用角色检查中间件，对于所有已登录的用户调用都使用角色检查中间件，这将为您节省很多麻烦

请记住，每当进行客户端筛选时，您就将所有安全性放在了黑客的笔记本电脑上。

编辑：解决评论

JWT只是提供了解决所有问题的标准化方法。

让我们先假设您的会话变量存储以下信息{'userid': 5, 'position': manager}。因此，如果我是一个不错的攻击者，我将把经理更改为管理员，看看能从哪里得到我，但是如果我不好，我将尝试使用0和10000的所有用户ID，同时使用manager和admin作为位置，看看哪里能带给我。因此，您随后尝试使用随机的用户ID，例如时间戳的哈希值。尽管如此，攻击面仅有所增加。现在，您对这些黑客感到生气。您就像没关系，我要对该会话变量进行加密，但是我无法真正将密钥存储在React中，因为这很容易被破解，因此我将加密后的内容附加到每个请求中，对其进行解密，验证，并批准是否有效。到那时，您基本上几乎重新发明了JWT。

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

1 个答案: