React中password类型输入框的值在开发者工具可见，如何隐藏？

1. 该明文展示属于正常现象 #

这是浏览器开发者工具的固有特性：Elements面板会实时展示DOM节点的所有当前属性，type="password"仅控制用户输入时页面上显示为圆点遮挡，不会限制开发者工具读取DOM的value属性值。
需要特别注意：这个明文只有当前打开自己浏览器开发者工具的用户才能看到，既不会上传到服务器，也不会被其他第三方获取，普通用户正常访问网页时完全不会遇到这个问题，不存在额外的安全隐患。

2. 无法完全隐藏该值，仅可通过方案规避展示 #

没有原生的方案能让绑定了实时value的input元素不在Elements面板展示明文，如果你确实有规避需求，可选择以下两种折中方案：

• 改用非受控组件，不把input的value绑定到React状态，仅在需要读取密码时通过ref主动获取DOM的value，此时Elements面板的value属性不会随用户输入实时更新，不会直接展示明文
• 自定义封装密码输入组件，将真实密码存在内存变量中，input的value始终渲染为圆点占位符，同时手动兼容输入、删除、光标移动、输入法等逻辑，不过该方案实现成本极高，兼容性问题多，绝大多数场景下完全不需要使用

3. 不需要盲目更换为非受控组件，按需选择即可 #

• 如果你有实时校验密码的需求（比如实时校验密码长度、字符规则、两次输入密码是否一致等），优先保留受控组件即可，前面提到的开发者工具明文展示没有实际安全风险，完全不影响正常使用
• 如果你不需要实时监听密码输入内容，仅在表单提交时才需要获取密码值，且非常在意Elements面板的明文展示，可以更换为非受控组件，参考写法如下：

// 声明ref
const passwordRef = useRef(null);

// 组件内使用
<input
  type="password"
  id="password"
  ref={passwordRef}
/>

// 提交表单时取值
const handleSubmit = () => {
  const password = passwordRef.current.value;
  // 后续提交逻辑
}

内容的提问来源于stack exchange，提问作者Kerchik