前端安全：幾種攻擊模式

1.XSS攻擊

主要是注入js代碼，通過將js代碼存入數據庫或者通過修改 URL 參數的方式加入攻擊代碼，誘導用戶訪問鏈接從而進行攻擊。

防禦措施：

1. 對字符串進行轉義 通常來說主要針對script標籤進行轉義

function escape(str) {
      str = str.replace(/&/g, '&');
      str = str.replace(/</g, '<');
      str = str.replace(/>/g, '>');
      str = str.replace(/"/g, '&quto;');
      str = str.replace(/'/g, ''');
      str = str.replace(/`/g, '`');
      str = str.replace(///g, '/');
      return str;
}

2. CSP: Content-Security-Policy
   設置 meta 標籤的方式 ,具體去看一下CSP的文檔

	<meta http-equiv="Content-Security-Policy">

2.CSRF攻擊
CSRF 中文名爲跨站請求僞造。攻擊者盜用了你的身份，以你的名義發送惡意請求，對服務器來說這個請求是完全合法的，但是卻完成了攻擊者所期望的一個操作，比如以你的名義發送郵件、發消息，盜取你的賬號，添加系統管理員，甚至於購買商品、虛擬貨幣轉賬等。 如下：其中Web A爲存在CSRF漏洞的網站，Web B爲攻擊者構建的惡意網站，User C爲Web A網站的合法用戶。
防禦措施：無非就是不要把登錄身份給攻擊者拿到， 最安全自然同源策略。

1. SameSite：可以對 Cookie 設置 SameSite 屬性。該屬性表示 Cookie 不隨着跨域請求發送。
2. referer：通過驗證 Referer 來判斷該請求是否爲第三方網站。
3. Token：目前前端最常用的方式

3.點擊劫持
點擊劫持，clickjacking，也被稱爲UI-覆蓋攻擊。攻擊者將需要攻擊的網站通過 iframe 嵌套的方式嵌入自己的網頁中，並將 iframe 設置爲透明，在頁面中透出一個按鈕誘導用戶點擊。
防禦措施：
X-Frame-Options它有三個可選的值：
DENY：瀏覽器會拒絕當前頁面加載任何frame頁面；
SAMEORIGIN：frame頁面的地址只能爲同源域名下的頁面；
ALLOW-FROM origin：允許frame加載的頁面地址；
本人使用nginx，則設置： add_header X-Frame-Options SAMEORIGIN;

4.中間人攻擊
當數據傳輸發生在一個設備（PC/手機）和網絡服務器之間時，攻擊者使用其技能和工具將自己置於兩個端點之間並截獲數據；儘管交談的兩方認爲他們是在與對方交談，但是實際上他們是在與幹壞事的人交流，這便是中間人攻擊。（回話劫持，DNS欺騙等）
這邊不具體說了，對於前端的措施，將http升級爲https來防禦