JavaScript 關於 XSS 攻擊

前言

關於 XSS 攻擊是每一位前端工程師必須知道的技術之一，這邊我也來做一下筆記何謂 XSS 攻擊

XSS

XSS 全名是 Cross-Site Scripting，又稱跨網站指令碼攻擊，通常問題都是出在 JavaScript 上，比較常見的幾種手法就以下

• 跳轉到別人家
• 登入頁面帳號密碼送到別人伺服器去
  等等

那麼 XSS 又概略分為三種類型

• 持續型 XSS (又稱儲存型 XSS)

  • 持續型 XSS 你可以簡單的來想就是在你的首頁上塞入一段 while(i < 10){ alert('哈哈，你被XSS攻擊囉!'); i++ } ，然後持續性的干擾你，但是這邊要注意是這一個 XSS 攻擊是儲存於你的資料庫內，所以在新增資料庫的時候要注意使用者所填入的資訊，否則這個 XSS 攻擊將會一直持續攻擊

• 反射型 XSS

  • 反射型通常發生伺服器將資料往前傳時導致的，最常發生的狀況就是 GET，前端向後端請求資料時，後端並沒有檢驗資料是否正常就直接往前端吐，那麼就會出現 XSS 攻擊，因為有可能往前吐的資料是下面這種

<script>alert('哈哈，你被XSS攻擊囉!');</script>

• 基於 DOM 的 XSS
  • 至於 DOM 的 XSS 攻擊簡單來講就是在某個 DOM 節點輸入 JavaScript 程式碼，例如:

<img src="#" onerror="alert('哈哈，你被XSS攻擊囉!');">

(剛好公司最近被 DOM XSS 攻擊)

防範方法

通常防範 XSS 攻擊都會是前後端一起配合防範，以前端做舉例，使用 innerHTML 的地方就必須格外的小心，如果輸入的地方可能會有 XSS 攻擊那麼就使用 createElement 來製作。

那麼這邊也補上這兩個語法的特性說明

• innerHTML
  • 方法:組完字串後，傳進語法進行渲染
  • 優點:效能快
  • 缺點:資安風險，也就是 XSS 攻擊
  • 特性:會清空HTML標籤
• createElement
  • 方法:以DOM節點來處理
  • 優點:安全性高
  • 缺點:效能差

參考文獻

跨網站指令碼

【網頁安全】給網頁開發新人的 XSS 攻擊 介紹與防範

前端筆記(三) 前端如何防範XSS，淺談JS中各種寬高屬性