實現頁面水印，到底跟MutationObserver有什麼關係？

Sunshine_Lin發表於2022-02-21
Server

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心

背景

大家平時在開發中或者在面試中，難免都會遇到一個問題——給頁面加水印，其實這並不難，但是也是有一些注意點的，所以說看似簡單的功能，要盡力做到：

  • 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)' 
    }
    "
  >

得到的效果如下：

惡意修改

我們們完成了水印功能，但是我們們來想一想，水印有啥用？或者說我們為什麼要給一個頁面加水印呢？答案就是：防偽

是的，我們的水印是用來防偽的，但是像我們剛剛那麼做真的能防偽嗎？我們回憶一下我們剛剛的加水印思路：

  • 第一步 ：建立個canvas且畫好水印
  • 第二步 ：建立個水印容器div標籤
  • 第三步 ：將canvas畫布轉圖片連結，賦值給div標籤的background-image樣式屬性
  • 第四步 ：將水印容器div放到目標元素之下

看似完成了水印功能，但是其實破綻百出！！！比如：

  • 1、審查元素修改容器div的background-image屬性為空

  • 2、審查元素把容器div給刪掉

如果一切別有用心的人做了這兩件事，這都會導致我們頁面上剛剛所做的水印直接消失！！！

所以我們們得監控這些人的惡意行為，那咋做呢？ MutationObserver 出場了！！！

MutationObserver

MutationObserver 的具體用法大家可以去 CDN 上看，這裡我就簡言意駭地說一下他的作用：監控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 ，都會重新生成水印，這樣惡意使用者就無法得逞啦！！！當然可能還有漏洞，大家可以給給建議！！

結語

我是林三心，一個熱心的前端菜鳥程式設計師。如果你上進，喜歡前端，想學習前端，那我們們可以交朋友，一起摸魚哈哈，摸魚群，加我請備註【思否】

image.png

相關文章