你不知道的信息隐藏术-零宽字符的应用-逐梦个人博客

关于信息隐藏，我们在前面的文章中分别介绍了如何利用最低有效位算法隐藏图片和文本《js图片隐写-找出图片中隐藏的漂亮小姐姐》《js图片隐写-图片中还能藏文章？？？》并介绍了如何使用数据拼接的方式将任意文件隐藏到另一个文件中《图片隐写术-藏在图片中的小视频》，本文将介绍另一种很特别的信息隐藏方式，在开始之前，我们先看一个神奇的现象：

"123"就3个字符，但是打印出来的长度却为10，其中隐藏了7个不可见的字符，而这就是我们本文要讲述的主题：零宽字符。

一、什么是零宽字符

零宽度字符是一种不可见，不可打印的字符。它们主要用于调整字符的显示格式。

常见的零宽字符有：

中文名	英文名	Unicode	作用
零宽度空格符	zero-width space	U+200B	用于较长单词的换行分隔。
零宽度断字符	zero-width non-joiner	U+200C	用于阿拉伯文、德文、印度语系等文字中，阻止会发生连字的字符间的连字效果。
零宽度连字符	zero-width joiner	U+200D	用于阿拉伯文与印度语系等文字中，使不会发生连字的字符间产生连字效果。
左至右符	left-to-right mark	U+200E	用于在混合文字方向的多种语言文本中（例：混合左至右书写的英语与右至左书写的希伯来语），规定排版文字书写方向为左至右。
右至左符	right-to-left mark	U+200F	用于在混合文字方向的多种语言文本中，规定排版文字书写方向为右至左。
零宽度非断空格符	zero width no-break space	U+FEFF	用于阻止特定位置的换行分隔。

二、如何使用零宽字符进行信息加密

通过零宽字符来加密文本，我们需要先将文本转成二进制的形式即只包含0和1，并使用空格将每个字符隔开，然后任选3个零宽字符分别用来表示“0”，“1”，“空格”，然后将所有的字符连接起来即可完成信息加密，在得到加密字符串后，我们还可以选择将其隐藏于正常的字符串中，最终的代码实现如下：

const encCharactors = ['\u200b', '\u200c', '\u200d'];

function encode(hiddenTxt = '', normalTxt = '') {
    const encodeTxt = hiddenTxt
        .split('')
        .map(char => char.charCodeAt(0).toString(2))
        .join(' ')
        .split('')
        .map(binary => {
            switch (binary) {
                case '0':
                    return encCharactors[0];
                case '1':
                    return encCharactors[1];
                default:
                    return encCharactors[2];
            }
        })
        .join('');
    if (normalTxt.length) {
        return `${normalTxt[0]}${encodeTxt}${normalTxt.slice(1)}`;
    }
    return encodeTxt;
}

其中encCharactors数组定义的每一项分别用于替换“0”，“1”，“空格”，这个可以自己的需求选择任意的零宽字符，使用方式如下：

encode('I love you!', '你好呀');

在上面的代码中，我们将“I love you”隐藏到“你好呀”中，最终只显示“你‌‌‌‌‌‍‌‌‌‌‌‌‌‍‌‌‌‌‌‌‌好呀”。

三、解析加密文本中的字符

对于加密文本的解析我们只需要反向执行加密的步骤即可，最终的实现代码如下：

function decode(txt) {
    return txt.replace(/[^\u200b-\u200f\ufeff\u202a-\u202e]/g, '')
        .split('')
        .map(char => {
            switch (char) {
                case encCharactors[0]:
                    return '0';
                case encCharactors[1]:
                    return '1';
                default:
                    return ' ';
            }
        })
        .join('')
        .split(' ')
        .map(binary => String.fromCharCode(parseInt(binary, 2)))
        .join('');
}

在函数的开始我们使用正则/[^\u200b-\u200f\ufeff\u202a-\u202e]/g过滤了所有的非零宽字符，然后再执行解密步骤，使用方式如下：

decode('你‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌好呀');

四、零宽字符的应用

版权保护：将使用零宽度字符加密的文本插入到文章中，当别人非法复制我们的文章时，我们可以解密其中隐藏的版权信息来保护合法权益。

数据防爬：将零宽度字符插入文本中,干扰关键字匹配，爬虫获取的带零宽度字符的数据会影响它对数据的分析，但不影响用户阅读数据。

私密传递：将使用零宽度字符加密的文本插入到文本中，复制并通过微信等社交工具发送给对方，对方只有通过专用程序解密文本才能提取其中的信息，达到私密传递的效果。

在线demo：https://demo.deanhan.cn/zero-width/

如需下载本文涉及的源码及素材包，请在关注本站公众号后发送：zerowidth

系列文章导航：

第1节： js图片隐写-找出图片中隐藏的漂亮小姐姐

第2节： js图片隐写-图片中还能藏文章？？？

第3节： js图片隐写-藏在图片中的小视频

第5节：隐写术应用-从图片还原画板