前端安全以及如何防範詳細介紹

隨著互聯網的發達，各種WEB應用也變得越來越複雜，滿足了用戶的各種需求，但是隨之而來的就是各種網絡安全的問題。作為前端開發行業的我們也逃不開這個問題。所以今天我就簡單聊一聊WEB前端安全以及如何防範。

首先前端攻擊都有哪些形式，我們該如何防範?

一、XSS攻擊

XSS是一種經常出現在web應用中的計算機安全漏洞，它允許惡意web用戶將代碼植 入到提供給其它用戶使用的頁面中。比如這些代碼包括HTML代碼和客戶端腳本。攻 擊者利用XSS漏洞旁路掉訪問控制——例如同源策略(same origin policy)。這種類型 的漏洞由於被黑客用來編寫危害性更大的網絡釣魚(Phishing)攻擊而變得廣為人知。

XSS攻擊的危害包括：

1、盜取各類用戶帳號，如機器登錄帳號、用戶網銀帳號、各類管理員帳號

2、控制企業數據，包括讀取、篡改、添加、刪除企業敏感數據的能力

3、盜竊企業重要的具有商業價值的資料

4、非法轉賬

5、強制發送電子郵件

6、網站掛馬

7、控制受害者機器向其它網站發起攻擊

XSS攻擊的具體表現：

1、JavaScript代碼注入

下面是代碼的頁面:

這段代碼的作用是把第一個輸入框的字符串，輸出到第二個輸入框，我們輸入1，那麼第二個input裡的value值就是1，下面是頁面的截圖和源代碼的截圖(這裡我輸入下面的代碼來測試)

明顯的可以看到，並沒有彈出對話框，大家可能會疑惑為什麼沒有彈窗呢，看看源代碼

我們看到我們輸入的字符串被輸出到第15行input標籤裡的value屬性裡面，被當成value裡的值來顯現出來，所以並沒有彈窗，這時候我們該怎麼辦呢?聰明的人已經發現了可以在

前面加個">來閉合input標籤。所以應該得到的結果為

成功彈窗了，我們在看看這時的頁面

看到後面有第二個input輸入框後面跟有">字符串，為什麼會這樣呢，我們來看看源代碼

解決辦法：目前來講，最簡單的辦法防治辦法，還是將前端輸出數據都進行轉義最為穩妥，雖然顯示出來是有script標籤的，但是實際上，script標籤的左右尖括號(>

2、append的利用

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

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

利用這兩種知識結合，我們可以得出，網站使用append進行dom操作，如果是append我們可以決定的字段，那麼我們可以將左右尖括號，使用unicode碼偽裝起來，就像這樣--"\\\\u003cscript\\\\u003ealert('xss');"。接下來轉義的時候，偽裝成\\\\u003的

3、img標籤的再次利用

img標籤，在加載圖片失敗的時候，會調用該元素上的onerror事件。我們正可以利用這種方式來進行攻擊。

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

這時的源碼已經變為--src為空，但是onerror的時候，執行注入代碼。我們刷新查看頁面，就會發現，代碼注入已經成功，需要繼續轉義。

二、 CSRF攻擊

什麼是CSRF攻擊?

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

1、要合理使用post與get

通常我們會為了省事兒，把一些應當提交的數據，做成get請求。殊不知，這不僅僅是違反了http的標準而已，也同樣會被黑客所利用。

比如，你開發的網站中，有一個購買商品的操作。你是這麼開發的：

那麼，黑客的網站可以這樣開發：

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

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

2、xsrf攻擊升級

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

黑客代碼如下：

點擊後，用戶進行了提交，卻連自己都不知情。這種情況如何防禦呢?

最簡單的辦法就是加驗證碼，這樣除了用戶，黑客的網站是獲取不到用戶本次session的驗證碼的。但是這樣也會降低用戶的提交體驗，特別是有些經常性的操作，如果總讓用戶輸入驗證碼，用戶也會非常的煩。

另一種方式，就是在用訪問的頁面中，都種下驗證用的token，用戶所有的提交都必須帶上本次頁面中生成的token，這種方式的本質和使用驗證碼沒什麼兩樣，但是這種方式，整個頁面每一次的session，使用同一個token就行，很多post操作，開發者就可以自動帶上當前頁面的token。如果token校驗不通過，則證明此次提交併非從本站發送來，則終止提交過程。如果token確實為本網站生成的話，則可以通過。

代碼如下

並沒有攜帶本站每次session生成的token，則提交失敗。

本站的網站form，則都會自動攜帶本站生成的token

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

三、網絡劫持攻擊

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

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

四、控制檯注入代碼

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

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

五、釣魚

釣魚也是一種非常古老的攻擊方式了，其實並不太算前端攻擊。可畢竟是頁面級別的攻擊，我們也來一起聊一聊。我相信很多人會有這樣的經歷，QQ群裡面有人發什麼兼職啦、什麼自己要去國外了房子車子甩賣了，詳情在我QQ空間裡啦，之類的連接。打開之後發現一個QQ登錄框，其實一看域名就知道不是QQ，不過做得非常像QQ登錄，不明就裡的用戶們，就真的把用戶名和密碼輸入了進去，結果沒登錄到QQ，用戶名和密碼卻給人發過去了。

其實這種方式，在前端也有利用。下面，我們就來試試如果利用前端進行一次逼真的釣魚。

1、首先，我們在xx空間裡分享一篇文章，然後吸引別人去點擊。

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

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

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

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

六、我們平時開發要注意些什麼?

開發時要提防用戶產生的內容，要對用戶輸入的信息進行層層檢測要注意對用戶的輸出內容進行過濾(進行轉義等)重要的內容記得要加密傳輸(無論是利用https也好，自己加密也好)

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

對於URL上攜帶的信息，要謹慎使用。心中時刻記著，自己的網站哪裡可能有危險。

以上就是前端安全以及如何防範詳細介紹的詳細內容，更多請關注其它相關文章！

更多技巧請《轉發 + 關注》哦！