认识
2024年06月18日
一、认识
明水印 是直接可见的水印，通常显示在图像的空白区域，且颜色和透明度都经过调整以确保其不会妨碍主体内容的查看。明水印常见于照片、视频和 PDF 文件中，用于明显的版权保护。
明水印 的生成方式主要可以归为两类，一种是纯 HTML 元素(纯div)，另一种则为背景图（canvas/svg）。
二、方案
2.1 Div
2.2 Svg
2.3 Canvas
三、破解
3.1 删除水印
对于有心之人来说，肯定会想着破解明水印，破解也很简单。打开了 Chrome Devtools 找到对应的元素，直接按 delete 即可删除。
3.2 禁止脚本
打开 Chrome Devtools，点击设置 - Debugger - Disabled JavaScript .
3.3 复制元素
复制一个 body 元素，然后将原来 body 元素的删除。
四、防御
4.1 监听水印
这样子的水印对于大概知道控制台操作的小白就可以轻松破解，那么有什么办法能防御住这样的操作呢？
答案是肯定的，JavaScript 中有一个方法叫做 MutationObserver，能够监控元素的改动。
MutationObserver 对现代浏览的兼容性还是不错的，MutationObserver是元素观察器，字面上就可以理解这是用来观察Node（节点）变化的。
因此，在这里我们主要观察的有三点:
-
水印元素本身是否被移除
-
水印元素属性是否被篡改（
display: none...） -
水印元素的子元素是否被移除和篡改 （
element生成的方式 ）
MutationObserver 主要是监听子元素的改动，因此我们的监听对象为 document.body, 一旦监听到我们的水印元素被删除，或者属性修改，我们就重新生成一个。通过以上示例，加上我们的思路，很快我们就写一个监听删除元素的示例。
function observeWatermark(params) {
const { waterWrapper } = params || {};
const config = { attributes: true, childList: true, subtree: true };
const callback = function (mutationsList) {
for (let mutation of mutationsList) {
switch (mutation.type) {
case "attributes":
if (mutation.target === waterWrapper) {
document.body.appendChild(waterWrapper);
return;
}
break;
case "childList":
mutation.removedNodes.forEach(function (item) {
if (item === waterWrapper) {
document.body.appendChild(waterWrapper);
return;
}
});
break;
}
}
};
const targetNode = document.body;
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
}
const waterWrapper = createWaterMark({
text: "柏拉文水印",
});
observeWatermark({ waterWrapper });