《前端安全精講》

web前端安全雖然在平時的開發中涉及的不是不少，但也是前端綜合技能領域重要的一環。不管是對於提高產品總體的安全性可靠性，仍是做爲技術人員自身能力的提高，瞭解基本常見的前端安全問題，都是很是有必要的。

本文旨在對前端安全涉及的內容作一個梳理。其實做爲講解安全的文章，有一個痛點，那就是很難用文章的形式把這個具體的發生實現過程展現清楚，這可能須要大量的代碼以及輔助的貼圖，這樣反而會讓人看的迷糊。因此本文只會以文字形式講解安全問題，以供你們對這個領域知識的梳理和回顧。

1、XSS(Cross-Site-Scripting)跨站腳本攻擊

1.1 XSS攻擊原理

XSS攻擊的重點其實不在「跨站」這個字面上，重點是「腳本」。之因此這麼說，是由於XSS攻擊是發生在目標用戶的瀏覽器層面的一種攻擊，當用戶瀏覽器渲染整個HTML文檔的過程當中出現了不被預期的腳本時，XSS就會發生。

其實XSS攻擊攻擊的原理還能夠說的更加簡單明瞭，就是用戶訪問的頁面中，被植入了不安全的腳本。而這些腳本，具備各類危害用戶的能力。至於這些腳本是如何被植入的，那形式就多種多樣了。舉幾個例子。
1.不少網站內部的JavaScript代碼，會讀取瀏覽器地址中攜帶的信息，並做爲內容在頁面中展現。假若有這樣一個URL地址

http://www.demo.com?xss=<script>alert(document.cookie)</script>
複製代碼

這段地址中的query值xss若是被讀取而且執行，就具有了在頁面中執行程序的能力。這只是一個簡單的alert，若是經過src的方式引入第三方JS文件，那麼攻擊者可作的事情就更多了。
2.比較常見的是一些帶有用戶留言功能的網站。好比攻擊者A在留言中寫入了一段攻擊代碼，這段代被髮送到服務器，而且沒有通過轉義過濾，。當用戶B訪問網頁的時候，獲取了這段代碼並直接執行了，這就產生了XSS攻擊。
總之，XSS的攻擊者的目的就是想盡一切辦法將他的腳本內容在目標網站中目標用戶的瀏覽器上解析執行。

1.2 XSS攻擊類型

XSS攻擊根據類型能夠分爲:
1.反射型XSS(非持久型XSS)。XSS代碼出如今URL中，攻擊者須要將帶有攻擊腳本的URL發送給目標用戶。用戶點擊訪問後，在本地的瀏覽器解析執行了攻擊代碼。
2.存儲型XSS(持久型XSS)。存儲型的XSS代碼，會被存儲在服務器端。當用戶訪問網頁的時候，從服務器拿到攻擊代碼並執行。
3.DOM XSS。它和其它兩個類型的差異在於DOM XSS的XSS代碼並不須要服務器解析響應的參與，觸發XSS考的就是瀏覽器的DOM解析。

1.3 XSS攻擊防護

說完了XSS的原理和類型，就得了解一下相關的解決防護方案。
對於反射型XSS，須要注意的地方有：
1.web頁面渲染的內容必須從服務的獲取，用戶的輸入必須通過處理才能展現。 2.不要從URL等這些途徑獲取數據直接展現到頁面中。 3.對於用戶輸入，或者是動態獲取的數據，須要通過轉義才能執行展現。 對於存儲型XSS，須要注意的地方有：
1.後端將數據存入數據庫以前，先進行轉義。
2.後端輸出給前端的數據，須要進行統一轉義處理。
3.前端獲取後端的數據後，對數據進行轉義處理。

2、CSRF(Cross-Site-Request-Forgery)跨站請求僞造

2.1 CSRF的原理和實現

CSRF的攻擊有兩個關鍵點:
1.跨站點的請求。
2.請求是僞造的。
咱們知道，不一樣域的Ajax請求時不合法的，同源策略禁止了跨域的數據傳輸。那麼不一樣站點的CSRF攻擊是如何產生的呢？
這裏有一個很重要的知識點就是，客戶端HTML標籤發出的跨域GET請求被認爲是合法的，不在同源策略的限制中。
1.惡意網站B上有一個帶有CSRF攻擊代碼的頁面，其中的代碼多是這樣

<img src="http://www.a.com/blog/del?id=5">
複製代碼

2.攻擊者誘使登陸了正規A網站的用戶，訪問了他的B網站上的CSRF頁面。
3.因爲用戶登陸了A網站，因此訪問這個頁面請求了攜帶在img標籤中的地址。而且在這個訪問中，http中請求信息幾乎是如出一轍的。
經過這樣的方式，攻擊者不但繞開了同源策略的限制，還僞造了請求的身份信息。

2.2CSRF的防護

雖然CSRF的攻擊可以僞造用戶的信息，可是這樣的請求畢竟是從第三方網站發起的，它並不會通過正規網站自己。因此對於CSRF的防護大概有 1.經過設置sameSite-Strict屬性，禁止第三方網站攜帶cookie。 2.在正規網站的頁面提交內容，能夠設置驗證碼，或者是token。 3.雖然第三方網站的跨站請求信息幾乎和正規網站是同樣的，可是仍是有所不一樣。這個不一樣就是請求信息中的Referer字段，這個字段描述了請求的來源。能夠經過這個字段禁止第三方網站的請求。

3、界面操做劫持攻擊

界面操做劫持攻擊是一種基於視覺欺騙的web會話攻擊，它經過在頁面可見控件上覆蓋一個不可見的框(iframe)，使得用戶誤覺得本身在操做可見框，從而在用戶不知情的狀況下篡改數據、竊取信息等。
界面劫持攻擊大概有三類:
1.點擊劫持。
2.拖放劫持。
3.觸屏劫持。
界面操做劫持的防護主要在於禁止網站被嵌入到iframe中，能夠經過JavaScript代碼實現。也能夠經過X-FRAME-OPTIONS屬性的設置，禁止頁面被嵌入到iframe中。

4、Cookie安全問題

cookie是一種前端數據存儲方式，後端經過HTTP響應頭設置cookie。不少攻擊的實現，都是經過獲取用戶的cookie信息，從而僞造身份形成攻擊。因此保證cookie的安全，是前端安全的重要一環。
cookie的安全能夠從如下幾個方面着手。
1.經過加簽名的方式，防止cookie被篡改。
2.經過對cookie內容的加密，防止被盜用。
3.設置響應頭中的http-only字段，方式客戶端的JavaScript代碼讀取cookie。
4.設置secure字段，只容許在https下使用cookie。
5.經過same-site保證cookie安全(瀏覽器兼容性較差)。

關於前端安全的問題，各式各樣的變形還有不少。攻擊每每也不是單一的方式，而是多種多樣的攻擊手段的組合。爲了保證前端頁面的安全性和可靠性，須要先後端的通力合做。