JavaScript 關於 XSS 攻擊
前言
關於 XSS 攻擊是每一位前端工程師必須知道的技術之一，這邊我也來做一下筆記何謂 XSS 攻擊
XSS
XSS 全名是 Cross-Site Scripting，又稱跨網站指令碼攻擊，通常問題都是出在 JavaScript 上，比較常見的幾種手法就以下
- 跳轉到別人家
- 登入頁面帳號密碼送到別人伺服器去
等等
那麼 XSS 又概略分為三種類型
持續型 XSS (又稱儲存型 XSS)
- 持續型 XSS 你可以簡單的來想就是在你的首頁上塞入一段
while(i < 10){ alert('哈哈，你被XSS攻擊囉!'); i++ }，然後持續性的干擾你，但是這邊要注意是這一個 XSS 攻擊是儲存於你的資料庫內，所以在新增資料庫的時候要注意使用者所填入的資訊，否則這個 XSS 攻擊將會一直持續攻擊
- 持續型 XSS 你可以簡單的來想就是在你的首頁上塞入一段
反射型 XSS
- 反射型通常發生伺服器將資料往前傳時導致的，最常發生的狀況就是 GET，前端向後端請求資料時，後端並沒有檢驗資料是否正常就直接往前端吐，那麼就會出現 XSS 攻擊，因為有可能往前吐的資料是下面這種
1 | <script>alert('哈哈，你被XSS攻擊囉!');</script> |
基於 DOM 的 XSS
- 至於 DOM 的 XSS 攻擊簡單來講就是在某個 DOM 節點輸入 JavaScript 程式碼，例如:
1
<img src="#" onerror="alert('哈哈，你被XSS攻擊囉!');">
(剛好公司最近被 DOM XSS 攻擊)
防範方法
通常防範 XSS 攻擊都會是前後端一起配合防範，以前端做舉例，使用 innerHTML 的地方就必須格外的小心，如果輸入的地方可能會有 XSS 攻擊那麼就使用 createElement 來製作。
那麼這邊也補上這兩個語法的特性說明
- innerHTML
- 方法:組完字串後，傳進語法進行渲染
- 優點:效能快
- 缺點:資安風險，也就是 XSS 攻擊
- 特性:會清空HTML標籤
- createElement
- 方法:以DOM節點來處理
- 優點:安全性高
- 缺點:效能差