Как предотвратить редактирование кода React.js на производстве?

Question

Я довольно новичок в разработке front-end, и в настоящее время я разрабатываю приложение, используя React.js в качестве front-end и ASP.NET Core в качестве back-end API.

I'mВ настоящее время в процессе разработки гранулярной системы авторизации, которая зависит от утверждений пользователя, которые существуют в 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

Определенный злоумышленник может делать практически все с клиентским кодом.Вот почему ваше приложение не может полагаться на проверки на стороне клиента.Проверки на стороне клиента только для целей пользовательского интерфейса, ничего более.

... И получить доступ ко всей системе?

Нет, если система правильно спроектирована,например, с проверками на стороне сервера.Информация, к которой у пользователя нет доступа, никогда не должна отправляться в браузер (в коде, HTML, файлах данных и т. Д.).То есть вы никогда не отправляете им информацию, которую они не должны видеть, а затем не позволяете им увидеть ее с помощью проверки на стороне клиента;вместо этого вы просто не отправляете им информацию, которую они не должны видеть.Таким образом, не имеет значения, что они делают с клиентским кодом, они ничего не получат.

Аналогично, каждая команда, отправляемая на сервер для выполнения чего-либо, должна быть проверена на сервере.как поступивший от аутентифицированного пользователя с соответствующими разрешениями для выполнения этого действия.