用户可以更改 Chrome 中 Redux/Mobx 的值以访问受限视图吗？

Posted 2023-03-28

【中文标题】用户可以更改 Chrome 中 Redux/Mobx 的值以访问受限视图吗？

【英文标题】：Can a user change the value of Redux/Mobx in Chrome to gain access to restricted views?

【发布时间】：2020-09-13 15:44:50

【问题描述】：

我有一个 react + firebase 应用程序。在用户的集合中，我有一个权限对象，我可以在其中跟踪用户有权访问的内容。然后在我的反应应用程序中，我有以下内容：

  // Login component
    const userRecord = await Firebase.login(email,password)
    store.user = await this.fetchUser(userRecord.uid)

对于仅限管理员的视图，我将它们包装在 withAuthorization HOC 中，在其中检查 store.user.permissions.admin

  // Not exactly this, but this is the general idea
  store.user.permissions.admin && <RestrictedView />

我的问题是，用户可以更改 chrome 中的权限值以访问受限视图吗？如果是这样，有没有更好的方法？我最终可能会使用 customClaims，但现在想使用上面的。

提前谢谢你！

【参考方案1】：

始终假定攻击者完全控制了浏览器。

通常，如果您希望您的应用能够抵御恶意实体，则它的安全性必须来自服务器。制作可以由您的服务器验证的授权/不记名令牌或 cookie 方案（即https://jwt.io/）。然后只允许根据该信息将数据发送给您想要的用户。前端的安全/验证更多的是确保用户不会无意中搞砸事情。

用户可以通过各种开发工具修改浏览器中的任何 html/CSS/JS。

用户可以完全访问通过 javascript 发送的任何信息（即使它被缩小，也有一些工具可以在某种程度上取消它）。

使用 React 的开发工具可以很容易地修改所有 React 状态，如果您使用的是 redux，您可能已经设置了 redux 开发工具。

在 firebase 中，文档中有一个完整的 section on security。设置您的RestrictedViews 后面的数据，以要求您需要的身份验证级别。确保 firebase 在您的应用程序安全中占有一席之地。 section on insecure rules 也是开始阅读 Firebase 可以为您做什么以及如何使用 configure their security rules 的好地方。

---

进一步阅读：

OWASP Top Ten (2017) Broken Access Control（加粗表示强调）

只有在受信任的服务器端实施访问控制才有效 代码或无服务器 API，攻击者无法修改访问权限 控制检查或元数据。

公共资源除外，默认拒绝。

实施一次访问控制机制并在整个应用程序中重复使用它们，包括最大限度地减少 CORS 的使用。

模型访问控制应该强制记录所有权，而不是接受用户可以创建、读取、更新或删除任何 记录。

应由域模型强制执行独特的应用程序业务限制要求。

禁用 Web 服务器目录列表并确保文件元数据（例如 .git）和备份文件不存在于 Web 根目录中。

记录访问控制失败，在适当的时候提醒管理员（例如重复失败）。

速率限制 API 和控制器访问，以最大限度地减少自动攻击工具的危害。

JWT 令牌应该在注销后在服务器上失效。开发人员和 QA 人员应包括功能访问控制单元和集成测试。

Understanding React Frontend security

我们需要明确一件事——您在客户端中放入的所有内容 客户端可以轻松更改浏览器。

在那篇文章的后面：

如何防止用户访问我网站的非公开部分？

你完全按照你的想法去做——你创建一个变量，设置 仅对管理员为真，一旦检查通过，向管理员显示 只有内容。

“好吧，这根本不安全——然后每个人都可以进入管理页面 并删除所有内容！”你尖叫。

公平——但前提是你以糟糕的方式实现你的应用程序。这 前端部分不应该关心的有效性与否 提供的凭据。它应该始终接受数据为“真实”并且 只需渲染它传递的所有数据。

执行此验证是后端工作！

【讨论】：

美丽的答案。谢谢你启发我扎卡里。