隨著網際網路的發達，各種WEB應用也變得越來越複雜，滿足了使用者的各種需求，但是隨之而來的就是各種網路安全的問題。作為前端開發行業的我們也逃不開這個問題。所以今天我就簡單聊一聊WEB前端安全以及如何防範。
首先前端攻擊都有哪些形式，我們該如何防範?
一、XSS攻擊
XSS是一種經常出現在web應用中的電腦保安漏洞，它允許惡意web使用者將程式碼植 入到提供給其它使用者使用的頁面中。比如這些程式碼包括HTML程式碼和客戶端指令碼。攻 擊者利用XSS漏洞旁路掉訪問控制——例如同源策略(same origin policy)。這種型別 的漏洞由於被黑客用來編寫危害性更大的網路釣魚(Phishing)攻擊而變得廣為人知。
XSS攻擊的危害包括：
1、盜取各類使用者帳號，如機器登入帳號、使用者網銀帳號、各類管理員帳號
2、控制企業資料，包括讀取、篡改、新增、刪除企業敏感資料的能力
3、盜竊企業重要的具有商業價值的資料
4、非法轉賬
5、強制傳送電子郵件
6、網站掛馬
7、控制受害者機器向其它網站發起攻擊
XSS攻擊的具體表現：
1、Java程式碼注入
下面是程式碼的頁面
這段程式碼的作用是把第一個輸入框的字串，輸出到第二個輸入框，我們輸入1，那麼第二個input裡的value值就是1，下面是頁面的截圖和原始碼的截圖(這裡我輸入下面的程式碼來測試)
<>alert('xss')</>
明顯的可以看到，並沒有彈出對話方塊，大家可能會疑惑為什麼沒有彈窗呢，看看原始碼
我們看到我們輸入的字串被輸出到第15行input標籤裡的value屬性裡面，被當成value裡的值來顯現出來，所以並沒有彈窗，這時候我們該怎麼辦呢?聰明的人已經發現了可以在
<>alert('xss')</>
前面加個">來閉合input標籤。所以應該得到的結果為
成功彈窗了，我們在看看這時的頁面
看到後面有第二個input輸入框後面跟有">字串，為什麼會這樣呢，我們來看看原始碼
解決辦法：目前來講，最簡單的辦法防治辦法，還是將前端輸出資料都進行轉義最為穩妥，雖然顯示出來是有標籤的，但是實際上，標籤的左右尖括號(><)，均被轉義為html字元實體，所以，便不會被當做標籤來解析的，但是實際顯示的時候，這兩個尖括號，還是可以正常展示的。
2、append的利用
上一小節我們防住了標籤的左右尖括號，但聰明的黑客們還是想出了好辦法去破解，我們知道，直接給innerHTML賦值一段js，是無法被執行的。比如，
$('div').innerHTML ='<>alert("okok");</> '';
但是，jQuery的append可以做到，究其原因，就是因為jquery會在將append元素變為fragment的時候，找到其中的標籤，再使用eval執行一遍。jquery的append使用的方式也是innerHTML。而innerHTML是會將unicode碼轉換為字元實體的。
利用這兩種知識結合，我們可以得出，網站使用append進行dom操作，如果是append我們可以決定的欄位，那麼我們可以將左右尖括號，使用unicode碼偽裝起來，就像這樣--"u003cu003ealert('xss');"。接下來轉義的時候，偽裝成u003的<會被漏掉，append的時候，則會被重新呼叫。雖然進行了轉義，注入的程式碼還是會再次被執行
3、img標籤的再次利用
img標籤，在載入圖片失敗的時候，會呼叫該元素上的事件。我們正可以利用這種方式來進行攻擊。
但是，如果這張圖片的地址我們換種寫法呢?
這時的原始碼已經變為--src為空，但是的時候，執行注入程式碼。我們重新整理檢視頁面，就會發現，程式碼注入已經成功，需要繼續轉義。
二、 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上攜帶的資訊，要謹慎使用。心中時刻記著，自己的網站哪裡可能有危險。