姓名脱敏必须在字符串插入dom前由js处理，否则原始姓名会短暂暴露于dom中，可被右键查看、爬虫抓取或控制台获取；推荐模式为api响应后立即脱敏数据源，或封装安全插入函数，确保原始字符串永不进入dom。
姓名脱敏不能靠 HTML 属性或标签本身实现，必须由 JS 在插入 DOM 前处理字符串 —— 否则原始姓名会短暂暴露、可被右键查看、爬虫抓取、控制台打印。
为什么 innerHTML 或 textContent 插入前不脱敏就危险
浏览器渲染是异步的，哪怕你用 document.getElementById('name').textContent = rawName，只要没在赋值前做处理，原始姓名就会进 DOM 树。用户 F12 查看元素、复制文本、甚至用 getComputedStyle 都可能拿到明文。
- 常见错误：先渲染完整姓名，再用
querySelectorAll('.name')遍历替换 —— 这会造成“闪现” - 更隐蔽的问题：Vue/React 中若把原始姓名直接绑定到模板（如
{{ user.name }}），且未在 computed 或 setup 里脱敏，同样泄露 - 服务端返回的 HTML 模板若含未脱敏姓名（如
<td>张三</td>），前端 JS 无法拦截已写入的 DOM
JS 姓名脱敏的两种可靠模式
核心原则：脱敏动作必须发生在字符串进入 DOM 的**上一刻**，且逻辑不可绕过。
-
模式一（推荐）：渲染前统一处理数据源
从 API 拿到响应后，立刻对字段做转换：user.name = desensitizeName(user.name)，再交给模板或innerHTML -
模式二：封装安全的插入函数
不直接用element.textContent，改用自定义函数：safeSetText(element, rawName)，内部调用desensitizeName()再赋值 - 避免在事件回调（如
click）里才脱敏 —— 用户可能已右键复制了
正则脱敏姓名的坑与适配要点
中文名、英文名、带空格/点/括号的混合名（如 “John Smith Jr.”、“张小明（实习生）”）要分开处理，不能只用 /./g。
- 中文名常用：保留首字，其余变星号 ——
name.replace(/(?，但注意 Unicode 多字节字符（如 emoji）会错位 - 英文名建议按单词切分：
name.split(' ').map(word => word[0] + '*'.repeat(Math.max(0, word.length - 1))).join(' ') - 若姓名字段可能为空、null 或数字（如 “123”），必须加守卫：
if (!name || typeof name !== 'string') return '' - 不要用
String.prototype.padEnd类方法模拟脱敏 —— 它不隐藏原字符，只是视觉遮盖
绝对不能依赖的“伪脱敏”方式
这些方法看起来像脱敏，实则毫无防护能力，仅适合内部低敏系统快速糊弄一下。
- CSS
text-security: disc或clip-path遮挡：右键“检查元素”立刻看到原文 - 用
input[type="password"]显示姓名：用户无法复制、粘贴、无障碍阅读，且 focus 后明文可见 - 靠禁用右键（
oncontextmenu）或禁用 F12：纯前端限制，完全无效 - 在 Vue 的
v-if切换显示/脱敏态：若初始v-if="showRaw"为 true，首次渲染仍是明文
真正安全的姓名脱敏，本质是「不让原始字符串进 DOM」。所有逻辑必须收口在数据流转链路的最上游 —— 服务端返回 JSON 时已脱敏最省心；若必须前端做，就卡死在 fetch → 处理 → 渲染 这个三步里，少一步都可能漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
