花點時間弄懂XSS攻擊.

最近在segmentfault發現了劉小夕.
很喜歡劉小夕寫出來的技術博文，被安排的明明白白.
此文章爲學習劉小夕的WEB安全筆記.歡迎你們也去Pick她.
文章最後有原文連接.

前端有哪幾種攻擊方式？

XSS攻擊.CSRF攻擊.點擊劫持以及URL跳轉漏洞

什麼是XSS攻擊？

XSS(Cross-Site Scripting,跨站腳本攻擊)是一種代碼注入攻擊。攻擊者在目標網站上注入惡意代碼，當用戶(被攻擊者)登陸網站時就會執行這些惡意代碼，經過這些腳本能夠讀取cookie,session tokens，或者網站其餘敏感的網站信息，對用戶進行釣魚欺詐。

XSS的本質：惡意代碼未通過濾，與網站的正常代碼混在一塊兒，瀏覽器沒法分辨哪些腳本是可信的，致使惡意腳本被執行。因爲直接在用戶的終端代碼執行，惡意代碼可以直接獲取用戶的信息，利用這些信息冒充用戶向網站發起攻擊請求.

XSS攻擊有哪些類型？

反射型XSS

反射型XSS漏洞常見於經過URL傳遞參數的功能，如網站搜索，跳轉等。因爲須要用戶主動打開惡意的URL才能生效，攻擊者每每會結合多種手段誘導用戶點擊.
POST的內容也能夠觸發反射型XSS，只不過它的觸發條件比較苛刻（構建表單提交頁面，並引導用戶點擊），因此很是少見.

反射型XSS的攻擊步驟

1.攻擊者構造出特殊的URL，其中包含惡意代碼.
2.用戶打開有惡意代碼的URL時，網站服務器端將惡意代碼從URL取出，拼接在HTML返回給瀏覽器.
3.用戶瀏覽器接收到響應後解析執行，混在其中的惡意代碼也會被執行。
4.惡意代碼竊取用戶數據併發送到攻擊者的網站，或者冒充用戶行爲，調用目標網站接口執行攻擊者指定的操做.

注意：Chrome和Safari可以檢測到url上的xss攻擊，將網頁攔截掉，可是其餘瀏覽器不行，如IE和Firefox。

如何防護反射型XSS攻擊

對url查詢參數進行轉義後再輸出到頁面。

app.get('/welcome',function(req,res){
  //對查詢參數進行編碼，避免反射型 XSS攻擊
  res.send(`${encodeURIComponent(req.query.type)}`);
})

DOM型XSS

DOM型XSS攻擊，實際上就是前端javascript代碼不夠嚴謹，把不可信的內容插入到了頁面，在使用.innerHTML、.outerHTML、.appendChild、document.write()等API時要特別當心，不要把不可信的數據做爲HTML插入到頁面上，儘可能使用.innerText、.textContent、.setAttribut()等.

DOM型XSS的攻擊步驟

1.攻擊者構造出特殊數據，其中包含惡意代碼。
2.用戶瀏覽器執行了惡意代碼
3.惡意竊取用戶數據併發送到攻擊者的網站，或冒充用戶行爲，調用目標網站接口執行攻擊者指定的操做.

如何防護DOM型XSS攻擊

防範DOM型XSS攻擊的核心就是對輸入內容進行轉義（DOM中的內聯事件監聽順和連接跳轉都能把字符串做爲代碼運行，需對內容進行檢查）.
1.對於url連接（例如圖片的src屬性）那麼直接使用encodeURIComponent來轉義。
2.對於非url，咱們能夠進行編碼：

