avaScript奇技淫巧：隱形字符

本文，分享一種奇特的JS編程技巧，功能是：可以使字符串“隱形”、不可見！

效果展示

如下圖所示，一個字符串經物別的操作之后，其長度有621字節(jié)，但內容卻是“隱形”不可見的！

功能用途

這個技術可以應用到很多領域，非常具有實用性。

比如：代碼加密、數據加密、文字隱藏、內容保密、隱形水印，等等。

原理介紹

實現字符串隱形，技術原理是“零寬字符”。

什么是“零寬字符”呢？

在Unicode編碼中，有一類奇怪的字符格式，它們不可見、不可打印，主要用于調整字符的顯示格式。

常見零寬字符類型：

空格符：格式為U+200B，用于較長字符的換行分隔；

非斷空格符：格式為U+FEFF，用于阻止特定位置的換行分隔；

連字符：格式為U+200D，用于阿拉伯文與印度語系等文字中，使不會發(fā)生連字的字符間產生連字效果；

斷字符：格式為U+200C，用于阿拉伯文、德文、印度語系等文字中，阻止會發(fā)生連字的字符間的連字效果；

左至右符：格式為U+200E，用于在混合文字方向的多種語言文本中，規(guī)定排版文字書寫方向為左至右；

右至左符：格式為U+200F : 用于在混合文字方向的多種語言文本中，規(guī)定排版文字書寫方向為右至左；

在編程實現隱形字符功能時，先將字符串轉為二進制，再將二進制中的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是專業(yè)且強大的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執(zhí)行環(huán)境，即可在Node.JS中執(zhí)行，也可在瀏覽器中使用。

TML5中有一些特殊字符需要使用實體編碼（entity code）來表示，以確保在HTML文檔中正確顯示它們。以下是一些常用的HTML5特殊字符及其對應的實體編碼：

這只是一小部分常見的HTML5特殊字符，您可以在需要使用特殊字符的地方使用它們的實體編碼，以確保網頁正確地顯示這些字符。