前端截图身份溯源

最新推荐文章于 2024-04-14 22:13:18 发布

Peter 谭

最新推荐文章于 2024-04-14 22:13:18 发布

阅读量703

点赞数 1

文章标签： js css vue javascript html5

本文链接：https://blog.csdn.net/petertanjinjie/article/details/123887802

版权

本文探讨前端暗水印技术，用于保护敏感信息。通过介绍暗水印和明水印的区别，展示了暗水印如何在不影响用户体验的情况下，实现在截图中隐藏身份信息。文中提供了一个简单的暗水印实现示例，并警告读者不要随意截图敏感内容，因为可能存在的暗水印可以追溯身份。

摘要由CSDN通过智能技术生成

背景

大家好，我是Peter

今天在跟同事朋友聊这个脉脉上的一些事，我就突然想到之前很多人喜欢截图各种APP页面发一些比较敏感的内容出来，于是就写了这篇文章

开头

从今年看到这个新闻开始，我就开始警觉了。

先回到技术

前端有一种东西叫水印，特别当你浏览一些内部系统的时候，大部分都会有，例如现在的企业微信，担心你截图发出去内部的重要信息。

小伙伴们会发现，水印大部分都是我们使用者可以看见的，例如企业微信的，这种我们叫明水印

可是还有一种，叫暗水印。

什么叫暗水印？

就是你肉眼一眼看不到的水印，不影响你的浏览页面内容，无感知的把水印加进去。

这样一些敏感的内容，一旦泄露出去，就能通过网上的图片，解码找出来是谁的身份泄漏出去，而且往往一般的泄漏者不知道原来会有这个东西

所以有人会出现，截个图发给朋友，然后网上疯传，最后被定位到是他发的图片。这就是暗水印的一种使用

所以大家不要乱截图APP和各种页面，特别是比较敏感的内容

最简单的明水印实现

使用canvas生成，然后使用backgroud-repea至需要展示水印的区域～

function __canvasWM({
    container = document.body,
    width = '250px',
    height = '200px',
    textAlign = 'center',
    textBaseline = 'middle',
    font = '15px microsoft yahei',
    fillStyle = 'rgba(184, 184, 184, 0.8)',
    content = '请勿外传',
    rotate = '30',
}) {
    const canvas = document.createElement('canvas');

    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    const ctx = canvas.getContext('2d');
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;
    ctx.font = font;
    ctx.fillStyle = fillStyle;
    ctx.rotate((Math.PI / 180) * rotate);
    ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);
    const base =