XSS攻擊瞭解一下
在準備春招實習的時候突然意識到自己對 web安全領域的知識幾乎是空白，下面對在前端可能會遇到的web安全問題進行一個簡單的總結，今天就從XSS開始～
什麼是XSS攻擊
XSS攻擊的全稱是 Cross-site script，也就是跨站腳本攻擊，爲了和 CSS 區分，這裏把攻擊的第一個字母改成了 X，於是叫做 XSS。
XSS攻擊是一種經常出現在 web應用的攻擊，攻擊者通過在目標網站上注入惡意腳本，使之在用戶的瀏覽器上運行。利用這些惡意腳本，攻擊者可獲取用戶的敏感信息如 Cookie、SessionID 等，進而危害數據安全。
在 web 前端方面，可以理解爲在前端進行代碼植入，當用戶瀏覽這個網站的時候，這段代碼就會自動執行，舉個例子：
如果在一個存在XSS漏洞的網站評論區或者表單中填寫代碼：
<script>
window.location.href = "https://raaabbit.github.io"
</script>
那麼，當評論成功提交，其他用戶在瀏覽頁面的時候成功加載了這段代碼，他們就會來到我的博客（尷尬而又不失禮貌的微笑
除了這樣干擾其他用戶使用之外，還可以進行竊取信息這樣的操作，比如獲取用戶在當前頁面下的cookie，然後發送到自己的服務器上，攻擊者就得到了用戶的“鑰匙”，進而可以冒充用戶進行操作，竊取財產或者傳播不良信息等等
XSS攻擊的種類
在這裏將XSS攻擊分爲三種：
- 存儲型XSS
- 反射性XSS
- DOM型XSS
存儲型XSS
這種XSS攻擊是持久型的，因爲惡意代碼一般都被存儲在了數據庫中，比如上面例子中的評論
攻擊者將惡意代碼提交到目標網站的數據庫中
用戶打開目標網站時，網站服務端將惡意代碼從數據庫取出，拼接在 HTML 中返回給瀏覽器
用戶瀏覽器接收到響應後解析執行，混在其中的惡意代碼也被執行
惡意代碼竊取用戶數據併發送到攻擊者的網站，或者冒充用戶的行爲，調用目標網站接口執行攻擊者指定的操作
反射型XSS
這種XSS攻擊的代碼並不存儲在數據庫中，而是存儲在構造好的URL中，比如下面這樣：
http://xxx?keyword="><script>alert('XSS');</script>
- 攻擊者構造出特殊的 URL，其中包含惡意代碼
- 用戶打開帶有惡意代碼的 URL 時，網站服務端將惡意代碼從 URL 中取出，拼接在 HTML 中返回給瀏覽器
- 用戶瀏覽器接收到響應後解析執行，混在其中的惡意代碼也被執行
- 惡意代碼竊取用戶數據併發送到攻擊者的網站，或者冒充用戶的行爲，調用目標網站接口執行攻擊者指定的操作
和上面的存儲型XSS不同，這樣的存儲方式並不是持久性的，同時作用範圍也遠遠小於存儲型XSS，攻擊者要通過各種手段誘導用戶點擊惡意鏈接
DOM型XSS
這種攻擊方式也需要攻擊者構造出特殊的 URL，其中包含惡意代碼，並且誘導用戶點擊
用戶瀏覽器接收到響應後解析執行，前端 JavaScript 取出 URL 中的惡意代碼並執行。
惡意代碼竊取用戶數據併發送到攻擊者的網站，或者冒充用戶的行爲，調用目標網站接口執行攻擊者指定的操作。
注意： 和前面兩種攻擊方式的區別在於取出和執行惡意代碼由瀏覽器端完成，屬於前端 JavaScript 自身的安全漏洞，而其他兩種 XSS 都屬於服務端的安全漏洞。
防護XSS
基本解決方法：轉義
一般的腳本都會被包裹在 script 標籤中，我們只要對它進行轉義：
<div>
<!-- 轉義前 -->
<script>alert('震驚！受到了XSS攻擊！')</script>
</div>
<div>
<!-- 轉義後 -->
<script>alert('震驚！受到了XSS攻擊！')</script>
</div>
轉義後呈現在頁面上的時候就是這個樣子：
我們可以看到，轉義後的代碼只是一段文本，轉義前的代碼是一個腳本
也就是說，在一個web應用的防護中，當有用戶的輸入場景的時候，要進行轉義，避免這樣造成的XSS攻擊（或者用戶無意造成的污染）；在解析請求到的數據/資源的時候，也應當進行初步的過濾，這也就是我們經常聽到的不建議使用innerHTML的原因
進階解決方案
But 不要以爲進行了轉義就萬事大吉了，因爲XSS的注入方式很多：
- 在 HTML 中內嵌的文本中，惡意內容以 script 標籤形成注入。
- 在內聯的 JavaScript 中，拼接的數據突破了原本的限制（字符串，變量，方法名等）。
- 在標籤屬性中，惡意內容包含引號，從而突破屬性值的限制，注入其他屬性或者標籤。
- 在標籤的 href、src 等屬性中，包含 javascript: 等可執行代碼。
- 在 onload、onerror、onclick 等事件中，注入不受控制代碼。
如此這般我們需要多方面進行防禦
1.使用輸入過濾：對用戶提交的數據進行有效性驗證，僅接受指定長度範圍內並符合我們期望格式的的內容提交，阻止或者忽略除此外的其他任何數據。比如：電話號碼必須是數字和中劃線組成，而且要設定長度上限。過濾一些些常見的敏感字符，例如：< > ‘ “ & # \ javascript expression “” “onfocus”；過濾或移除特殊的Html標籤， 例如: