答案：前端数据脱敏通过隐藏敏感信息关键部分保护用户隐私，常见规则包括手机号（1388888）、身份证号（1101011234）、银行卡号（6222081234）、邮箱（z@example.com）和姓名（张）；推荐在服务端完成脱敏以防止接口泄露，前端结合JavaScript函数如maskPhone、maskIdCard进行格式化展示，并可通过CSS优化显示效果，确保安全与用户体验兼顾。
在前端展示数据时，直接暴露用户敏感信息（如身份证号、手机号、银行卡号等）存在严重的隐私泄露风险。因此，在HTML页面中对数据进行脱敏处理是保障用户隐私的重要手段。脱敏的核心思路是保留部分可见字符，隐藏关键信息，既满足业务展示需求，又降低数据泄露风险。
常见的敏感数据类型及脱敏规则
不同类型的敏感信息适用不同的脱敏策略：
- 手机号码：保留前3位和后4位，中间用星号代替，例如：138****8888
- 身份证号：保留前6位和后4位，中间用星号代替，例如：110101****1234
- 银行卡号：保留前6位和后4位，中间隐藏，例如：622208****1234
- 邮箱地址：隐藏用户名部分，例如：z***@example.com 或使用 ****@example.com
- 姓名：可隐藏姓氏或名字，例如：张* 或 *三
前端JavaScript实现脱敏逻辑
在HTML渲染数据前，通过JavaScript对原始数据进行格式化处理，是最常见且有效的方式。
示例代码：
立即学习“前端免费学习笔记（深入）”；
function maskPhone(phone) { return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); }function maskIdCard(id) { return id.replace(/(\d{6})\d{8}(\d{4})/, '$1****$2'); }
function maskEmail(email) { const [user, domain] = email.split('@'); if (user.length @' + domain; return user[0] + '@' + domain; }
在HTML模板中调用这些函数：
手机号：实际开发中建议结合模板引擎或框架（如Vue、React）的过滤器或计算属性统一处理。
服务端返回脱敏数据更安全
虽然前端可以做脱敏，但原始数据仍可能通过开发者工具或接口被获取。最安全的做法是在服务端完成脱敏，前端仅负责展示。
例如，后端API返回的数据已经是：
{ "phone": "138****5678", "idCard": "110101****5678", "name": "张*" }这样即使接口被调试，也不会暴露完整信息。敏感字段只在必要场景（如权限验证后）才提供明文数据。
CSS辅助脱敏显示效果
可通过CSS增强脱敏文本的视觉一致性：
.masked { letter-spacing: 1px; font-family: monospace; }让星号与数字宽度一致，提升可读性。
基本上就这些。关键是根据业务场景选择合适的脱敏规则，并优先在服务端处理，前端作为补充和展示层。安全与体验可以兼顾。
