如何防止在生產中編輯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，數據文件等）。 也就是說，您永遠不會向他們發送他們不該看到的信息，然后通過客戶端檢查阻止他們看到它們。 相反，您只是不向他們發送他們不該看到的信息。 這樣，他們使用客戶端代碼做什么都沒有關系，也不會給他們任何東西。

同樣，發送到服務器以執行某項操作的每個命令都需要在服務器上驗證是否來自具有適當權限的經過身份驗證的用戶，以執行該操作。