dom中隐藏敏感业务中间变量的核心是避免明文写入可读dom节点，应使用不可逆脱敏id（如"x9k2nq7r"）替代原始值，并仅存于内存map中；禁用注释、title、内联事件等易泄露载体。
在 DOM 树中隐藏敏感的业务中间变量，本质不是“加密存储”，而是**避免将原始敏感值以明文形式写入或保留在可被脚本、调试工具或网络面板直接读取的 DOM 节点中**。数据脱敏技术在此场景下要解决的是：前端渲染时需展示部分信息（如用于界面识别），但又不能暴露真实中间变量（如用户 ID、订单 token、会话密钥、内部状态码等），同时防止通过 DOM 检查、console 输出或事件监听意外泄露。
明确哪些变量属于“业务中间变量”
这类变量通常不面向用户，但被前端逻辑依赖，例如：
- 后端返回的
userId或sessionId，仅用于后续 API 请求签名，无需显示 - 订单处理中的临时凭证
payToken或traceId - 权限判断用的内部角色标识
internalRole: "ADMIN-PROD-OPS" - 调试用的原始响应字段
rawDataHash、backendTimestampMs
不在 DOM 中写入原始值，改用脱敏占位符
不要把中间变量直接塞进 data- 属性、textContent 或注释节点。应统一走脱敏映射：
- 对每个中间变量生成一个不可逆、无规律、长度固定的脱敏 ID（如 8 位 Base32 编码），例如
payToken→"X9K2NQ7R" - 只将该脱敏 ID 写入 DOM，例如：
<div data-pay-token="X9K2NQ7R"></div> - 原始值仅保留在内存 Map 中（带 TTL 清理），且不挂载到
window或全局对象上 - DOM 中完全不出现原始字符串、数字或 JSON 片段
禁用 DOM 中的可执行/可提取载体
以下方式看似隐蔽，实则极易泄露，应规避：
- ❌ 不用 HTML 注释存值：
<!-- userId=12345678 -->—— 开发者工具一眼可见 - ❌ 不用
title或aria-label存敏感内容 —— 鼠标悬停即暴露，无障碍工具也会读出 - ❌ 不用内联
onclick="doAction('realToken123')"—— 字符串字面量会被 AST 解析或 DevTools 捕获 - ✅ 推荐：所有敏感中间变量由 JS 模块私有变量管理，DOM 只承载语义化结构和脱敏标识
配合 DOMParser + 安全序列化做动态隔离
若必须从服务端注入中间变量（如 SSR 场景），可用 DOMParser 在内存中解析 HTML，清洗掉所有含敏感关键词的属性后再挂载：
- 服务端返回带标记的模板：
<div data-internal-user-id="u_8a7f2e1b">...</div> - 前端用
new DOMParser().parseFromString(html, 'text/html')解析为纯净 DOM 树 - 遍历节点，删除所有含
data-internal-、data-secret-等前缀的属性 - 用
XMLSerializer序列化回安全 HTML，再插入页面 —— 原始敏感属性已彻底消失
关键不在“怎么藏”，而在“根本不让它进 DOM”。脱敏在这里是预防性设计，目标是让开发者审查 DOM 时，既看不到原始值，也猜不出映射关系，更无法通过静态分析还原。不复杂但容易忽略。
