数字水印技术在信息安全和版权保护等领域有着非常广泛的应用，对保护知识产权及防止敏感信息泄露等有重要意义。在网页这个重要的信息载体上，各类水印也有着广阔的施展空间。
根据可见性，网页水印可以分为可见水印和不可见水印（盲水印），本系列文章将分别予以介绍，带你探秘前端水印技术。
我们先从可见水印说起。
“最简单“的水印
一种比较常见的简单水印场景是给文章、表格加上 logo 水印，用以申明版权。
这里想要的效果就是一个浅浅的 logo 平铺展示。实现起来也比较简单，只需制作一个半透明的 logo 图片，设为文章或者表格的背景图片即可。仅需一行 CSS 声明。
background-image:url("./logo.png");
实现图片平铺关键的 CSS 属性是 background-repeat，值为 repeat 时是平铺，这也是它的默认值，所以可以省略。
全页面水印
照葫芦画瓢，如果要给整个 Web 页面加上水印，是不是给页面的 body 元素设置背景图片平铺展示就可以了呢？
然而通常并不会这么处理，因为文章和表格内容多以文本为主，不会明显遮挡水印，而一个完整的页面往往还包含很多其他页面元素，比如图片、视频、控件等等，它们很可能会遮挡住背景图片，从而影响水印效果。
所以，为了避免被其他元素遮挡，针对页面的水印一般会使用一个层级比较高且覆盖整个页面的元素来承载。
div.watermark{
position: fixed;
left:0;
top:0;
width: 100vw;
height: 100vh;
background-image:url("./logo.png");
opacity: .5;
z-index: 3000;
}
这样一来，其他元素就遮挡不住水印了。不过，这个 div 反过来可能会遮挡页面其他元素，影响页面元素操作。还需要一条关键的 CSS 声明来破解这个问题 :
pointer-events: none;
这个 CSS 声明会使该元素“可穿透”，“看得见、摸不着”，不再影响页面操作。
动态水印
很多时候，给页面加水印的目的并不是申明版权，而是为了支持溯源。此时水印的内容并不会只是一个 logo，通常会包含用户信息，比如用户名、UID、手机号等等。
这就意味着，每个用户的水印内容是不同的，无法通过提前准备好一张图片来满足了。这种场景往往需要根据用户信息动态生成图片。
我们来看下几种主流的动态生成水印图片的方式：
服务端方案
传统的方式是在服务端生成图片。页面上发起的图片请求中可以附带用户信息，服务端根据这些参数动态生成图片，并将图片数据作为该请求的响应返给页面，页面拿到后将其用作水印。
这种方式的优点是兼容性好，缺点是需要前后端配合，增加了页面请求和服务端资源开销，防攻击能力也较差。
Canvas 方案
HTML5 引入 Canvas 特性使得浏览器自身具备了绘图能力。经过多年的发展，主流浏览器基本都已可以提供良好的支持。通过 Canvas 可以轻松绘制图片，并可将图片数据导出，用于页面图片或背景。
const canvasElement = document.createElement('canvas');
const context = canvasElement.getContext('2d');
canvasElement.width = 200;
canvasElement.height = 200;
context.rotate((-30 * Math.PI) / 180);
context.font = '400 26px Arial';
context.fillStyle = '#B9C0CA';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('水印文字', 70, 130);
const watermark = canvasElement.toDataURL('image/png');
通过上述示例代码可拿到水印图片的 data URI 数据，用作水印承载元素的背景图片平铺展示即可。
这种方式不需要服务端配合，在前端就可以完成，且有助于减少请求和服务端资源开销。曾经面临的浏览器兼容问题现在也不再是问题，该方案已逐渐流行起来。
SVG 方案
对于纯文字的水印来说，有没有办法不生成图片而直接实现平铺呢？
动态创建大量 DOM 节点，通过 CSS 控制排列当然可以实现，但是繁琐且性能差，优雅更无从谈起。
不妨换个角度思考，有没有办法让文字不转成图片就可以用作 background-image 属性的值呢？这样就可以利用 background-repeat 实现平铺效果了。
这时候可以考虑使用 SVG，因为 SVG 具有文本和图像的双重特性。看上去是文本，然而在很多场景可以当做图片使用。
我们可以通过 SVG 的相关属性精准控制字体位置、大小、颜色、透明度和旋转角度等参数。如：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><text x="50%" y="50%" font-size="30" fill="#a2a9b6" fill-opacity="0.3" font-family="system-ui, sans-serif" text-anchor="middle" dominant-baseline="middle" transform='rotate(-45, 100 100)'>水印文字</text></svg>
考虑到浏览器兼容问题，用作背景图片时，建议将
SVG编码为Base64（或转义特定字符）:
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1zaXplPSIzMCIgZmlsbD0iI2EyYTliNiIgZmlsbC1vcGFjaXR5PSIwLjMiIGZvbnQtZmFtaWx5PSJzeXN0ZW0tdWksIHNhbnMtc2VyaWYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRyYW5zZm9ybT0ncm90YXRlKC00NSwgMTAwIDEwMCknPuawtOWNsOaWh+WtlzwvdGV4dD48L3N2Zz4=");
水印安全
水印是用来保护信息安全的。信息要安全，首先要确保水印自身的安全，提高水印的防攻击（篡改、删除等）能力。
可见水印大都是基于 DOM 的，找到这个 DOM 节点，通过浏览器插件、抓包工具等在页面上注入一段 JavaScript 或者 CSS 代码对其进行篡改或删除并不困难。
防止外部代码篡改，一种思路是把水印元素封装起来，与外部环境进行隔离。
Shadow DOM
在 Chrome 逐步统治浏览器江湖之后，谷歌正野心勃勃的推广 Web Components 技术。该技术允许在 Web 中创建可重用的小部件或组件。组件化开发在前端业界已经流行相当长一段时间了，这主要得益于前端三大框架的推崇，但具体组件标准是由框架各自制定的，而 Web Components 可理解为 Web 标准化的组件。
Web Components 的一个重要特性就是“封装”，即可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离。比如我们熟悉的 video 元素，它的进度条、按钮等控件都已被封装。
Shadow DOM 接口是“封装”特性的关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上。
为了提高 web 水印的隐蔽性，同时避免受外部代码影响，从而在一定程度上防止篡改，可以考虑把水印元素放在 Shadow DOM 中。
来看下 Shadow DOM 的基本用法。使用 Element.attachShadow() 方法来将一个 shadow root 附加到任何一个元素上。它接受一个配置对象作为参数，该对象有一个 mode 属性，值可以是 open 或者 closed 。open 表示可以通过页面内的 JavaScript 方法来获取 Shadow DOM。而 closed 则表示不可以从外部获取 Shadow DOM 。
Element.attachShadow({mode: 'closed'});
样式怎么隔离呢？Shadow DOM 中的样式本身就是隔离的，除非主动使用 CSS 变量、part 属性等暴露，外部样式是不会影响到组件内的。
Mutation Observer
Shadow DOM 提高了水印的隐蔽性，同时可以防止外部代码修改。除此之外，还有一种常见的攻击场景——人为修改，比如在浏览器控制台直接修改或删除对应的 DOM 元素。
可以考虑“监听”这种行为，一旦发生就马上修复，比如重新插入一个。那怎么实现这种“监听”呢？现代浏览器中有多种观察者（Observer），比如IntersectionObserver、PerformanceObserver、ResizeObserver、ReportingObserver、MutationObserver 等。其中，MutationObserver 就可以用来监听 DOM 变动，DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，通过该 API 都可以得到通知。
所以可以使用 MutationObserver API 来监听水印元素 DOM 变化，一旦监听到 DOM 元素被修改或者删除，就立即重新插入一个。
好了，关于可见水印先介绍到这里，下一篇将向大家介绍不可见水印（盲水印）→【传送门】。
