reactjs - 用户能否在 Chrome 中更改 Redux/Mobx 的值以获得对受限 View 的访问权限？

Question

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

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

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

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

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

提前致谢!

Answer 1

始终假设对手可以完全控制浏览器。

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

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

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

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

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

---

进一步阅读:

OWASP Top Ten (2017) Broken Access Control (加粗是为了强调)

Access control is only effective if enforced in trusted server-sidecode or server-less API, where the attacker cannot modify the accesscontrol check or metadata.

• With the exception of public resources, deny by default.

• Implement access control mechanisms once and re-use them throughout the application, including minimizing CORS usage.

• Model access controls should enforce record ownership, rather than accepting that the user can create, read, update, or delete anyrecord.

• Unique application business limit requirements should be enforced by domain models.

• Disable web server directory listing and ensure file metadata (e.g. .git) and backup files are not present within web roots.

• Log access control failures, alert admins when appropriate (e.g. repeated failures).

• Rate limit API and controller access to minimize the harm from automated attack tooling.

• JWT tokens should be invalidated on the server after logout. Developers and QA staff should include functional access control unit and integration tests.

Understanding React Frontend security

We need to make one thing clear — everything you put in the clientbrowser can be easily changed by the client.

在那篇文章的后面:

How do I prevent the user from accessing non-public parts of my site?

You do it exactly as you though to do it — you create a variable, setit to true for admins only and once the check passes, show the adminonly content.

“Ok, that’s not secure at all — everyone can then go to the admin pageand delete everything!” you scream.

Fair — but only if you implement your application in a bad way. Thefrontend part should not be concerned with the validity or not ofcredentials provided. It should always accept the data as “true” andjust render all the data it is passed.

It it’s the backend job to perform this validation!