182

需求

水印.png

  • 为了防止截图等安全问题,在web项目页面中生成一个平铺全屏的水印
  • 要求水印内容为用户名,水印节点用户不能通过开发者工具等删除

效果

  • 如上图
  • body节点下插入水印DOM节点,水印节点覆盖在页面最上层但不影响页面正常操作
  • 在通过js或者用户通过开发者工具删除或修改水印节点时自动复原

原理

  • 通过canvas画出节点需生成水印的文字生成base64图片
  • 生成该水印背景图的div节点插入到body下,通过jsMutationObserver方法监听节点变化,再自动重新生成

生成水印DOM节点

// 生成水印DOM节点    
init () {
      let canvas = document.createElement('canvas')
      canvas.id = 'canvas'
      canvas.width = '200' // 单个水印的宽高
      canvas.height = '130'
      this.maskDiv = document.createElement('div')
      let ctx = canvas.getContext('2d')
      ctx.font = 'normal 18px Microsoft Yahei' // 设置样式
      ctx.fillStyle = 'rgba(112, 113, 114, 0.1)' // 水印字体颜色
      ctx.rotate(30 * Math.PI / 180) // 水印偏转角度
      ctx.fillText(this.inputText, 30, 20)
      let src = canvas.toDataURL('image/png')
      this.maskDiv.style.position = 'fixed'
      this.maskDiv.style.zIndex = '9999'
      this.maskDiv.id = '_waterMark'
      this.maskDiv.style.top = '30px'
      this.maskDiv.style.left = '0'
      this.maskDiv.style.height = '100%'
      this.maskDiv.style.width = '100%'
      this.maskDiv.style.pointerEvents = 'none'
      this.maskDiv.style.backgroundImage = 'URL(' + src + ')'
      // 水印节点插到body下
      document.body.appendChild(this.maskDiv)
    },

监听DOM更改

// 监听更改,更改后执行callback回调函数,会得到一个相关信息的参数对象
    Monitor () {
      let body = document.getElementsByTagName('body')[0]
      let options = {
        childList: true,
        attributes: true,
        characterData: true,
        subtree: true,
        attributeOldValue: true,
        characterDataOldValue: true
      }
      let observer = new MutationObserver(this.callback)
      observer.observe(body, options) // 监听body节点
    },

使用

  • 直接引入项目任何组件中使用即可
  • 组件prop接收三个参数
  props: {
    // 显示的水印文本
    inputText: {
      type: String,
      default: 'waterMark水印'
    },
    // 是否允许通过js或开发者工具等途径修改水印DOM节点(水印的id,attribute属性,节点的删除)
    // true为允许,默认不允许
    inputAllowDele: {
      type: Boolean,
      default: false
    },
    // 是否在组件销毁时去除水印节点(前提是允许用户修改DOM,否则去除后会再次自动生成)
    // true会,默认不会
    inputDestroy: {
      type: Boolean,
      default: false
    }
  }
  • inputText(String):需要生成的水印文本,默认为'waterMark水印'
  • inputAllowDele(Boolean):是否需要允许用户删除水印DOM节点,true为允许,默认不允许
  • inputDestroy(Boolean):是否在组件销毁时去除水印节点,true会,默认不会,(只有在inputAllowDele为ftrue时才能生效)
  • 如果需要修改水印大小,文字,颜色等样式,可直接进入组件中按注释修改

小结

  • 工作写了个相关组件,复用率挺高就封装了下,没有经过严格测试,可当做参考使用,有需要的朋友欢迎下载源码使用相关GitHub代码
  • 当然在浏览器端无论怎样也不能完全防止用户的的行为,但也能满足多数需求场景

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

16 条评论
shenxiang11 · 2018年12月07日

要截图时,禁用js,删除dom,截图;
再启用js,使用网页,
真要防还是防不住啊。

+1 回复

0

哈哈,肯定的啊,怎么可能真的能防得住

代码宇宙 · 2018年12月07日
0

@shenxiang11 那没办法,把图截下来用ps把水印去了更管不着了,直接做一张一模一样的图都可以

小健 作者 · 2018年12月08日
KaKa · 2018年12月10日

防得住多数人,防不住所有人。

+1 回复

littlebear · 2018年12月11日

你这个还远远不够,水印这个项目我之前做过😆,迭代了好久

+1 回复

0

老哥,有源码,相关文章或遇到的坑什么的没😊

小健 作者 · 2018年12月11日
0

@小健 没文章,只是公司有这块需求之前我一直做这东西,源码应该是保密,毕竟太多内部细节监控。
如果用 body 直接 replace body,MutationObserver会失效。水印节点如果被移除,MutationObserver是监听不到的,需要另外设置监控。水印可以直接浏览器插件css设置display:none !important;控制隐藏,这个时候需要监控水印是否正常显示。图片平铺这种水印在打印预览的时候水印会失效,需要特殊控制打印层的水印样式。

littlebear · 2018年12月11日
0
  • body节点都被删除了页面空白那水印存不存在也无所谓了,所以MutationObserver监听是设在body节点上
  • 通过回调的参数对象判断是否移除或修改了水印节点,在节点中style设置内联样式是可以监听到,只是在id或class中修改属性不能监听到所以尽量不设id和class
  • 浏览器插件什么的不知道这也没办法控制
  • 水印就是一个自动生成的div节点,节点背景为一张水印图片打印预览是什么鬼
小健 作者 · 2018年12月12日
陈其文 · 2018年12月08日

css规则给你加个#_waterMark{display:none!important}

回复

0

@陈其文 css里没有_waterMark,只有id没给它添样式,开发者工具里可以添加css属性名么?

小健 作者 · 2018年12月08日
0

@小健 当然可以啊,控制台右上角那个加号就是

陈其文 · 2018年12月08日
suicca · 2018年12月12日

学习到了!
但是仅仅在网页上用样式控制水印很难不被破解.
页面关键部分(比如,所有的数据+水印)用canvas渲染下发至客户端应该是个比较可靠同时也不太现实的办法.

回复

suyd192 · 1月25日

赞~很好使用

回复

载入中...