$
我們經常使用向 $ 內傳入一個字符串的方式來選擇或生成 DOM 元素,但如果這個字符串是來自用戶輸入的話,那么這種方式就是有風險的。
先看一個 DEMO:http://jsbin.com/duwuzonife/1/edit?html,js,output
$("<img src='http://www.gimoo.net/t/1902/5c71faa2eda61.html' onerror='alert();'>");
當用戶輸入的字符串是像這樣的時,雖然這個 <img> 元素不會馬上被插入到網頁的 DOM 中,但這個 DOM 元素已經被創建了,并且暫存在內存里。而對于 <img> 元素,只要設置了它的 src 屬性,瀏覽器就會馬上請求 src 屬性所指向的資源。我們也可以利用這個特性做圖片的預加載。在上面的示例代碼中,創建元素的同時,也設置了它的屬性,包括 src 屬性和 onerror 事件監聽器,所以瀏覽器會馬上請求圖片資源,顯然請求不到,隨機觸發 onerror 的回調函數,也就執行了 JavaScript 代碼。
推薦閱讀 $ 的官方文檔:http://api.jquery.com/jQuery/
類似的其他方法
.after() .append() .appendTo() .before() .html() .insertAfter() .insertBefore() .prepend() .prependTo() .replaceAll() .replaceWith() .unwrap() .wrap() .wrapAll() .wrapInner() .prepend()
以上這些方法不僅創建 DOM 元素,并且會馬上插入到頁面的 DOM 樹中。如果使用 <script> 標簽插入了內聯 JS 會立即執行。
不安全的輸入來源
document.URL * document.location.pathname * document.location.href * document.location.search * document.location.hash document.referrer * window.name document.cookie
document 的大多數屬性都可以通過全局的 window 對象訪問到。加 * 的屬性返回的時編碼 (urlencode) 后的字符串,需要解碼才可能造成威脅。
不安全的操作
把可以被用戶編輯的字符串,用在以下場景中,都是有隱患的。總體來說,任何把字符串作為可執行的代碼的操作,都是不安全的。
1.通過字符串創建函數
(1)eval
(2)new Function
(3)setTimeout/setInterval
2.跳轉頁面
location.replace/location.assign
修改 <script> 標簽的 src 屬性
修改事件監聽器
總結
如果發生在用 jQuery 時被 DOM-XSS 攻擊的情況,大多是因為忽視了兩個東西:
1. 在給$傳參數時,對參數來源的把控。
2. 用戶的輸入途徑不只有表單,還有地址欄,還可以通過開發者工具直接修改 DOM ,或者直接在控制臺執行 JS 代碼。