MutationObserver在页面水印实现起到的作用详解


Posted in Javascript onJuly 07, 2022

背景

大家平时在开发中或者在面试中,难免都会遇到一个问题——给页面加水印,其实这并不难,但是也是有一些注意点的,所以说看似简单的功能,要尽力做到:

  • 1、严谨性
  • 2、安全性

实现水印

其实实现水印并不难,只需要利用自定义指令 + canvas + background-image即可,实现起来也非常方便:

import type { Directive, App } from 'vue'
interface Value {
  font?: string
  textColor?: string
  text?: string
}
const waterMarkId = 'waterMark'
const canvasId = 'can'
const drawWatermark = (el, value: Value) => {
  const {
    font = '16px Microsoft JhengHei',
    textColor = 'rgba(180, 180, 180, 0.3)',
    text = '三心大菜鸟',
  } = value
  // 创建一个canvas标签
  const canvas = document.getElementById(canvasId) as HTMLCanvasElement
  // 如果已有则不再创建
  const can = canvas || document.createElement('canvas')
  can.id = canvasId
  el.appendChild(can)
  // 设置宽高
  can.width = 400
  can.height = 200
  // 不可见
  can.style.display = 'none'
  const ctx = can.getContext('2d')!
  // 设置画布的样式
  ctx.rotate((-20 * Math.PI) / 180)
  ctx.font = font
  ctx.fillStyle = textColor
  ctx.textAlign = 'left'
  ctx.textBaseline = 'middle'
  ctx.fillText(text, can.width / 3, can.height / 2)
  // 水印容器
  const waterMaskDiv = document.createElement('div')
  waterMaskDiv.id = waterMarkId
  // 设置容器的属性样式
  // 将刚刚生成的canvas内容转成图片,并赋值给容器的 background-image 样式
  const styleStr = `
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: url(${can.toDataURL('image/png')})
  `
  waterMaskDiv.setAttribute('style', styleStr)
  // 将水印容器放到目标元素下
  el.appendChild(waterMaskDiv)
  return styleStr
}
const watermarkDirective: Directive = {
  mounted(el, { value }) {
    // 接收styleStr,后面可以用来对比
    el.waterMarkStylestr = drawWatermark(el, value)
  }
}

使用的时候直接以v-watermark来使用:

<div 
    v-watermark="
    { 
    text: '水印名称',
    textColor: 'rgba(180, 180, 180, 0.3)' 
    }
    "
  >

得到的效果如下:

MutationObserver在页面水印实现起到的作用详解

恶意修改

咱们完成了水印功能,但是咱们来想一想,水印有啥用?或者说我们为什么要给一个页面加水印呢?答案就是:防伪

是的,我们的水印是用来防伪的,但是像我们刚刚那么做真的能防伪吗?我们回忆一下我们刚刚的加水印思路:

  • 第一步:创建个canvas且画好水印
  • 第二步:创建个水印容器div标签
  • 第三步:将canvas画布转图片链接,赋值给div标签的background-image样式属性
  • 第四步:将水印容器div放到目标元素之下

看似完成了水印功能,但是其实破绽百出!!!比如:

  • 1、审查元素修改容器div的background-image属性为空

MutationObserver在页面水印实现起到的作用详解

  • 2、审查元素把容器div给删掉

MutationObserver在页面水印实现起到的作用详解

如果一切别有用心的人做了这两件事,这都会导致我们页面上刚刚所做的水印直接消失!!!

MutationObserver在页面水印实现起到的作用详解

所以咱们得监控这些人的恶意行为,那咋做呢?MutationObserver出场了!!!

MutationObserver

MutationObserver的具体用法大家可以去MDN上看,这里我就简言意骇地说一下他的作用:监控DOM元素的变化

是的,它的作用就是:监控DOM元素的变化,所以他能阻止那些恶意用户破坏水印,因为我们刚刚说了,恶意用户可以使用以下两种方法进行破坏水印:

  • 1、审查元素修改容器div的background-image属性为空
  • 2、审查元素把容器div给删掉

而这两点都涉及到DOM的修改,所以都会引起MutationObserver的监控触发,所以咱们可以利用MutationObserevr来监控。这里用到它的实例的两个方法:

  • observe:开启监控DOM变化
  • disconnect:停止监控DOM变化
const watermarkDirective: Directive = {
  mounted(el, { value }) {
    // 接收styleStr,后面可以用来对比
    el.waterMarkStylestr = drawWatermark(el, value)
    // 先定义一个MutationObserver
    el.observer = new MutationObserver(() => {
      const instance = document.getElementById(waterMarkId)
      const style = instance?.getAttribute('style')
      const { waterMarkStylestr } = el
      // 修改样式 || 删除div
      if ((instance && style !== waterMarkStylestr) || !instance) {
        if (instance) {
          // div还在,说明只是修改style
          instance.setAttribute('style', waterMarkStylestr)
        } else {
          // div不在,说明删除了div
          drawWatermark(el, value)
        }
      }
    })
    // 启动监控
    el.observer.observe(document.body, {
      childList: true,
      attributes: true,
      subtree: true,
    })
  },
  unmounted(el) {
    // 指定元素销毁时,记得停止监控
    el.observer.disconnect()
    el.observer = null
  },
}

现在,你修改style或者删除容器div,都会重新生成水印,这样恶意用户就无法得逞啦!!!当然可能还有漏洞,大家可以给给建议!!

以上就是MutationObserver在页面水印实现起到的作用详解的详细内容,更多关于MutationObserver页面水印的资料请关注三水点靠木其它相关文章!


Tags in this post...

Javascript 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
求解开jscript.encode代码的asp函数
Feb 28 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
JavaScript中的集合及效率
Jan 08 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
浅谈javascript错误处理
Aug 11 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
js作用域及作用域链工作引擎
Promise静态四兄弟实现示例详解
Jul 07 #Javascript
Three.js实现雪糕地球的使用示例详解
二维码条形码生成的JavaScript脚本库
Jul 07 #Javascript
JS实现简单的九宫格抽奖
JS实现九宫格拼图游戏
JavaScript实现九宫格拖拽效果
You might like
php邮件发送,php发送邮件的类
2011/03/24 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
php cli配置文件问题分析
2015/10/15 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
javascript+mapbar实现地图定位
2010/04/09 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
Python contextlib模块使用示例
2015/02/18 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Python语法分析之字符串格式化
2019/06/13 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
电子商务专业学生的自我鉴定
2013/11/28 职场文书
学生处主任岗位职责
2013/12/01 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
村委会贫困证明
2014/01/14 职场文书
工作睡觉检讨书
2014/02/25 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
死亡证明书样本说明
2014/10/18 职场文书
2014年档案室工作总结
2014/12/01 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
建党伟业观后感
2015/06/01 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
nginx请求限制配置方法
2021/07/09 Servers
sql注入教程之类型以及提交注入
2021/08/02 MySQL