xss · 前端技術總結

## 一、什么是XSS Cross-Site Scripting（跨站腳本攻擊）簡稱 XSS，是一種代碼注入攻擊。攻擊者通過在目標網站上注入惡意腳本，使之在用戶的瀏覽器上運行。利用這些惡意腳本，攻擊者可獲取用戶的敏感信息如 Cookie、SessionID 等，進而危害數據安全。 ## 二、XSS 分類 | 類型 | 存儲區* | 插入點* | |---|---|---| | 存儲型 XSS | 后端數據庫 | HTML | | 反射型 XSS | URL | HTML | | DOM 型 XSS | 后端數據庫/前端存儲/URL | 前端 JavaScript | * 存儲區：惡意代碼存放的位置。 * 插入點：由誰取得惡意代碼，并插入到網頁上。 ## 三、XSS 攻擊的介紹 1、鏈接script ``` http://xxx/search?keyword="><script>alert('XSS');</script> ``` 2、input注入 ``` <input type="text" value=""><script>alert('XSS');</script>"> ``` 3、鏈接javascript ``` http://xxx/?redirect_to=javascript:alert('XSS') http://xxx/?redirect_to=jAvascRipt:alert('XSS') ``` 4、針對cookie ``` http://m.exmail.qq.com/cgi-bin/login?uin=aaaa&domain=bbbb%26quot%3B%3Breturn+false%3B%26quot%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Bscript%26gt%3Balert(document.cookie)%26lt%3B%2Fscript%26gt%3B ``` ## 四、XSS預防 * 利用模板引擎開啟模板引擎自帶的 HTML 轉義功能。例如：在 ejs 中，盡量使用 <%= data %> 而不是 <%- data %>；在 doT.js 中，盡量使用 {{! data } 而不是 {{= data }；在 FreeMarker 中，確保引擎版本高于 2.3.24，并且選擇正確的 freemarker.core.OutputFormat。 * 避免內聯事件盡量不要使用 onLoad="onload('{{data}}')"、onClick="go('{{action}}')" 這種拼接內聯事件的寫法。在 JavaScript 中通過 .addEventlistener() 事件綁定會更安全。 * 避免拼接 HTML 前端采用拼接 HTML 的方法比較危險，如果框架允許，使用 createElement、setAttribute 之類的方法實現。或者采用比較成熟的渲染框架，如 Vue/React 等。 * 時刻保持警惕在插入位置為 DOM 屬性、鏈接等位置時，要打起精神，嚴加防范。 * 增加攻擊難度，降低攻擊后果通過 CSP、輸入長度配置、接口安全措施等方法，增加攻擊的難度，降低攻擊的后果。 * 主動檢測和發現可使用 XSS 攻擊字符串和自動掃描工具尋找潛在的 XSS 漏洞。參考： https://segmentfault.com/a/1190000016551188