前端页面水印实现与防篡改方案#

1
class SecureWatermark {
2
  constructor(options = {}) {
3
    this.options = {
4
      text: '机密文档',
5
      fontSize: 16,
6
      color: 'rgba(0, 0, 0, 0.15)',
7
      width: 200,
8
      height: 150,
9
      rotate: -20,
10
      zIndex: 9999,
11
      ...options
12
    };
13

14
    this.shadowHost = null;
15
    this.shadowRoot = null;
16
    this.observer = null;
17

18
    this.init();
19
  }
20

21
  createWatermarkImage() {
22
    const { text, fontSize, color, width, height, rotate } = this.options;
23

24
    const canvas = document.createElement('canvas');
25
    canvas.width = width;
26
    canvas.height = height;
27

28
    const ctx = canvas.getContext('2d');
29
    ctx.translate(width / 2, height / 2);
30
    ctx.rotate((Math.PI / 180) * rotate);
31
    ctx.translate(-width / 2, -height / 2);
32
    ctx.font = `${fontSize}px Microsoft YaHei`;
33
    ctx.fillStyle = color;
34
    ctx.textAlign = 'center';
35
    ctx.textBaseline = 'middle';
36
    ctx.fillText(text, width / 2, height / 2);
37

38
    return canvas.toDataURL();
39
  }
40

41
  init() {
42
    // 创建 Shadow Host
43
    this.shadowHost = document.createElement('div');
44
    this.shadowHost.style.cssText = `
45
      position: fixed;
46
      top: 0;
47
      left: 0;
48
      width: 100%;
49
      height: 100%;
50
      pointer-events: none;
51
      z-index: ${this.options.zIndex};
52
    `;
53

54
    // 创建 Shadow Root（closed 模式，外部无法访问）
55
    this.shadowRoot = this.shadowHost.attachShadow({ mode: 'closed' });
56

57
    // 创建水印元素
58
    const watermarkDiv = document.createElement('div');
59
    const imageUrl = this.createWatermarkImage();
60

61
    watermarkDiv.style.cssText = `
62
      width: 100%;
63
      height: 100%;
64
      background-image: url(${imageUrl});
65
      background-repeat: repeat;
66
    `;
67

68
    this.shadowRoot.appendChild(watermarkDiv);
69
    document.body.appendChild(this.shadowHost);
70

71
    // 启动防篡改
72
    this.protect();
73
  }
74

75
  protect() {
76
    // 1. 监听 shadowHost 被删除
77
    const observer = new MutationObserver((mutations) => {
78
      mutations.forEach((mutation) => {
79
        mutation.removedNodes.forEach((node) => {
80
          if (node === this.shadowHost) {
81
            console.warn('Watermark host removed! Restoring...');
82
            setTimeout(() => this.init(), 0);
83
          }
84
        });
85
      });
86
    });
87

88
    observer.observe(document.body, {
89
      childList: true
90
    });
91

92
    // 2. 监听样式修改
93
    const styleObserver = new MutationObserver(() => {
94
      this.checkStyle();
95
    });
96

97
    styleObserver.observe(this.shadowHost, {
98
      attributes: true,
99
      attributeFilter: ['style']
100
    });
101

102
    // 3. 定时检测
103
    this.intervalId = setInterval(() => {
104
      if (!document.body.contains(this.shadowHost)) {
105
        this.init();
106
      }
107
      this.checkStyle();
108
    }, 2000);
109

110
    // 4. 冻结对象，防止属性被修改
111
    Object.freeze(this.shadowHost.style);
112

113
    this.observer = observer;
114
    this.styleObserver = styleObserver;
115
  }
116

117
  checkStyle() {
118
    const computedStyle = window.getComputedStyle(this.shadowHost);
119

120
    // 检测关键样式是否被修改
121
    if (
122
      computedStyle.display === 'none' ||
123
      computedStyle.visibility === 'hidden' ||
124
      computedStyle.opacity === '0' ||
125
      parseInt(computedStyle.zIndex) < this.options.zIndex
126
    ) {
127
      console.warn('Watermark style tampered! Restoring...');
128
      this.restore();
129
    }
130
  }
131

132
  restore() {
133
    this.remove();
134
    setTimeout(() => this.init(), 0);
135
  }
136

137
  remove() {
138
    if (this.intervalId) {
139
      clearInterval(this.intervalId);
140
    }
141

142
    if (this.observer) {
143
      this.observer.disconnect();
144
    }
145

146
    if (this.styleObserver) {
147
      this.styleObserver.disconnect();
148
    }
149

150
    if (this.shadowHost && this.shadowHost.parentNode) {
151
      this.shadowHost.parentNode.removeChild(this.shadowHost);
152
    }
153
  }
154
}

