Web前端脱敏处理完整指南：场景、方法与最佳实践

最新推荐文章于 2026-06-21 10:17:05 发布

原创最新推荐文章于 2026-06-21 10:17:05 发布 · 447 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端

在Web前端实际项目中，脱敏处理通常分为展示层脱敏和上传前预处理两大类。由于前端环境完全暴露在用户端，任何脱敏操作都应视为体验优化或临时隐私保护，真正的安全脱敏必须在后端完成。以下汇总了常见的前端脱敏场景、方法及注意事项。

一、文本数据脱敏

1. 手机号 / 固定电话

场景：用户列表、订单详情、聊天记录展示。

方法：保留前3位和后4位，中间用****代替。

function maskMobile(phone) {
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}

扩展：固定电话可保留区号，后几位掩码。

2. 身份证号码

场景：身份认证记录、个人信息展示。
方法：保留前6位和后4位（或前1位和后1位，取决于需求），中间用********代替。
```
function maskIdCard(id) {
  return id.replace(/^(.{6})(?:\d+)(.{4})$/, '$1********$2');
}
```

3. 银行卡号

场景：支付记录、绑卡列表。

方法：只显示后4位，前面用**** **** ****掩码。

function maskBankCard(card) {
  return '**** **** **** ' + card.slice(-4);
}

4. 姓名

场景：评论、用户资料展示。

方法：汉字通常保留姓氏，名字用*代替（如张*、李**）。复姓可保留前两个字。

function maskName(name) {
  if (name.length === 2) return name[0] + '*';
  return name[0] + '*'.repeat(name.length - 2) + name.slice(-1);
}

5. 邮箱地址

场景：用户信息展示。

方法：隐藏@之前的部分字符，如tes***@example.com。

function maskEmail(email) {
  const [local, domain] = email.split('@');
  if (local.length <= 2) return email; // 太短不掩码
  const maskedLocal = local.slice(0, 2) + '*'.repeat(local.length - 2);
  return maskedLocal + '@' + domain;
}

6. 地址

场景：订单收货信息展示。

方法：仅显示到省市，详细街道用***代替，或只显示前几个字。

function maskAddress(addr) {
  // 简单示例：截断前10个字符，后面用***代替
  return addr.length > 10 ? addr.slice(0, 10) + '***' : addr;
}

二、图片脱敏

1. 身份证照片（头像、姓名、地址等区域）

场景：用户上传身份证预览、证件审核页面（仅用于展示，不保存）。
方法：
- Canvas马赛克：绘制图像到Canvas，通过getImageData修改像素块，再putImageData回Canvas。
- Canvas模糊：使用CSS或Canvas的filter属性（如ctx.filter = 'blur(5px)'）模糊特定区域，但CSS滤镜可被移除，Canvas渲染后不可逆。
- 覆盖遮挡层：在图片上方绝对定位一个半透明黑色方块或马赛克图案（纯UI遮挡，原图仍在，不安全）。
注意事项：
- 跨域图片需设置crossOrigin及服务器CORS。
- 马赛克算法应基于像素块，避免遍历性能问题（使用getImageData后批量修改）。
- 若需保存脱敏图片，必须由后端处理。

2. 人脸照片

场景：用户头像、监控截图展示。
方法：
- Canvas模糊/马赛克：类似身份证处理。
- CSS滤镜：filter: blur(5px) 或 filter: brightness(0) invert(1) 等，但易被开发者工具移除，仅适用于临时遮挡。
- 图像裁剪：只显示非敏感区域（如头像只显示眼部以下）。

3. 文档/合同截图

场景：合同预览、发票展示。
方法：
- Canvas像素替换：对敏感文字区域进行模糊或涂抹。
- 覆盖白色矩形：在文字上方绘制白色矩形（不可逆，但渲染后无法恢复）。

三、结构化数据脱敏

1. JSON 数据展示（调试、日志）

场景：前端控制台打印接口返回数据，避免敏感字段泄露。

方法：使用JSON.stringify的replacer函数，或递归遍历对象替换指定字段。

function maskSensitiveData(obj) {
  const sensitiveKeys = ['idCard', 'phone', 'password'];
  return JSON.parse(JSON.stringify(obj, (key, value) => {
    if (sensitiveKeys.includes(key) && typeof value === 'string') {
      return '******';
    }
    return value;
  }));
}