如何防止在生产中编辑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目的，仅此而已。

...并获得整个系统的访问权限？

如果系统设计正确（例如，通过服务器端检查），则不会。 用户不应访问的信息绝不应发送到其浏览器（以代码，HTML，数据文件等）。 也就是说，您永远不会向他们发送他们不该看到的信息，然后通过客户端检查阻止他们看到它们。 相反，您只是不向他们发送他们不该看到的信息。 这样，他们使用客户端代码做什么都没有关系，也不会给他们任何东西。

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