登录别再用显性水印！前端零宽隐形水印，实现内容溯源级版权保护，已封装复制即用
在前端版权、数据防泄露这种场景，我目前一般都是采用显性水印的方案。
包括目前企业微信这种级别的App也是在用显性水印。
但是显性水印的问题在于：要么遮挡页面内容、破坏视觉体验，要么极易被PS去除。
零宽字符水印凭借肉眼完全不可见、复制粘贴不丢失的核心优势，完全解决了显性水印的痛点。
实现原理
零宽字符属于Unicode标准内的特殊控制字符，这类字符无视觉渲染、不占用页面宽度、不影响文本排版。
日常浏览、复制时完全无法察觉，但会被浏览器、编辑器、各类平台识别并保留。
-
U+200B（零宽空格）：用于指代二进制 0
-
U+200C（零宽不连字）：用于指代二进制 1
-
U+FEFF（零宽断行符）：作为水印前缀标记，提升解析准确率，避免误识别
基于这种特性，加密就是将用户ID进行二进制转换，插入到文本中。
解密就是在文本中识别出零宽字符，再还原为普通字符。
完整代码
简单封装了一个面向对象封装的零宽水印工具类，复制进生产环境可直接使用，支持文本加密、水印解密两大核心功能。
/**
* 零宽字符隐形水印工具类
* 核心功能：文本水印加密、隐形水印解密
* 适用场景：前端版权保护、内容溯源、防搬运追责
*/
class ZeroWidthWatermark {
static #ZERO_CHAR = '\u200B'; // 零宽空格 = 二进制0
static #ONE_CHAR = '\u200C'; // 零宽不连字 = 二进制1
static #WATERMARK_PREFIX = '\uFEFF'; // 水印前缀校验符
/**
* 加密：给文本添加隐形水印
* @param {string} text - 原始文本内容
* @param {string} watermark - 水印信息（用户ID、溯源标识等）
* @returns {string} 带隐形水印的文本
*/
static encrypt(text, watermark) {
if (!text || typeof text !== 'string' || !watermark) {
throw new Error('加密失败：文本与水印内容不可为空');
}
try {
const binaryWatermark = this.#textToBinary(watermark);
const zeroWidthStr = this.#binaryToZeroWidth(binaryWatermark);
const fullWatermark = this.#WATERMARK_PREFIX + zeroWidthStr;
return text[0] + fullWatermark + text.slice(1);
} catch (error) {
console.error('零宽水印加密异常：', error);
return text;
}
}
/**
* 解密：提取文本中的隐形水印
* @param {string} encryptedText - 带水印的文本
* @returns {string} 解析后的水印信息/状态提示
*/
static decrypt(encryptedText) {
if (!encryptedText || typeof encryptedText !== 'string') {
return '无水印';
}
try {
const zeroWidthChars = encryptedText.match(/[\u200B\u200C\uFEFF]/g) || [];
if (zeroWidthChars.length === 0) return '无水印';
const prefixIndex = zeroWidthChars.indexOf(this.#WATERMARK_PREFIX);
if (prefixIndex === -1) return '无水印';
const validChars = zeroWidthChars.slice(prefixIndex + 1);
const binaryStr = this.#zeroWidthToBinary(validChars);
if (!binaryStr || binaryStr.length % 8 !== 0) return '水印格式错误';
return this.#binaryToText(binaryStr);
} catch (error) {
console.error('零宽水印解密异常：', error);
return '解密失败';
}
}
/** 文本转8位二进制字符串 */
static #textToBinary(text) {
return Array.from(text)
.map(char => char.charCodeAt(0).toString(2).padStart(8, '0'))
.join('');
}
/** 二进制转零宽字符 */
static #binaryToZeroWidth(binary) {
return binary.split('').map(bit => bit === '0' ? this.#ZERO_CHAR : this.#ONE_CHAR).join('');
}
/** 零宽字符转二进制 */
static #zeroWidthToBinary(chars) {
return chars.map(char => char === this.#ZERO_CHAR ? '0' : '1').join('');
}
/** 二进制转普通文本 */
static #binaryToText(binary) {
return Array.from({ length: binary.length / 8 }, (_, i) => {
const byte = binary.slice(i * 8, (i + 1) * 8);
return String.fromCharCode(parseInt(byte, 2));
}).join('');
}
}
使用示例
// 加密：添加隐形溯源水印
const originalText = "李剑一原创技术文章，禁止未经授权搬运转载";
const watermarkInfo = "userID:10086|publishTime:20260326|from:李剑一";
const watermarkedText = ZeroWidthWatermark.encrypt(originalText, watermarkInfo);
// 解密：提取溯源信息
const result = ZeroWidthWatermark.decrypt(watermarkedText);
console.log('解析出水印信息：', result);
总结
零宽水印能够无侵入式版权保护，而且在前端层面上实现还是比较简单的。
但是需要明确：零宽水印无法直接阻止爬虫爬取内容，因为爬虫会直接抓取页面文本，连带零宽字符一同获取。
如果需要防爬，可将零宽水印与字体加密、接口签名、行为验证、IP限流等方案结合使用，兼顾防护与溯源。