1
class MultiLayerWatermark {
2
  constructor(options = {}) {
3
    this.options = {
4
      text: '机密文档',
5
      layers: 3,  // 多层水印
6
      ...options
7
    };
8

9
    this.watermarks = [];
10
    this.init();
11
  }
12

13
  init() {
14
    // 创建多层水印
15
    for (let i = 0; i < this.options.layers; i++) {
16
      const watermark = new SecureWatermark({
17
        ...this.options,
18
        zIndex: 9999 + i,
19
        // 每层稍微偏移
20
        width: 200 + i * 10,
21
        height: 150 + i * 10,
22
        rotate: -20 + i * 2
23
      });
24

25
      this.watermarks.push(watermark);
26
    }
27

28
    // 随机插入干扰水印
29
    this.insertDecoyWatermarks();
30
  }
31

32
  // 插入诱饵水印（让攻击者以为删除了真实水印）
33
  insertDecoyWatermarks() {
34
    for (let i = 0; i < 2; i++) {
35
      const decoy = document.createElement('div');
36
      decoy.setAttribute('data-watermark', 'decoy');
37
      decoy.style.cssText = `
38
        position: fixed;
39
        top: 0;
40
        left: 0;
41
        width: 100%;
42
        height: 100%;
43
        z-index: 1;
44
        pointer-events: none;
45
        opacity: 0;
46
      `;
47
      document.body.appendChild(decoy);
48
    }
49
  }
50

51
  remove() {
52
    this.watermarks.forEach(wm => wm.remove());
53
    this.watermarks = [];
54
  }
55
}

1
class UltimateWatermark {
2
  constructor(options = {}) {
3
    this.options = {
4
      text: '机密文档',
5
      extraText: '',  // 额外信息（用户名、时间等）
6
      ...options
7
    };
8

9
    this.init();
10
  }
11

12
  init() {
13
    // 获取用户信息作为水印
14
    const userInfo = this.getUserInfo();
15
    const text = `${this.options.text}\n${userInfo}`;
16

17
    // 1. 主水印（Shadow DOM）
18
    this.mainWatermark = new SecureWatermark({
19
      ...this.options,
20
      text
21
    });
22

23
    // 2. 备份水印层
24
    this.backupWatermark = new SecureWatermark({
25
      ...this.options,
26
      text,
27
      zIndex: 10000,
28
      color: 'rgba(0, 0, 0, 0.08)'
29
    });
30

31
    // 3. 防止 CSS 注入
32
    this.protectAgainstCSS();
33

34
    // 4. 防止 DevTools 删除
35
    this.protectAgainstDevTools();
36

37
    // 5. 页面可见性检测
38
    this.detectVisibility();
39
  }
40

41
  getUserInfo() {
42
    const date = new Date().toLocaleString();
43
    const userId = this.options.extraText || 'User123';
44
    return `${userId} - ${date}`;
45
  }
46

47
  // 防止 CSS 注入覆盖水印
48
  protectAgainstCSS() {
49
    // 添加 !important 样式
50
    const style = document.createElement('style');
51
    style.innerHTML = `
52
      [data-watermark="true"] {
53
        pointer-events: none !important;
54
        opacity: 1 !important;
55
        display: block !important;
56
        visibility: visible !important;
57
      }
58
    `;
59
    document.head.appendChild(style);
60

61
    // 冻结 style 标签
62
    Object.freeze(style);
63
  }
64

65
  // 检测 DevTools 打开（简单检测）
66
  protectAgainstDevTools() {
67
    // 检测窗口大小变化（DevTools 打开会改变）
68
    let devtoolsOpen = false;
69
    const threshold = 160;
70

71
    setInterval(() => {
72
      const widthThreshold = window.outerWidth - window.innerWidth > threshold;
73
      const heightThreshold = window.outerHeight - window.innerHeight > threshold;
74

75
      if (widthThreshold || heightThreshold) {
76
        if (!devtoolsOpen) {
77
          devtoolsOpen = true;
78
          console.warn('DevTools detected!');
79
          // 可以发送日志到服务器
80
          this.reportTampering('devtools_detected');
81
        }
82
      } else {
83
        devtoolsOpen = false;
84
      }
85
    }, 1000);
86
  }
87

88
  // 页面可见性检测
89
  detectVisibility() {
90
    document.addEventListener('visibilitychange', () => {
91
      if (document.visibilityState === 'visible') {
92
        // 页面重新可见时，检查水印是否被破坏
93
        setTimeout(() => {
94
          this.checkIntegrity();
95
        }, 100);
96
      }
97
    });
98
  }
99

100
  // 检查完整性
101
  checkIntegrity() {
102
    // 检查主水印和备份水印是否存在
103
    const watermarks = document.querySelectorAll('[data-watermark="true"]');
104
    if (watermarks.length < 2) {
105
      console.warn('Watermark integrity compromised!');
106
      this.reportTampering('integrity_check_failed');
107
      this.restore();
108
    }
109
  }
110

111
  restore() {
112
    this.mainWatermark.restore();
113
    this.backupWatermark.restore();
114
  }
115

116
  // 上报篡改行为
117
  reportTampering(reason) {
118
    // 发送到服务器记录
119
    fetch('/api/security/watermark-tamper', {
120
      method: 'POST',
121
      headers: { 'Content-Type': 'application/json' },
122
      body: JSON.stringify({
123
        reason,
124
        timestamp: Date.now(),
125
        userAgent: navigator.userAgent,
126
        url: location.href
127
      })
128
    }).catch(() => {});
129
  }
130

131
  remove() {
132
    this.mainWatermark?.remove();
133
    this.backupWatermark?.remove();
134
  }
135
}