技术分享 / 客户 Demo 时，敏感数据防泄露的一种工程化方案

在做 SaaS 产品演示、客户 Demo、技术支持远程协助 的过程中，很多技术同学其实都踩过同一个坑：

Demo 很顺，数据也是真实的，
但一不小心，手机号、邮箱、身份证、内部账号就被录屏或投屏出去了。

这类问题的特点只有一句话：

不是不会做权限，而是演示时“根本来不及处理”。

---

一、真实系统演示，为什么是高风险场景？

如果你符合下面任意一条，那你就是典型的高风险用户：

• SaaS 后台字段多、页面复杂

• 控制台数据来自真实生产环境

• 页面有轮询、WebSocket、自动刷新

• 演示过程会被：

  • 录屏

  • 屏幕共享

  • 客户录制

  • 内部培训回放

一旦漏一个字段，就是实打实的数据泄露。

而且问题在于：

• ❌ 事后打码没用（直播 / 屏幕共享）

• ❌ 前端临时改代码不现实

• ❌ 截图工具只能处理“结果”，处理不了“过程”

---

二、我需要的不是“后期打码”，而是「演示前防护」

站在技术视角，真正可行的方案应该满足几个硬指标：

1. 直接作用在网页本身（DOM 级别）

2. 刷新后依然生效

3. 能应对复杂页面结构

4. 不影响原有系统逻辑

5. 最好能自动识别敏感信息

于是我最终选择了一个浏览器插件方案 —— BlurMate。

---

三、BlurMate 的定位：给真实系统演示加一层“安全罩”

BlurMate 是一款专注于网页敏感信息模糊处理的浏览器扩展。

它解决的不是“美化截图”，而是一个更偏工程的问题：

如何在不改代码、不改数据、不影响系统功能的前提下，保证演示过程绝对安全。

---

四、核心能力拆解（从技术角度看）

1️⃣ AI + 规则双引擎识别

这点是我觉得最符合工程直觉的设计：

• 规则层

  • 手机号 / 邮箱 / 身份证 / 银行卡

  • 正则可自定义

• AI 层

  • 自动识别：姓名、地址、单位、上下文敏感字段

  • 支持 DeepSeek / Kimi / ChatGPT / Gemini 等模型

👉 适合应对字段名不规范、语义型数据的后台系统。

---

2️⃣ 三种手动模糊模式，覆盖复杂 DOM 场景

对于 AI 或规则识别不到的部分，可以手动补刀：

• DOM 元素模式：直接点组件（表格 / 卡片 / 标签）

• 文本选择模式：选中局部文本模糊

• 区域选择模式：拖拽一个矩形区域

每一种都很“前端工程友好”，不是图片级打码，而是 真实 DOM 层操作。

---

3️⃣ 持久化是关键能力（不是锦上添花）

这是很多工具做不到、但演示场景必须要有的一点：

• 模糊状态 保存到本地

• 页面刷新 / 路由切换后 自动恢复

• 按 URL 维度 管理

• 支持：

  • 单个元素删除

  • 整站清空

  • 操作记录统计

对经常演示同一套后台的同学来说，一次配置，长期复用。

---

4️⃣ 演示安全细节做得很“工程化”

一些容易被忽略，但很重要的点：

• 页面早期加载即显示蒙版（防止首屏闪现）

• 不影响原网页交互与布局

• 支持撤销 / 重做（最近 10 次）

• 快捷键快速退出模糊模式

• 多语言支持（中 / 英 / 日 / 繁体）

---

五、适合哪些技术人群？

结合实际使用，我认为 BlurMate 非常适合下面这类人：

• 👨‍💻 程序员：技术分享 / 系统讲解 / 内部培训

• 🧑‍💼 产品经理：真实数据 Demo 给客户

• 🧑‍🔧 技术支持：远程协助、问题复现

• 🧑‍🏫 技术讲师 / 博主：录制课程、公开视频

一句话总结：

你演示的是“真实系统”，那你就必须假设“一定会被录下来”。

---

六、安装与下载

• 支持 Chrome 及所有 Chromium 内核浏览器

• 基于 Manifest V3

👉 下载地址
https://www.devstorex.top/account/downloads/8