function encodeHtml(str){
  return str.replace(/"/g,'"')
            .replace(/'/g,''')
            .replace(/</g,'&lt;')
            .replace(/>/g,'&gt;')
}

DOM型XSS攻擊中，取出和執行惡意代碼由瀏覽器端完成，屬於前端javascript自身的安全漏洞.

存儲型XSS

惡意腳本永久存儲在目標服務器上。當瀏覽器請求數據時，腳本從服務器傳回並執行，影響範圍比反射型和DOM型XSS更大。存儲型XSS攻擊的緣由仍然是沒有作好數據過濾：前端提交數據至服務器端時，沒有作好過濾;服務端在按受到數據時，在存儲以前，沒有作過濾;前端從服務器端請求到數據，沒有過濾輸出。

存儲型XSS的攻擊步驟

1.攻擊者將惡意代碼提交到目標網站的數據庫中。
2.用戶打開目標網站時，網站服務端將惡意代碼從數據庫中取出，拼接在HTML中返回給瀏覽器。
3.用戶瀏覽器接收到響應後解析執行，混在其中的惡意代碼也被執行。
4.惡意代碼竊取用戶數據併發送到攻擊者的網站，或冒充用戶行爲，凋用目標網站接口執行攻擊者指定的操做.
這種攻擊常見於帶有用戶保存數據的網站功能，如論壇發帖，商品評論，用戶私信等。

如何防範存儲型XSS攻擊

1.前端數據傳遞給服務器之彰，先轉義/過濾（防範不了抓包修改數據的狀況）
2.服務器接收到數據，在存儲到數據庫以前，進行轉義和過濾
3.前端接收到服務器傳遞過來的數據，在展現到頁面前，先進行轉義/過濾.

function getList()
{
  $.get('/getComments2').then(res=> {
     if(res.code === 0){
      let list ="";
      $each(res.comments,(index,comment)=>{
        content = encodeHtml(comment.content);
        console.log(comment.content,'*****',content);
        lists += '<li class="list-group-item"><span>${comment.username};</span>${content}';
      });
      $('.list-group').html(lists);
     }   
   }
  )
}

除了謹慎的轉義，其餘一些手段來防範XSS攻擊：
1.Content Security Policy
在服務端使用HTTP的Content-Security-Policy頭部來指定策略，或者在前端設置meta標答。
例以下面的配置只容許加載同域下的資源：

Content-Security-Policy:default-src 'self'`請輸入代碼`

<meta http-equiv="Content-Security-Policy" content="form-action 'self';">

前端和服務器設置CSP的效果相同.

嚴格的CSP在XSS的防範中能夠起到如下的做用：
1.禁止加載外域代碼，防止複雜的邏輯攻擊.
2.禁止外域提交，網站被攻擊後，用戶數據不會被泄露到外域
3.禁止內聯腳本執行（規則較嚴格，目前發現github使用）
4.禁止未受權的腳本執行
5.合理使用上報能夠及時發現XSS，利用盡快修復問題.

2.輸入內容長度控制
對於不受信任的輸入，都應該限定一個合理的長度。雖沒法徹底防止XSS發生，可是能夠增長XSS攻擊的難度。

3.輸入內容限制
對於部分輸入，能夠限定不能包含特殊字符或者僅能輸入數字等。

4.其餘安全措施
HTTP-only Cookie:禁止JavaScript讀取某些敏感Cookie，攻擊者完成XSS注入後也沒法竊取此Cookie
驗證碼：防止腳本冒充用戶提交危險操做

XSS檢測

1.使用通用XSS攻擊字串手動檢測XSS漏洞,如：

jaVasCript:/*-/*`/*\`/*'/*"/**/(/* */oNcliCk=alert() )//%0D%0A%0d%0a//</stYle/</titLe/</teXtarEa/</scRipt/--!>\x3csVg/<sVg/oNloAd=alert()//>\x3e

可以檢測到存在於HTML屬性、HTML文字內容、HTML註釋、跳轉連接、內聯Javascript字符串、內聯CSS樣式表等多種上下文中的XSS漏洞，也能檢測eval()、setTimeout()、setInterval()、Function()、innerHTML、document.write()等DOM型XSS漏洞，而且能繞過一些XSS過濾器.
2.安全掃描工具
Arachni
Mozilla HTTP Observatory
w3af

劉小夕的Blog,到位