JavaScript奇技淫巧:隐形字符

JavaScript奇技淫巧：隐形字符

本文，分享一种很奇特的JS编程技巧，功能是：可以使字符串“隐形”、不可见！

效果展示

如下图所示，一个字符串经物别的操作之后，其长度有621字节，但内容却是“隐形”不可见的！

Visual Studio Code中运行：

浏览器中运行：

功能用途

这个技术可以应用到很多领域，非常具有实用性。

比如：代码加密、数据加密、文字隐藏、内容保密、隐形水印，等等。

原理介绍

实现字符串隐形，技术原理是“零宽字符”。

什么是“零宽字符”呢？

在Unicode编码中，有一类奇怪的字符格式，它们不可见、不可打印，主要用于调整字符的显示格式。

常见零宽字符类型：

空格符：格式为U+200B，用于较长字符的换行分隔；

非断空格符：格式为U+FEFF，用于阻止特定位置的换行分隔；

连字符：格式为U+200D，用于阿拉伯文与印度语系等文字中，使不会发生连字的字符间产生连字效果；

断字符：格式为U+200C，用于阿拉伯文、德文、印度语系等文字中，阻止会发生连字的字符间的连字效果；

左至右符：格式为U+200E，用于在混合文字方向的多种语言文本中，规定排版文字书写方向为左至右；

右至左符：格式为U+200F : 用于在混合文字方向的多种语言文本中，规定排版文字书写方向为右至左；

在编程实现隐形字符功能时，先将字符串转为二进制，再将二进制中的1转换为u200b；0转换为u200c；空格转换为u200d，最后使用ufeff 零宽度非断空格符作分隔符。这几种unicode字符都是不可见的，因此最终转化完成并组合后，就会形成一个全不可见的“隐形”字符串。

功能源码

function text_2_binary(text){

return ('').map(function(char){ return deAt(0).toString(2)}).join(' ');

}

function binary_2_hidden_text(binary){

return ('').map(function (binary_num){

var num = parseInt(binary_num, 10);

if (num === 1) {

return 'u200b';

} else if(num===0) {

return 'u200c';

}

return 'u200d';

}).join('ufeff')

}

var text = "jshaman是专业且强大的JS代码混淆加密工具";

var binary_text = text_2_binary(text);

var hidden_text = binary_2_hidden_text(binary_text);

("原始字符串：",text);

("二进制：",binary_text);

("隐藏字符：",hidden_text,"隐藏字符长度：",hidden_);

隐型还原

接下来介绍“隐形”后的内容如何还原。

在了解上文内容之后，知道了字符隐形的原理，再结合源代码可知：还原隐形内容，即进行逆操作：将隐形的unicode编码转化成二进制，再将二进制转成原本字符。

隐形和还原的完整源码：

//隐藏部分

function text_2_binary(text){

return ('').map(function(char){ return deAt(0).toString(2)}).join(' ');

}

function binary_2_hidden_text(binary){

return ('').map(function (binary_num){

var num = parseInt(binary_num, 10);

if (num === 1) {

return 'u200b';

} else if(num===0) {

return 'u200c';

}

return 'u200d';

}).join('ufeff')

}

var text = "jshaman是专业且强大的JS代码混淆加密工具";

var binary_text = text_2_binary(text);

var hidden_text = binary_2_hidden_text(binary_text);

("原始字符串：",text);

("二进制：",binary_text);

("隐藏字符：",hidden_text,"隐藏字符长度：",hidden_);

//还原部分

function hidden_text_2_binary(string){

return ('ufeff').map(function(char){

if (char === 'u200b') {

return '1';

} else if(char === 'u200c') {

return '0';

}

return ' ';

}).join('')

}

function binary_2_Text(binaryStr){

var text = ""

(' ').map(function(num){

text += arCode(parseInt(num, 2));

}).join('');

return ng();

}

("隐形字符转二进制：",hidden_text_2_binary(hidden_text));

("二进制转原始字符：",binary_2_Text(hidden_text_2_binary(hidden_text)));

运行效果

如果在代码中直接提供“隐形”字符内容，比如ajax通信时，将“隐形”字符由后端传给前端，并用以上解密方法还原，那么这种方式传递的内容会是非常隐秘的。

注：“隐形字符”技术，可用于前后端JS执行环境，即可在中执行，也可在浏览器中使用，如果用于前端，为了提升代码安全性，则可对JS代码先用JShaman进行混淆加密。