核心痛点：纯前端水印无法绝对防破解，但可通过组合技术大幅增加破解成本！

// 创建动态水印层（混淆选择器+随机位置）const createWatermark = () => { const wm = document.createElement('div'); // 随机生成类名（规避通配选择器） const randomId = 'wm_' + Math.random().toString(36).slice(2, 8); wm.className = randomId; // 水印内容（含用户信息） wm.innerHTML = `© ${user.name} · ${new Date().toLocaleDateString()}`; // 随机位置偏移（破坏自动化脚本） wm.style.left = `${Math.random() * 20}%`; wm.style.top = `${Math.random() * 15}vh`; // 核心样式 Object.assign(wm.style, { position: 'fixed', pointerEvents: 'none', opacity: '0.5', transform: `rotate(${Math.random() * 15 - 7.5}deg)`, zIndex: '2147483647' // 最大z-index值 }); document.body.appendChild(wm); return wm;};

防护原理：

// MutationObServer监听水印移除const initWatermarkGuard = () => { const wm = createWatermark(); const observer = new MutationObserver((mutations) => { let watermarkRemoved = false; mutations.forEach(mutation => { if (mutation.removedNodes) { Array.from(mutation.removedNodes).forEach(node => { if (node === wm || node.contains?.(wm)) { watermarkRemoved = true; } }); } }); if (watermarkRemoved) { console.warn("水印被移除，正在重生..."); document.body.removeEventListener('DOMNodeRemoved', handleRemove); observer.disconnect(); createWatermark(); initWatermarkGuard(); // 重新绑定监听 } }); // 深度监听整个body observer.observe(document.body, { childList: true, subtree: true, attributes: false, characterData: false }); // 备份监听：处理iframe等特殊情况 const handleRemove = (e) => { if (e.target === wm) { document.body.appendChild(wm.cloneNode(true)); } }; document.body.addEventListener('DOMNodeRemoved', handleRemove);};

防护原理：

// Canvas内容融合水印（关键数据防篡改）const drawProtectedCanvas = (canvas) => { const ctx = canvas.getContext('2d'); const img = new Image(); img.onload = () => { ctx.drawImage(img, 0, 0); // 半透明水印覆盖 ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.font = 'bold 24px sans-serif'; ctx.fillText('@' + user.id, canvas.width/2, canvas.height-30); // 隐形水印（像素级操作） const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); encodeWatermark(imageData.data, user.id); // 自定义编码函数 ctx.putImageData(imageData, 0, 0); }; img.src = '/sensitive-image.jpg';};// 隐形水印编码function encodeWatermark(pixels, userId) { // LSB最低有效位隐写术 for (let i = 0; i < pixels.length; i += 4) { if (i % 16 === 0) { const charCode = userId.charCodeAt(Math.floor(i/16) % userId.length); const bit = (charCode >> Math.floor(i/16)%8) & 1; pixels[i] = (pixels[i] & 0xFE) | bit; } }}

防护原理：

// DevTools开启检测（现代浏览器适配）setInterval(() => { const devtools = { open: false, orientation: null }; const threshold = 160; // 屏幕高度阈值 const widthThreshold = window.outerWidth - window.innerWidth > threshold; const heightThreshold = window.outerHeight - window.innerHeight > threshold; const orientation = widthThreshold ? 'vertical' : 'horizontal'; if ( !devtools.open && (heightThreshold || widthThreshold) && devtools.orientation !== orientation ) { devtools.open = true; devtools.orientation = orientation; // 开发者工具打开时自动刷新 window.location.reload(); }}, 1000);

防护原理：

// 基于SVG的矢量水印（PDF导出保留）const svgWM = ` `;const svgURL = `data:image/svg+xml,${encodeURIComponent(svgWM)}`;document.body.style.backgroundImage = `url("${svgURL}")`;

// WebGL着色器注入水印（逐帧渲染）const fragmentShader = ` varying vec2 vUv; uniform sampler2D videoTexture; void main() { vec4 color = texture2D(videoTexture, vUv); vec2 center = vec2(0.5, 0.85); float dist = distance(vUv, center); if (dist < 0.2) { color.rgb = mix(color.rgb, vec3(1.0), 0.5); color.r = mod(color.r + 0.5, 1.0); // 添加颜色偏移 } gl_FragColor = color; }`;

// 敏感操作时强化水印function protectSensitiveAction() { createWatermark(); document.body.classList.add('watermark-intensify'); setTimeout(() => document.body.classList.remove('watermark-intensify'), 5000 );}

服务端协同验证

// 关键接口添加数字水印fetch('/api/export', { headers: { 'X-Content-Signature': btoa(`${user.id}|${window.location.host}|${Date.now()}`) }})

环境自销毁机制

// 检测常见破解环境特征const isTampered = window.__watermarkGuard !== true || navigator.webdriver === true;if (isTampered) { document.body.innerHTML = '

安全警告：非法环境访问

// 水印渲染性能优化requestAnimationFrame(() => { const wm = createWatermark(); setTimeout(() => wm.style.transition = 'opacity 0.3s', 100);});

用户体验保障

到此这篇关于前端实现网页水印防移除的实战方案的文章就介绍到这了,更多相关前端网页水印防移除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

上一篇：使用Vue  Tippyjs打造高定制浮层提示组件

下一篇：JavaScript obfuscator 让你的代码看起来