javascript - 如何防止在生产环境中编辑 React.js 代码？

Question

我对前端开发相当陌生，目前正在开发一个使用 React.js 作为前端、ASP.NET Core 作为 API 后端的应用程序。

我目前正在开发一个细粒度的授权系统，该系统取决于本地存储中存储的 JWT 中存在的用户声明，如果声明存在，则将呈现一个元素，否则将呈现一个元素将不会。相当标准。

static getUserInfo = () => {
    return JSON.parse(atob(localStorage.getItem("jWT").split(".")[1]));
  };

  static isAuthorized(claim) {
    let claims = this.getUserInfo().claims;
    if (claims.includes(claim) || claims === "GLOBAL_ADMIN") {
      return true;
    } else {
      return false;
    }
  }

由于此代码不会调用 API 来检查用户是否确实拥有此声明，因此攻击者可以打开 Chrome 开发者工具并修改代码，使其类似于:

  static isAuthorized(claim) {
    let claims = this.getUserInfo().claims;
    if (claims.includes(claim) || claims === "GLOBAL_ADMIN" || true) {
      return true;
    } else {
      return false;
    }
  }

并且可以访问整个系统？我能够在具有可用源映射的开发环境中执行上述操作，但无法在生产环境中执行上述操作，因为构建不包含源映射，我能够修改代码，但更改并未生效。

我的确切问题是，您可以直接在浏览器中修改 React.js 代码并在用户执行下一步操作时立即生效吗？

Answer 1

坚定的恶意行为者几乎可以利用客户端代码执行任何操作。这就是为什么您不能让您的应用程序依赖于客户端检查。客户端检查仅用于 UI 目的，仅此而已。

...And get access to the whole system?

如果系统设计正确(例如，具有服务器端检查)，则不会。用户不应访问的信息绝不应发送到他们的浏览器(以代码、HTML、数据文件等形式)。也就是说，您永远不会向他们发送他们不应该看到的信息，然后通过客户端检查阻止他们看到这些信息；相反，您只是不向他们发送他们不应该看到的信息。这样，无论他们如何处理客户端代码，都不会得到任何东西。

同样，发送到服务器执行某些操作的每个命令都需要在服务器上进行验证，以确定是否来自具有执行该操作的适当权限的经过身份验证的用户。