不能只靠details隐藏敏感信息，因其仅控制显隐而不遮蔽内容，DOM中明文仍可被源码查看、爬虫抓取、屏幕阅读器读取；需结合CSS遮罩与JS动态解密实现真马赛克。
直接用 details 标签无法实现“马赛克”效果——它只控制显隐，不处理内容遮蔽。所谓“敏感信息马赛克”，本质是两层需求：一是折叠控制（details 擅长），二是视觉遮盖（需额外 CSS/JS 配合）。强行只靠 details 会暴露原文，存在安全风险。
为什么不能只靠 details 隐藏敏感信息
details 的展开/收起只是切换 display 或可见性，内部 HTML 文本仍完整存在于 DOM 中。查看源码、用 DevTools 选中元素、甚至屏幕阅读器都能直接读取——这和“马赛克”（即视觉模糊+语义屏蔽）完全不是一回事。
- 用户右键「查看网页源代码」就能看到所有敏感字段
- 爬虫、无障碍工具、打印样式表均不受
details状态影响 - 即使加了
opacity: 0或visibility: hidden，内容依然可被复制、聚焦、检索
真正安全的马赛克折叠组合方案
必须分两步：先用 details 控制交互区域，再用 CSS + 局部 JS 对敏感内容做动态遮罩。核心是让“马赛克态”成为默认，且展开后仍需防误操作。
- 默认状态下，敏感字段用
•••或 SVG 模糊层覆盖，不渲染明文 - 点击展开时，JS 动态插入解密后的内容（或从加密字段还原），并立即聚焦到该区域
- 收起时，清空明文节点，恢复占位符，避免缓存残留
- 禁止用户选中马赛克文本：
user-select: none必须作用于占位符容器
示例结构：
立即学习“前端免费学习笔记（深入）”；
<details> <summary>查看身份证号</summary> <div class="sensitive-mask">••••••••••••</div> <div class="sensitive-reveal" aria-hidden="true"></div> </details>
对应 JS 要监听 toggle 事件，而非 click，确保键盘操作（空格/回车）同样触发解密逻辑。
容易被忽略的合规与体验坑点
很多团队以为加个 details 就算“做了遮蔽”，实际在 GDPR、等保或金融类项目中会被直接打回。
-
details[open]状态可能被 URL hash（如#section1）或 history API 意外触发，导致敏感内容在未授权页面加载时就展开 - 不要把明文存在
data-*属性里——DOM 属性对 JS 和 DevTools 完全透明 - 若敏感信息来自后端，务必服务端渲染时就做初始马赛克，前端只负责解密展示，避免中间人截获
- 收起后记得调用
el.blur()，防止键盘焦点停留在已销毁的明文节点上，引发读屏器误读
真正的马赛克不是“看不见”，而是“没机会看见”。details 只是门把手，门后的锁、监控和日志，一个都不能少。
