前端安全總結之XSS

這裏主要記錄在平常中對知識的學習，經過結合筆記與自身理解的方式嘗試寫下總結
文章對細節可能不會一一介紹解釋，內容僅做參考
複製代碼

最近幾天面試都有被提到關於前端安全的瞭解，雖然以前看過，但只能說出個大概。趁着還記得感受學習一波~

前端安全常見的攻擊方式有兩種：XSS(CRoss Site Scripting 跨站腳本攻擊)、CSRF(Cross-site request forgery 跨域請求僞造)

爲了控制篇幅~今天先寫XSS

1、 XSS(跨站腳本攻擊)

原理：程序+數據=結果，然而數據裏面包含了程序，致使結果運行，而不僅僅是展現

XSS能夠作：

• 獲取頁面數據
• 獲取cookies
• 劫持前端邏輯
• 發送請求
• 偷取網站任意數據
• 偷取用戶資料
• 偷取用戶密碼和登陸態
• 欺騙用戶
• 等等

XSS攻擊可能的注入點(均是寫入可執行腳本的方式)：

• HTML節點內容，存在讀取可輸入數據
• HTML屬性，存在讀取可輸入數據
• JavaScript代碼，存在由後臺注入的變量或用戶輸入的信息
• 富文本

XSS是發生在目標用戶的瀏覽器層面上的，當渲染DOM樹的過程成發生了不在預期內執行的JS代碼時，就發生了XSS攻擊。 跨站腳本的重點不在‘跨站’上，而在於‘腳本’上。大多數XSS攻擊的主要方式是嵌入一段遠程或者第三方域上的JS代碼。其實是在目標網站的做用域下執行了這段js代碼

2、 反射型XSS

反射型XSS，也叫非持久型XSS，是指發生請求時，XSS代碼出如今請求URL中，做爲參數提交到服務器，服務器解析並響應。響應結果中包含XSS代碼，最後瀏覽器解析並執行 (通過服務器，不通過數據庫)

從概念上能夠看出，反射型XSS代碼是首先出如今URL中的，而後須要服務端解析，最後須要瀏覽器解析以後XSS代碼纔可以攻擊

舉個栗子：

<textarea name="txt" id="txt" cols="80" rows="10">
<button type="button" id="test">點我</button>
複製代碼

let test = document.querySelector('#test')
test.addEventListener('click', function () {
    // 1. 發送一個GET請求
    let url = `/test?test=${txt.value}`   
    let xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            // 3. 客戶端解析JSON並執行
            let str = JSON.parse(xhr.responseText).test
            let node = `${str}`
            document.body.insertAdjacentHTML('beforeend', node)
        } else {
            console.log('error', xhr.responseText)
        }
    }
  }
  xhr.open('GET', url, true)
  xhr.send(null)
}, false)
複製代碼

var express = require('express');
var router = express.Router();

router.get('/test', function (req, res, next) {
    // 2. 服務端解析成JSON後響應
    res.json({
        test: req.query.test
    })
})
複製代碼

啓一個web服務器，而後設置請求接口。經過Ajax的GET請求將參數發往服務器，服務器解析成json後響應。將返回的數據解析後顯示到頁面上(沒有對返回的數據進行解碼和過濾等操做)

此時咱們往textarea輸入一段帶有攻擊目的的文本：'<img src="null" onerror='alert(document.cookie)' />'

而後點擊按鈕，一個XSS攻擊就發生了，頁面會alert出cookie信息

實際上，咱們只是模擬攻擊，經過alert獲取到了我的的cookie信息。可是若是是黑客的話，他們會注入一段第三方的js代碼，而後將獲取到的cookie信息存到他們的服務器上。這樣的話黑客們就有機會拿到咱們的身份認證作一些違法的事情了

3、 儲存型XSS

存儲型XSS，也叫持久型XSS，主要是將XSS代碼發送到服務器(不論是數據庫、內存仍是文件系統等)，而後在下次請求頁面的時候就不用帶上XSS代碼了 (通過服務器，通過數據庫)

最典型的就是留言板XSS：用戶提交了一條包含XSS代碼的留言到數據庫，當目標用戶查詢留言時，那些留言的內容會從服務器解析以後加載出來，瀏覽器發現有XSS代碼，就當作正常的HTML和JS解析執行。XSS攻擊就發生了

4、XSS危害

• 經過document.cookie盜取cookie
• 使用js或css破壞頁面正常的結構與樣式
• 流量劫持（經過訪問某段具備window.location.href定位到其餘頁面:<script>window.location.href="www.baidu.com";</script>）
• Dos攻擊：利用合理的客戶端請求來佔用過多的服務器資源，從而使合法用戶沒法獲得服務器響應
• 利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻擊）用戶的身份執行一些管理動做，或執行一些通常的如發微博、加好友、發私信等操做
• 利用可被攻擊的域受到其餘域信任的特色，以受信任來源的身份請求一些平時不容許的操做，如進行不當的投票活動

5、XSS防護

從以上的反射型和DOM XSS攻擊能夠看出，咱們不能原樣的將用戶輸入的數據直接存到服務器，須要對數據進行一些處理。以上的代碼出現的一些問題以下：

• 沒有過濾危險的DOM節點。如具備執行腳本能力的script, 具備顯示廣告和圖片的img, 具備改變樣式的link、style, 具備內嵌頁面的iframe, frame等元素節點
• 沒有過濾危險的屬性節點。如事件, style, src, href等
• 沒有對用戶輸入進行處理和過濾
• 沒有對cookie設置httpOnly

解決方法以下：

• 對cookie的保護

  對重要的cookie設置httpOnly，防止客戶端經過document.cookie讀取cookie。服務端能夠設置此字段

• 對用戶輸入數據的處理

  • 編碼：不能對用戶輸入的內容都保持原樣，對用戶輸入的數據進行字符實體編碼轉義
  • 解碼：原樣顯示內容的時候必須解碼，否則顯示不到內容了
  • 過濾：把輸入的一些不合法的東西都過濾掉，從而保證安全性。如移除用戶上傳的DOM屬性，如onerror，移除用戶上傳的Style節點，iframe, script節點等