XSS簡介
跨站腳本攻擊指的是自己的網站運行了別的網站里面的代碼
攻擊原理是原本需要接受數據但是一段腳本放置在了數據中：
XSS攻擊原理
XSS攻擊能做什么？
- 獲取頁面數據
- 獲取Cookies
- 劫持前端邏輯
- 發送請求到攻擊者自己的網站實現資料的盜取
- 偷取網站任意數據
- 偷取用戶密碼和登陸狀態
- 改變按鈕的邏輯
XSS攻擊類型
其實XSS的種類非常的多尤其是變種的特別多，大致可以分為兩種
反射型：是通過URL參數直接注入，一般是使用alert來探測站點是否防御，直接攻擊的使用src來引入自己的腳本
http://localhost:1521/?from=<script>alert(1)</script>bing
存儲型：存儲到DB后讀取時注入（危害很大）
在評論的時候寫script標簽，這樣數據就是存儲在數據庫中的，如果該頁面要讀取出這條有script標簽的信息那么將這個網址發給別人別人也會中招。
XSS攻擊注入點：
html節點內容：如果一個節點是動態生成的，有可能這個節點的數據有腳本（用戶輸入信息）
html屬性：某個html的屬性是由用戶輸入的，輸入的內容可能有腳本
<img src="1" onerror="alert(1)"/>1" onerror="alert(1) // src被提前關閉
js代碼：js代碼中存在后臺注入的變量或者用戶輸入的信息
localhost:1521/?from=google";alert(1);"
富文本：其實是一大段的html，我們需要保留格式又要去掉script標簽，這是比較麻煩的
富文本得保留HTML，HTML有XSS就有攻擊風險
實際上瀏覽器有著XSS的部分防御機制，可以通過
ctx.set('X-XSS-Protection',0); // 0-disable 1-enable
來進行關閉，瀏覽器的防御很有限，只能是反射型的參數并且出現在html節點和屬性中才會進行防御，在js和富文本中是不會攔截的。
五種防御方式
HTML節點內容的XSS防御
轉義掉<<和>> 即轉義掉<>即可，轉義的時機有兩種，一種是寫入數據庫的時候進行轉義，另一種是在解析的時候進行轉義。
這里是在顯示的時候轉義
var escapeHtml = function(str){ str = str.replace(/>/g, '<'); str = str.replace(/>/g, '>'); return str;}escapeHtml(content);
HTML屬性的XSS防御
轉義”&quto; 即轉義掉雙引號，'轉義掉單引號，(另一個要注意的是實際上html的屬性可以不包括引號，因此嚴格的說我們還需要對空格進行轉義，但是這樣會導致渲染的時候空格數不對，因此我們不轉義空格，然后再寫html屬性的時候全部帶上引號)這樣屬性就不會被提前關閉了
var escapeHtmlProperty = function(str){ str = str.replace(/"/g, '&quto;'); str = str.replace(/'/g, '''); str = str.replace(/ /g, ' '); return str;}escapeHtml(content);
其實以上這兩個函數可以合并成一個函數，這樣不管是內容還是屬性都可以使用一個函數來過濾了：
HTML轉義函數
var escapeHtmlProperty = function(str){ if(!str) return ''; str = str.replace(/&/g, '&'); str = str.replace(/>/g, '<'); str = str.replace(/>/g, '>'); str = str.replace(/"/g, '&quto;'); str = str.replace(/'/g, '''); return str;}escapeHtml(content);
js轉義
轉義””或者替換成json
var escapeForJs = function(str){ if(!str) return ''; str = str.replace(/\/g,'\\'); str = str.replace(/"/g,'\"');}
這里的解決方式并不完整，因為還有可能是單引號或者其他形勢包裹的，這里最保險的方法其實很簡單，就是對數據做一次JSON.stringify即可
富文本
由于需要完整的HTML因此不太容易過濾，一般是按照白名單進行保留部分標簽和屬性來進行過濾，除了允許的標簽和屬性，其他的全部不允許（也有黑名單的方式，但是由于html復雜效果比較差，原理就是之前的正則替換）
其實可以用別人寫好的XSS組件就叫做xss，直接
npm install xss
白名單-使用第三方庫XSS，支持指定白名單
var xssFilter = function(html){ if(!html) return ''; var xss = require('xss'); var ret = xss(html, { whiteList:{ img: ['src'], a: ['href'], font: ['size', 'color'] }, onIgnoreTag: function(){ return ''; } }); console.log(html, ret); return ret;};
本文作者熊冰，個人網站[Bing的天涯路]，轉載請注明作者和出處。
