前端面試12：安全類

這裏有一份簡潔的前端知識體系等待你查收，看看吧，會有驚喜哦~若是以爲不錯，懇求star哈~

課程思惟導圖

Q：常見的攻擊方式有哪些？

1. CSRF：跨站請求僞造
2. XSS：跨站腳本攻擊

Q：CSRF的原理及防護措施？

1. 攻擊原理：
   1. F是網站A的用戶，且已登陸，網站A對用戶F進行身份認證後下發了cookie，保存在F瀏覽器中。
   2. F訪問網站B，網站B存在引誘點擊（每每是個連接，指向網站A的API接口，一般是GET類型），而後訪問了A網站，瀏覽器會自動上傳cookie。
   3. 網站A對傳來的cookie進行確認，是合法用戶，則執行接口的動做
2. 前提：
   1. 網站A某個接口存在漏洞
   2. 用戶在網站A已登陸
3. 防護措施：
   1. Token驗證：用戶訪問網站時，服務器會自動向本地存儲token，訪問接口時，須要回傳token，不然沒法經過驗證
   2. Referer驗證：服務器判斷頁面來源是否爲站點下的頁面，若是不是，則攔截
   3. 隱藏令牌：與token相似，使用方式上的差異，更加隱蔽(好比放在http頭部)

Q：XSS的原理及防護措施？

1. 攻擊原理：向頁面的合法渠道注入腳本（在腳本里執行想作的事情，不必定要登陸）
2. 攻擊方式：
   1. 反射型：發出請求時，XSS代碼出如今URL中，做爲輸入傳給服務器，服務器解析後響應，XSS代碼隨響應內容傳回瀏覽器，最後瀏覽器執行XSS代碼，好比插入廣告、執行惡性代碼（img onerror）、引誘用戶點擊（按鈕點擊）
   2. 存儲型：提交的代碼會存儲在服務器端（數據庫、內存、文件系統等），下次請求目標頁面時不用再提交XSS代碼。
3. 防護措施（讓插入的腳本不可執行）
   1. 編碼：對用戶輸入的內容進行HTML Entity轉義，例如</ body>，若是不轉義，直接輸出到頁面上時，DOM結構就被破壞了。同時還要避免直接進行HTML Entity解碼，不然，編碼跟過濾就失去了意義。
   2. 過濾：
      1. 移除用戶上傳的DOM屬性，如onerror等跟事件相關的屬性
      2. 移除用戶上傳的Style節點、Script節點、iframe節點、frame節點等
   3. 校訂：使用DOM Parse轉換（相似的第三方庫有domParse），校訂不配對的DOM標籤，防止用戶輸入的內容破壞掉咱們頁面的DOM結構。