反解水印之道高一尺魔高一丈

玉
284 阅读7分钟

引言

      说明：本文主要用来说明原来，进一步促进水印的技术，保护版权

      前端水印是前端开发中的一种常见技术，用于在网页或应用的界面上添加特定的文字、图案或标识，以达到版权保护、信息标注或品牌宣传等目的。水印可以分为明水印和暗水印两种类型。

1. 明水印

明水印是通过在文本或图像上覆盖另一层图像或文字来实现的。这种水印会明显地出现在页面上，用户可以直接看到。明水印的主要特点包括：

  • 可见性：水印内容清晰可见，通常具有一定的透明度，以避免遮挡页面上的重要信息。
  • 多样性：水印可以是文字、图片、图标等多种形式，内容可以是版权信息、作者标识、品牌logo等。
  • 灵活性：水印的位置、大小、颜色、透明度等属性可以根据需要进行调整，以适应不同的页面布局和设计风格。

2. 暗水印

暗水印是指在文本或图像中隐藏相关信息的一种技术。这种水印不会直接出现在页面上，而是嵌入到原始数据中，只有在特定的程序或工具下才能被检测到。暗水印的主要特点包括：

  • 隐蔽性：水印信息隐藏于原始数据中，人眼无法直接察觉，对页面视觉效果无影响。
  • 安全性：暗水印难以被篡改或删除，能够有效保护版权和敏感信息。
  • 技术性：暗水印的嵌入和提取需要特定的算法和技术支持，对开发者的技术要求较高。

3. 实现方式

前端水印的实现方式多种多样，以下是一些常见的实现方法：

  • CSS实现：通过CSS样式设置水印的样式（如透明度、位置等），并将水印内容添加到页面元素中。这种方法简单易行，但容易被用户通过修改CSS样式表来去除水印。
  • Canvas实现：使用HTML5的Canvas元素绘制水印，并将绘制好的Canvas元素作为页面的背景或覆盖层。这种方法可以实现复杂的水印效果，且难以被用户去除。
  • SVG实现：与Canvas类似，SVG也可以用来绘制水印。SVG具有矢量图形的特点，可以保证水印在缩放或旋转后的清晰度。
  • JavaScript动态生成：通过JavaScript动态生成水印的HTML或CSS代码，并将其添加到页面中。这种方法可以根据用户的操作或页面状态动态调整水印的显示。

4. 注意事项

  • 避免影响用户体验：水印的添加应避免遮挡页面上的重要信息或影响用户的正常操作。
  • 考虑兼容性：不同的浏览器和设备对CSS、Canvas和SVG的支持程度可能不同，因此在水印实现时需要考虑兼容性问题。
  • 保护版权：水印的主要目的是保护版权和敏感信息，因此在添加水印时需要确保水印内容清晰、明确且难以被篡改或删除。

综上所述，前端水印是一种重要的前端开发技术，可以用于版权保护、信息标注或品牌宣传等目的。在实现时需要根据具体需求选择合适的方法，并注意避免影响用户体验和保护版权。

水印生成

userSelect

userSelect 是一个 CSS 属性，它用于控制用户是否能够选择文本。这个属性对于提高用户体验和防止用户复制页面上的文本内容非常有用。userSelect 属性可以应用于几乎所有的 HTML 元素，以控制该元素及其子元素的文本选择行为。

userSelect 属性有几个可能的值：

  1. auto：这是默认值，表示元素的文本选择行为将遵循浏览器的默认行为。通常，这意味着用户可以选择文本。

  2. none：这个值会阻止用户选择文本。这在防止用户复制受版权保护的文本、游戏或应用中的用户界面元素时特别有用。

  3. text：这个值明确允许用户选择文本，尽管在大多数情况下，这与 auto 值的效果相同，因为它不会改变浏览器的默认行为。

  4. contain：这个值允许用户选择文本，但选择仅限于元素的内部。如果用户尝试拖动选择框超出元素的边界，选择将停止。这可以用于在需要时限制文本选择范围。

  5. all：这个值（在大多数浏览器中不被支持）理论上应该允许选择元素内的所有内容，包括通常不可选择的元素（如按钮和链接），但在实际使用中，它的效果可能与 auto 或 text 相似，因为浏览器出于安全和用户体验的考虑，限制了可选择的元素类型。

请注意，userSelect 属性的支持情况在不同浏览器中可能有所不同，但现代浏览器大多都支持这个属性。然而，为了确保最大的兼容性，你可能需要使用浏览器前缀（如 -moz-user-select、-webkit-user-select）或者通过 JavaScript 来实现相似的功能

.no-select {  
    -webkit-user-select: none; /* Chrome, Safari, Opera */  
    -moz-user-select: none;    /* Firefox */  
    -ms-user-select: none;     /* IE 10 and IE 11 */  
    user-select: none;         /* Standard syntax */  
}

背景图canvas

在HTML5的<canvas>元素上实现水印效果，通常涉及到在canvas上绘制背景图（可能是图片）并在其上叠加文字或图片作为水印。这里，我将给出一个基本的示例，说明如何在canvas上绘制一个背景图片，并在其上添加文字水印。

// watermark.js  
window.onload = function() {  
    var canvas = document.getElementById('watermarkCanvas');  
    var ctx = canvas.getContext('2d');  
  
    // 加载背景图片  
    var backgroundImage = new Image();  
    backgroundImage.onload = function() {  
        // 绘制背景图片  
        ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);  
  
        // 添加水印文字  
        ctx.font = '20px Arial';  
        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'; // 半透明白色  
        ctx.textAlign = 'center';  
        ctx.textBaseline = 'middle';  
  
        // 在画布中心添加水印  
        var text = '水印文字';  
        var textWidth = ctx.measureText(text).width;  
        ctx.fillText(text, canvas.width / 2 - textWidth / 2, canvas.height / 2);  
    };  
    backgroundImage.src = 'your-background-image.jpg'; // 替换为你的图片URL  
};

破解

明水印的破解一

以上就很快实现了水印的几种方案。但是对于有心之人来说，肯定会想着破解，以上破解也很简单。 找到对应的元素，直接按 delete 即可删除。

明水印的防御

这样子的水印对于大概知道控制台操作的小白就可以轻松破解，那么有什么办法能防御住这样的操作呢？答案是肯定的，js 有一个方法叫做MutationObserver，能够监控元素的改动。

MutationObserver 对现代浏览的兼容性还是不错的，MutationObserver是元素观察器，字面上就可以理解这是用来观察Node（节点）变化的。MutationObserver是在DOM4规范中定义的，它的前身是MutationEvent事件，最低支持版本为 ie9 ，目前已经被弃用。

  • 水印元素本身是否被移除

  • 水印元素属性是否被篡改（display: none …）

  • 水印元素的子元素是否被移除和篡改 （element生成的方式 ）

明水印的破解二

方案一：打开Chrome Devtools点击设置 - Debugger - Disabled JavaScript .

方案2：复制一个 body 元素，然后将原来 body 元素的删除。

参考：blog.csdn.net/2401\_84091…

avatar
文章
阅读
粉丝