密碼安全 React.js

Question

我目前正在做一個項目，我正在使用 firebase 作為后端部分，我有以下問題：

1. 如何確保沒有人可以訪問 react.js 中的用戶密碼？
2. 將密碼保存在局部變量中是錯誤的嗎？
3. 在我的項目中，當用戶嘗試登錄時，用戶名和密碼輸入附加了“onChange”事件監聽器，因此基本上每次密碼輸入的值更改時，都會更新 state 並且使用 state 變量來登錄用戶。 這是錯的嗎？
4. 在密碼輸入上使用 react 的 useRef 是否更好，當用戶嘗試登錄時，只需使用 ref 獲取密碼輸入的值？

Answer 1

我對 firebase 不是很熟悉，但根據我對身份驗證的了解：

1. 不要存儲它。 密碼應該在客戶端顯示的唯一時間是用戶輸入密碼時。 使用該輸入后，您不應將其（普通）存儲在任何地方。 但是，服務器應用程序可能會從中存儲 hash（例如 bcrypt）。
2. 是的，這是錯誤的。 如 1 所述，純密碼並不意味着存儲在任何地方。 剛用過，后來忘記了。 客戶端通常將密碼發送到服務器端應用程序，然后收到返回的令牌，證明他們已登錄。然后使用該令牌發出后續請求。 一些實現可能涉及兩個令牌，一個是短期的（訪問令牌）和一個長期的（刷新令牌）。
3. 沒有錯。 只要提交后沒有保留state。
4. 這也有效。 不過3沒問題。

我根據我的研究和過去的經驗寫了這些答案。 但是身份驗證的主題非常廣泛，並且存在很多爭論。 我建議對該主題進行一些研究，以便您更加熟悉它的安全性的各個方面。

Answer 2

您的React應用程序是一個客戶端應用程序，進行password檢查的地方是您無法控制的firebase backend 。

onChange event listener器可以幫助您獲取用戶在password field中輸入的內容，以便您可以在server(firbase)中發送一些數據。您使用的本地 state 不是像localstorage這樣的持久storage ，它只是一個只有您的客戶端應用程序才能在您的瀏覽器中訪問的變量。因此不存在安全問題。當您重新加載頁面時，變量中將不再存在這些值。

重要的是要考慮保護您的密碼：

1. 當您將數據發送到服務器時，請確保您在https中，這樣您的password字段就不會被clear發送到服務器。
2. Hash 您在backend application中的密碼。因此，當您使用數據庫時，您不必為此擔心。

概括：

• 只要您的密碼暫時保存在本地 state 或變量中，就沒有安全問題，只要它不是持久存儲，其目標不是像localstorage 、 cookies等那樣永久存儲數據。它唯一能做到的保留該值，直到您發出 http 請求以將其發送到服務器
• 閱讀一點關於在客戶端服務器通信中with SSL/TLS的安全性

我希望它有所幫助。

注意：英語不是我的第一語言，所以我可能寫了一些錯誤