在web的開發的開發過程中，前端總是在處理后端打的各種變量，變量可以包含著中的各種各樣的字符，如果不對這些字符進行”特殊“處理的話，輕者導致頁面不正常的顯示，潛入了其他的東西，亦即頁面掛了，或者彈出不應該彈出的東西，這些都是我們不期望看到的，重者可能導致密碼泄露，網站的訪問量突然猛增，服務器掛掉。

　　在前端的開發中，涉及到以下幾種語境：

　　1）直接顯示在頁面上， eg：<div>{%username%}</div>,<input type="text" value="{%username%}"/>

　　2）在script 標簽中，eg ：<script>var test = '{%username%}';var test="{%username%}"</script>

　　3）在頁面事件中，eg:<div οnclick="alert('{%username%}')">334455</div>

　　4）在innerHTML 的語境中，eg:<div id="test"></div> <script>var test="{%username%}";document.getElementById('test').innerHTML =test; </script>

　　5）在頁面鏈接的url中：eg：<a href="{%username%}"></a>

　　6）提交url參數處理

　　7）js 獲取url參數值的時候

下面來一個一個的分析上面提到了7種語境中的轉義情況：

1）直接顯示在頁面上（簡稱頁面html環境中）：

　　為了保證用戶的本意，完完全全的展示在頁面上，這類主要是防止標簽的自閉合，屬性中的單引號，雙引號已經存在的情況下不正確顯示，所以必須轉義4個字符：<,>,",' ?to為轉義的意思（下同）

　　（1）< ?to &lt;

　　（2） > to &gt;

　　（3）" to &quot；

　　（4）' to &#39；

2）在script的標簽中（簡稱js環境中）：

　　在javascript 中 ” 和' 都是表示字符串，沒有任何區別，所以如果變量中出現了這2個字符，就會影響后面不正確顯示，所以必須轉義這2個字符 ，同理，如果變量中包含\ 會將后面的'或者“給轉義掉，

變成真正的’和”，也沒有閉合，導致語法錯誤，所以這個字符也需要轉義，另外在我們的注釋中存在/* ?*/ 這種形式，如果在變量中出現了 */這種字符，就會將注釋掉的部分代碼給暴漏出來，所以也要轉義/字符，

綜上所述，在script標簽中要轉義的字符為：

　　（1）' ? to \'

　　（2）" ?to \"

　　（3）\ ?to \\

　　（4）/ ?to \/

3）在頁面事件中：

　　這類語境涉及到了頁面html和Js 環境，要執行什么轉義呢？到底是先html 在js，還是先js 再html 轉義呢？我們來看一個例子：

　　eg：<div οnclick="alert('{%username%}')"></div>

　　　　當username = " 的時候，如果是先html ，然后再js 轉義的時候，那么就是<div onlick="alert('&qout;')"></div> ? 我們拿到頁面上去執行，發現語法報錯

　　　　　　　　　　　　　　　　如果是先js，先后在html轉義的時候，那么就是<div onlick="alert('\&qout;')"></div> ? 我們拿到頁面上去執行，成功！！

　　　　所以結論是 先進行JS 轉義，然后再進行html 轉義，為什么是這樣呢？因為這里它是要執行一個js函數的，如果都當做html來解析了，這里的js函數就不會執行，也就沒有js 環境的意思了。

綜上所述，在這累語境中需要轉義的字符為：

　　（1）' ? to \&#38;

　　（2）" ?to \&quot;

　　（3）\ ?to \\

　　（4）/ ?to \/

　　（5）< to &lt;

　　（6）< to &gt;

4） 在innerHTML環境中：

　　這類語境首先是js環境中，其次是在html環境中，顯然，先進行js轉義，然后再進行html轉義，需要轉義的字符同上述3）

5）在頁面鏈接的url 環境中：

　　這類比較復雜，url中本身涉及到很多的特殊字符，此外也會涉及到html 和js 環境中的賦值的情況，特別注意，url 編碼和html的編碼是不一樣的，見后文附錄url編碼表和html編碼表

　　在html 和js環境中，需要轉義的字符為： ?” ?，' ，<，>，\ ，/ ? ? ?

　　在其他環境中，需要轉義的字符為：+，空格，？，=，&，#， %

　　這類字符的轉義如下：

　　（1）" ?to %22;

　　（2）' to %22;

　　（3） < ?to ?%3C

　　（4） > ?to %3E

　　（5） \ ?to %5C

　　（6） / to %2F

　　（7） + ?to %2b

　　（8）空格 to ?%20

　　（9）？ ?to ?%3F

　　（10）= ?to ?%3D

　　（11）& ?to %26

　　（12）# ?to 23

　　（13） % ?to %25

　　為什么要轉義這些字符呢？稍微web開發的經驗同學就知道，原因很簡單，如果存在這些字符的話，不進行轉義，那么我們就會得不到我們應該得到的東西

引申一點：在我們拼接url的時候，比如將表單中的數據提取出來，用ajax的方式提交的時候，也需要對上述字符進行轉義，不然得到的也不是想到的東西

6）提交url 參數的處理：

　　1） Form ?表單提交方式：不需要做任何處理，表單會依照頁面的編碼進行編碼

　　2） ajax 的提交：因為ajax的提交的時候，是拼接成url的方式提交給后端的，所以必須要考慮對 ?+，空格，？，=，&，#， % 的轉義，通常使用 encodeURIComponent進行轉義

　　關于escape,encodeURI,encodeURIComponent ?這三個函數的需要的轉義字符，見后面的附件列表

7） js 獲取url參數的值的時候

　　（1） 得到url中的參數值的時候，首先必須要進行unescape的轉碼才能使用，因為url中的一些特殊字符都經過了編碼

　　（2） 將url的值設置到一些參數上時，比如隱藏表單上的value值的時候（作提交refer），需要進行escape 編碼

附錄：

　　1）html 編碼：http://wenku.baidu.com/view/0dbaa1dc7f1922791688e8a2.html

　　2）url 編碼：http://baike.baidu.com/view/204662.htm

　　3）escape,encodeURI,encodeURIComponent 的區別：http://www.alixixi.com/web/a/2008081147930.shtml

?

?

?

　　

?

?

總結

以上是生活随笔為你收集整理的web前端安全编码（模版篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。