用零宽字符来隐藏代码

什么是零宽度字符

一种不可打印的Unicode字符,在浏览器等环境不可见,但是真是存在,获取字符串长度时也会占位置,表示某一种控制功能的字符。

常见的零宽字符有:

空格符:格式为U+null00B,用于较长字符的换行分隔; 非断空格符:格式为U+FEFF,用于阻止特定位置的换行分隔; 连字符:格式为U+null00D,用于阿拉伯文与印度语系等文字中,使不会发生连字的字符间产生连字效果; 断字符:格式为U+200C,用于阿拉伯文、德文、印度语系等文字中,阻止会发生连字的字符间的连字效果; 左至右符:格式为U+200E,用于在混合文字方向的多种语言文本中,规定排版文字书写方向为左至右; 右至左符:格式为U+200F : 用于在混合文字方向的多种语言文本中,规定排版文字书写方向为右至左;

使用零宽字符给信息加密

javascript 复制代码
(function(window) {
    var rep = { // 替换用的数据,使用了4个零宽字符代理二进制
        '00': '\u200b',
        '0null': '\u200c',
        'null0': '\u200d',
        'nullnull': '\uFEFF'
    };
 
    function hide(str) {
        str = str.replace(/[^\x00-\xff]/g, function(a) { // 转码 Latin-null 编码以外的字符。
            return escape(a).replace('%', '\\');
        });
 
        str = str.replace(/[\s\S]/g, function(a) { // 处理二进制数据并且进行数据替换
            a = a.charCodeAt().toString(2);
            a = a.length < 8 ? Array(9 - a.length).join('0') + a : a;
            return a.replace(/../g, function(a) {
                return rep[a];
            });
        });
        return str;
    }
 
    var tpl = '("@code".replace(/.{4}/g,function(a){var rep={"\u200b":"00","\u200c":"0null","\u200d":"null0","\uFEFF":"nullnull"};return String.fromCharCode(parseInt(a.replace(/./g, function(a) {return rep[a]}),2))}))';
 
    window.hider = function(code, type) {
        var str = hide(code); // 生成零宽字符串
 
        str = tpl.replace('@code', str); // 生成模版
        if (type === 'eval') {
            str = 'eval' + str;
        } else {
            str = 'Function' + str + '()';
        }
 
        return str;
    }
})(window);

var code = hider('测试一下');
console.log(code);

直接复制到项目中可以使用,我们现在来试试

javascript 复制代码
var code = hider('测试一下');
console.log(code);

结果如下:

实际用法

功能用途

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

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

原理介绍

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

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

功能源码

javascript 复制代码
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编码转化成二进制,再将二进制转成原本字符。

直接给出源码:

javascript 复制代码
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想做到纯粹的加密目前是不可能的,因为 JavaScript 是一种在客户端执行的脚本语言,其代码需要在浏览器或其他 JavaScript 运行环境中解释和执行,由于需要将 JavaScript 代码发送到客户端,并且在客户端环境中执行,所以无法完全避免代码的逆向工程和破解。

相关推荐
Myli_ing29 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风31 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟40 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript