密码安全 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的安全性

我希望它有所帮助。

注意：英语不是我的第一语言，所以我可能写了一些错误