不能只靠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 必须作用于占位符容器

示例结构：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

<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 只是门把手，门后的锁、监控和日志，一个都不能少。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！