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 攻擊,因為有可能往前吐的資料是下面這種
      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節點來處理
  • 優點:安全性高
  • 缺點:效能差

參考文獻

跨網站指令碼

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

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