优雅实现输入框数据动态脱敏

前端

2024-02-15 05:22:48

前言

在当今信息化时代，数据安全和隐私保护至关重要。在许多情况下，我们需要在网站或应用程序上收集敏感信息，如电话号码、身份证号码等。为了保护这些信息不被泄露或滥用，有必要对其进行脱敏处理。

输入框数据动态脱敏是指在用户输入数据时实时对其进行处理，将敏感信息隐藏或替换成其他字符，从而防止未经授权的人员访问或查看。

前端实现

实现输入框数据动态脱敏有以下几种常见方法：

掩码输入

掩码输入是最简单的方法，它使用特定的字符（如星号或圆点）替换敏感字符。例如，可以将电话号码脱敏为 "**** -**** -**** "。

const input = document.getElementById("phone-number");

input.addEventListener("input", (event) => {
  const value = event.target.value;
  const maskedValue = value.replace(/\d/g, "*");
  input.value = maskedValue;
});

截断输入

截断输入会将敏感信息的末尾部分隐藏。例如，可以将身份证号码脱敏为 "**** **** **** 1234"。

const input = document.getElementById("id-number");

input.addEventListener("input", (event) => {
  const value = event.target.value;
  const truncatedValue = value.slice(0, -4) + "**** ";
  input.value = truncatedValue;
});

分段输入

分段输入将敏感信息分成多个部分，并分别进行脱敏。例如，可以将电话号码脱敏为 "**** **** " 或 "**** -**** "。

const input = document.getElementById("phone-number");

input.addEventListener("input", (event) => {
  const value = event.target.value;
  const splitValue = value.split("-");
  const maskedValue = splitValue[0] + " **** " + splitValue[1];
  input.value = maskedValue;
});