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，数据文件等）。也就是说，您永远不会向他们发送他们不该看到的信息，然后通过客户端检查阻止他们看到它们。相反，您只是不向他们发送他们不该看到的信息。这样，他们使用客户端代码做什么都没有关系，也不会为他们带来任何好处。

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

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

1 个答案: