html5无内置dom节点加密机制，前端仅能对敏感信息做掩码、混淆或动态解密等轻量防护；须避免将明文存入dom属性或注释，敏感数据应暂存内存并严格管控访问，核心安全依赖服务端脱敏与https。
HTML5 本身不提供内置的 DOM 节点加密机制，所谓“加密 DOM 节点”实际是指在前端对敏感内容（如身份证号、手机号、邮箱、金额等）进行混淆、掩码或动态解密处理，防止被直接查看源码或通过 DevTools 窃取。真正的加密应在服务端完成，前端只能做轻量级防护，目标是提高信息获取门槛，而非替代 HTTPS 和后端安全策略。
敏感信息前端掩码显示（最常用且有效）
对用户可见但无需明文展示的字段，优先采用掩码方式（如 138****1234、zhang***@163.com），既保障可用性又降低泄露风险。
- JavaScript 中用正则或字符串截取实现，例如手机号：
"13812345678".replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") - 服务端返回数据时可直接返回掩码后字段（如
phone_masked），避免前端逻辑暴露规则 - 表单提交前需确保发送的是原始值（未掩码），可通过隐藏域或 JS 变量暂存
运行时动态解密 + 内存隔离
若必须在前端暂存明文（如编辑态临时缓存），可结合轻量加密（如 AES-CBC with Web Crypto API）+ 内存管理策略：
- 使用
window.crypto.subtle对敏感字段加密后存入内存变量（非 DOM 或 localStorage） - 仅在需要渲染/操作时解密，操作完成后立即
delete或置空引用 - 避免将解密结果赋值给全局对象、DOM dataset 或 input.value 长期持有
- 注意：密钥不可硬编码，建议由后端一次性下发短期有效的会话密钥
禁止敏感信息写入 DOM 属性与注释
开发者常误将数据塞进 data-* 属性、HTML 注释或自定义属性中，这些内容仍可被轻易读取：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误示例：
<div data-id="123" data-phone="13812345678"> 或 <code><!-- user: {phone: "138..."} --> - ✅ 正确做法：DOM 中只保留必要 ID 或索引；敏感数据存在 JS Map/Object 中并严格管控访问作用域
- 可配合
Object.freeze()和闭包封装，限制外部读写 - 接口按角色/场景返回脱敏字段（如管理后台返回全量，客户前台只返回掩码）
- 敏感字段启用「按需加载」：初始仅传标识符，用户触发操作（如点击「查看详情」）后再异步请求解密接口
- 配合 CSP（Content-Security-Policy）头限制内联脚本和 eval，防止 XSS 窃取内存中临时明文
服务端协同：最小化前端暴露面
前端加密是补充手段，根本在于服务端控制输出：
不复杂但容易忽略：DOM 本身不是存储介质，敏感信息不该以可检索、可遍历的形式存在于 HTML 结构中。把“防爬虫式查看”和“防 XSS 窃取”作为两个独立防线来设计，才能让前端防护真正起效。
