保护数字资产：在线Office明水印实现方案与OnlyOffice适配实践

水印技术在信息安全和版权保护等领域有着广泛的应用对防止信息泄露或知识产品被侵犯有重要意义。在 Web 应用中前端水印是一种常见的安全措施用于保护内容的版权和防止非法复制。根据可见性可分为可见水印明水印和不可见水印暗水印。基本概念明水印通过在文本或图像上覆盖另一层图像或文字来实现的。这种水印会明显地出现在页面上可以用来显示版权信息或其他相关信息。暗水印在文本或图像中隐藏相关信息的一种技术。这种水印不会直接出现在页面上只有在特殊的程序或工具下才能被检测到。暗水印通常用于保护敏感信息以及追踪网页内容的来源和版本。实现方式前端实现方式1、htmlcss 直接覆盖在正文上【优点】实现最简单基本不侵入业务代码【缺点】容易被删除2、svg 或 canvas 绘制为图片使用 div 容器覆盖在正文上【优点】效果有保证基本不侵入业务代码【缺点】同样容易被删除3、正文使用 canvas 绘制水印是正文的一部分【优点】效果好有一定自我保护效果【缺点】实现复杂侵入业务代码前两者需要做容器或水印内容的防删除或属性修改保护水印层第三种一定程度上增大了难度无法直接删除水印会同时删除正文保护手段1、防调试禁止打开开发人员工具这个可以阻止一下初级用户2、MutationObserver 防止修改 dom目前看效果相对较好但也不是绝对可以与上一条结合使用鉴于暗水印使用的场景较少本文结合实际的产品来介绍明水印的实现方案。基于OnlyOffice的水印实现目前被很多团队使用的OnlyOffice因为没有实现明水印最近经常接到这类用户的咨询。借此介绍下我们团队的实现方案(开箱即用 文曲Office )大概的思路如下1、根据文本内容、字体、字号、颜色、间距、旋转角度等参数计算并绘制一个单一的 svg 元素2、用这个 svg 转换为 base64 格式的图片防止直接修改内容等3、在页面正文区域遮盖一个容器将这张图片放到这个容器内使用背景平铺方式将水印充满容器4、将水印容器做事件穿透防止阻碍正文区鼠标事件响应5、对这个水印容器做防调试保护防护的手段需要多条并用但前端水印总归是无法做到 100% 可靠的我们只能最大限度做保护。部分场景还可以做前后结合在正文内容中添加水印。具体效果如下图相关资源OnlyOffice最新版本镜像https://onlyoffice.moqisoft.com/docs/install/docker中国版本介绍https://onlyoffice.moqisoft.com/docs/product/summary技术交流183026419https://qm.qq.com/q/uMwFyL5Wn0