标签：受控元素 React 密码组件输入

你应该使用受控组件来处理 React 中的密码吗？

我最近正在为一个客户开发一个项目，其中包括身份验证和登录页面。当我去设置用户名和密码的文本输入时，弹出了一个我以前没有想到的问题。将受控组件用于具有某种密码的输入是否是一种良好的安全做法？

在深入探讨这个问题的答案之前，我们应该首先了解什么是受控组件以及输入的“密码”属性实际上如何影响屏幕上的输入文本以及存储在 DOM 中的数据。

什么是受控组件？

对于传统输入，输入的值存储为元素的属性。为了访问这些值，我们必须使用 JavaScript 挂钩到元素中，否则等待表单提交才能访问这些值。

React 通过使用受控组件提供了一种处理输入值的新方法。我们不是让输入元素控制它们的状态，而是混合使用状态变量和 onChange 钩子来将输入值的所有权从输入元素转移到 React 组件。

我们在下图中使用该模式：

Figure 1. Basic password input managed by React controlled components.

这里我们设置了一个 useState 挂钩来存储和更新密码的值。我们将输入的值设置为密码变量，并设置一个 onChange 事件处理程序，以在每次输入更改时更新密码变量的值。这形成了一个循环过程，其中用户与 input 元素交互，这会触发 onChange 调用，该调用更新密码变量，

这样做的好处是可以更集中、更直接地访问这些输入值，因为它们存储在组件的状态中，但是提出了一个问题，这种状态的集中化和对 React 组件的输入的责任延迟是否会使我们的输入值面临更大的风险。

输入类型密码的幕后发生了什么？

默认情况下，输入 HTML 元素具有一种文本类型。这意味着任何放置在 HTML 文件中而不指定类型的标签将默认为纯文本。当然，我们可能希望向用户询问许多不同类型的数据，并且我们希望避免为每种类型的数据重写验证和元素功能。正是由于这种需要，HTML 添加了输入类型，包括密码、电子邮件和电话等等。

这些不同的类型提供了默认文本类型所不具备的表面级验证或额外功能。当我们想要帮助隐藏用户的密码不被窥探时，我们可以创建一个带有密码类型的输入标签。使用此属性，输入到输入中的所有字符都将显示为统一的点，而不是特定的字符。

我们可以在下面的代码片段中看到实际情况：

Figure 2. Comparison of text and password input elements.

这对于防止物理上靠近您的其他人看到您屏幕上的字符非常有用，但是它如何影响存储在 DOM 中的内容呢？要回答这个问题，我们需要研究 value 属性。除了 type 属性，输入 HTML 标记还有 value 属性。这可以预设，但是一旦用户与输入交互，此 value 属性将存储结果值。

虽然我们的密码值可能看起来像屏幕上的点，但在 DOM 中它看起来像这样：

Figure 3. Example of password showed in plain text in input’s value attribute.

在这里，我们看到输入属性的值是我们的密码，“password1”。密码类型输入提供的点和安全性仅扩展到屏幕上的视觉效果，并不保护存储在 DOM 中的密码。换句话说，任何输入值对于有权访问 DOM 的人来说都是完全可见的，无论它们在 UI 中如何显示。

我们应该让我们的密码输入成为一个受控组件吗？

我们已经讨论了受控组件是什么以及它们是如何使用的，以及查看了不同的输入元素类型，特别是密码类型。对于我们是否应该在 React 中使用受控组件来管理密码的问题，答案是肯定的。虽然具有密码类型的输入元素会掩盖物理用户看到屏幕上的内容，但它不会改变 DOM 中值的可见性。

受控组件不会使情况变得更糟，因为它们所做的只是将密码状态的控制从输入元素本身转移到 JSX 元素中的状态变量。正因为如此，您应该感觉很好地采用传统输入的方法来获取和提交密码，或有状态的组件来处理密码状态。无论哪种方式都有效并且具有相同的安全性。

标签：受控,元素,React,密码,组件,输入
From： https://www.cnblogs.com/amboke/p/16654771.html