整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
avaScript奇技淫巧：隱形字符
本文，分享一種奇特的JS編程技巧，功能是：可以使字符串“隱形”、不可見(jiàn)！
如下圖所示，一個(gè)字符串經(jīng)物別的操作之后，其長(zhǎng)度有621字節(jié)，但內(nèi)容卻是“隱形”不可見(jiàn)的！
這個(gè)技術(shù)可以應(yīng)用到很多領(lǐng)域，非常具有實(shí)用性。
比如：代碼加密、數(shù)據(jù)加密、文字隱藏、內(nèi)容保密、隱形水印，等等。
實(shí)現(xiàn)字符串隱形，技術(shù)原理是“零寬字符”。
什么是“零寬字符”呢？
在Unicode編碼中，有一類(lèi)奇怪的字符格式，它們不可見(jiàn)、不可打印，主要用于調(diào)整字符的顯示格式。
常見(jiàn)零寬字符類(lèi)型：
空格符：格式為U+200B，用于較長(zhǎng)字符的換行分隔；
非斷空格符：格式為U+FEFF，用于阻止特定位置的換行分隔；
連字符：格式為U+200D，用于阿拉伯文與印度語(yǔ)系等文字中，使不會(huì)發(fā)生連字的字符間產(chǎn)生連字效果；
斷字符：格式為U+200C，用于阿拉伯文、德文、印度語(yǔ)系等文字中，阻止會(huì)發(fā)生連字的字符間的連字效果；
左至右符：格式為U+200E，用于在混合文字方向的多種語(yǔ)言文本中，規(guī)定排版文字書(shū)寫(xiě)方向?yàn)樽笾劣遥?/p>
右至左符：格式為U+200F : 用于在混合文字方向的多種語(yǔ)言文本中，規(guī)定排版文字書(shū)寫(xiě)方向?yàn)橛抑磷螅?/p>
在編程實(shí)現(xiàn)隱形字符功能時(shí)，先將字符串轉(zhuǎn)為二進(jìn)制，再將二進(jìn)制中的1轉(zhuǎn)換為\u200b；0轉(zhuǎn)換為\u200c；空格轉(zhuǎn)換為\u200d，最后使用\ufeff 零寬度非斷空格符作分隔符。這幾種unicode字符都是不可見(jiàn)的，因此最終轉(zhuǎn)化完成并組合后，就會(huì)形成一個(gè)全不可見(jiàn)的“隱形”字符串。
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是專(zhuān)業(yè)且強(qiáng)大的JS代碼混淆加密工具";
var binary_text = text_2_binary(text);
var hidden_text = binary_2_hidden_text(binary_text);
console.log("原始字符串：",text);
console.log("二進(jìn)制：",binary_text);
console.log("隱藏字符：",hidden_text,"隱藏字符長(zhǎng)度：",hidden_text.length);接下來(lái)介紹“隱形”后的內(nèi)容如何還原。
在了解上文內(nèi)容之后，知道了字符隱形的原理，再結(jié)合源代碼可知：還原隱形內(nèi)容，即進(jìn)行逆操作：將隱形的unicode編碼轉(zhuǎn)化成二進(jìn)制，再將二進(jìn)制轉(zhuǎn)成原本字符。
直接給出源碼：
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("隱形字符轉(zhuǎn)二進(jìn)制：",hidden_text_2_binary(hidden_text));
console.log("二進(jìn)制轉(zhuǎn)原始字符：",binary_2_Text(hidden_text_2_binary(hidden_text)));運(yùn)行效果：
如果在代碼中直接提供“隱形”字符內(nèi)容，比如ajax通信時(shí)，將“隱形”字符由后端傳給前端，并用以上解密方法還原，那么這種方式傳遞的內(nèi)容會(huì)是非常隱秘的。
但還是存在一個(gè)安全問(wèn)題：他人查看JS源碼，能看到解密函數(shù)，這可能引起加密方法泄露、被人推導(dǎo)出加密、解密方法。
對(duì)此問(wèn)題，可以采用JS代碼混淆加密，進(jìn)一步提升整體JS代碼安全性。
用JShaman對(duì)上面兩個(gè)解密函數(shù)進(jìn)行代碼混淆加密。
如下圖，來(lái)到JShaman網(wǎng)站，貼入要加密的JS代碼：
使用如下配置：
得到加密的JS代碼：
將代碼粘貼回源文件中：
加密的JS代碼，運(yùn)行起來(lái)跟之前完全一樣。
但此時(shí)，已不再是裸露的透明JS代碼，從這混亂復(fù)雜的代碼中很難看出功能邏輯。
注：“隱形字符”技術(shù)，可用于前后端JS執(zhí)行環(huán)境，即可在Node.JS中執(zhí)行，也可在瀏覽器中使用。
TML5中有一些特殊字符需要使用實(shí)體編碼（entity code）來(lái)表示，以確保在HTML文檔中正確顯示它們。以下是一些常用的HTML5特殊字符及其對(duì)應(yīng)的實(shí)體編碼：
這只是一小部分常見(jiàn)的HTML5特殊字符，您可以在需要使用特殊字符的地方使用它們的實(shí)體編碼，以確保網(wǎng)頁(yè)正確地顯示這些字符。
TML標(biāo)簽：
所有內(nèi)容都在<html></html>標(biāo)簽之內(nèi)；
<head></head>內(nèi)放的是頭部信息，是對(duì)頁(yè)面的描述，不會(huì)直接顯示在頁(yè)面中。
<head></head>內(nèi)的<title></title>中設(shè)置的是頁(yè)面的標(biāo)題，<title></title>只能放在<head></head>中；
<body></body>是頁(yè)面的主體，大部分顯示內(nèi)容都定義在這里。
HTML注釋?zhuān)?lt;!-- -->：
注釋不允許嵌套
html常用標(biāo)簽:
h標(biāo)簽（標(biāo)題），HTML定義了<h1></h1>到<h6></h6>六個(gè)h標(biāo)簽，分別表示不同大小的字體。h1最大，h6最小。
<br/>只是回車(chē)，<p>是段落。<p>前后會(huì)有比較大的空白，而<br/>則沒(méi)有。
<center>居中顯示.
<b>、<strong>粗體，<i>、<em>斜體。<u>下劃線(xiàn)。
<sub>2</sub>下標(biāo)，如：H<sub>2</sub>O
<sup>2</sup>上標(biāo)，如：10<sup>2</sup>
<font></font>字體標(biāo)簽，<font color=“red“ size=“7” face=“隸書(shū)”>紅色</font>。color（設(shè)置顏色） size（1-7） face（設(shè)置字體,設(shè)置字體是注意用戶(hù)計(jì)算機(jī)中必須有該字體才能正常顯示）
<hr> color size（厚度） width（長(zhǎng)度） align=left/center/right （默認(rèn)為劇中顯示）
<pre> 預(yù)格式化 保持本色;
HTML特殊字符：<（小于號(hào)，less than）；>（大于號(hào)，greater than）； （空格）。
超鏈接：<a>標(biāo)簽的一些常用屬性：href、title、target、name
插入圖片：<img src=“路徑”/>
列表：dl→(定義列表)，ul→(無(wú)序列表)， ol→(有序列表)。
表格：<table>；創(chuàng)建行：<tr>；創(chuàng)建單元格：<td>；表頁(yè)眉：<thead>；表主體：<tbody>；表頁(yè)腳：<tfoot>；表頭：<th>。
rowspan(合并行)、colspan（合并列）
<input>是主要的表單元素，type的可選值：submit（提交按鈕）、button（普通按鈕）、checkbox表單標(biāo)簽：（復(fù)選框）、file（文件選擇框）、hidden（隱藏字段）、image（圖片按鈕）、password（密碼框）、radio（單選按鈕）、reset（重置按鈕）、text（文本框）。
meta標(biāo)簽：（包括在head標(biāo)簽中。主要用來(lái)描述頁(yè)面自身信息,元信息）
<meta name="keywords" content="C#學(xué)習(xí)資料,4k8k.net,.net開(kāi)發(fā),軟件開(kāi)發(fā),編程自學(xué)網(wǎng)"/>
<meta name="description" content="免費(fèi)更新最新C#相關(guān)技術(shù)知識(shí)，主要包括：.net基礎(chǔ),網(wǎng)頁(yè)前端,三層架構(gòu),SQL數(shù)據(jù)庫(kù)..."/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />網(wǎng)頁(yè)編碼
<meta http-equiv="Refresh" content="3" />三秒鐘后刷新此網(wǎng)頁(yè)。
<meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒鐘后重定向到新網(wǎng)頁(yè)。
<meta http-equiv="Cache-Control" content="no-cache" /> 禁止瀏覽器緩存頁(yè)面。
<meta name="名字" content="值" />關(guān)于網(wǎng)頁(yè)的描述信息。
<meta http-equiv="名字" content="值" />模擬http響應(yīng)頭信息。
C#編程自學(xué)_做最好的.net自學(xué)資料站_更多文章請(qǐng)?jiān)L問(wèn)：http://www.4k8k.net/
歡迎訂閱。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
