JavaScript奇技淫巧:隐形字符

JavaScript奇技淫巧:隐形字符

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

效果展示

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

功能用途

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

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

原理介绍

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

什么是“零宽字符”呢?
在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 text.split('').map(function(char){ return char.charCodeAt(0).toString(2)}).join(' ');
}
function binary_2_hidden_text(binary){
    return binary.split('').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);
console.log("原始字符串:",text);
console.log("二进制:",binary_text);
console.log("隐藏字符:",hidden_text,"隐藏字符长度:",hidden_text.length);

隐型还原

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

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

直接给出源码:

function hidden_text_2_binary(string){
  return string.split('\ufeff').map(function(char){
    if (char === '\u200b') {
      return '1';
    } else if(char === '\u200c') {
      return '0';
    }
    return ' ';
  }).join('')
}
function binary_2_Text(binaryStr){
  var text = ""
  binaryStr.split(' ').map(function(num){
    text += String.fromCharCode(parseInt(num, 2));
  }).join('');
  return text.toString();
}
console.log("隐形字符转二进制:",hidden_text_2_binary(hidden_text));
console.log("二进制转原始字符:",binary_2_Text(hidden_text_2_binary(hidden_text)));

运行效果:

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

但还是存在一个安全问题:他人查看JS源码,能看到解密函数,这可能引起加密方法泄露、被人推导出加密、解密方法。

对此问题,可以采用JS代码混淆加密,进一步提升整体JS代码安全性。

JS代码加密

JShaman对上面两个解密函数进行代码混淆加密。

如下图,来到JShaman网站,贴入要加密的JS代码:

使用如下配置:

得到加密的JS代码:

将代码粘贴回源文件中:

加密的JS代码,运行起来跟之前完全一样。

但此时,已不再是裸露的透明JS代码,从这混乱复杂的代码中很难看出功能逻辑。

注:“隐形字符”技术,可用于前后端JS执行环境,即可在Node.JS中执行,也可在浏览器中使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值