XSS - ianchen0119/About-Security GitHub Wiki

跨站點腳本（XSS）攻擊是一種 Injection 攻擊，可將惡意程式碼注入到原本可被信任的網站中。

• 反射型 / Reflected XSS

  案例參考: ZD-2021-00175

  Reflected XSS 是指由網頁後端直接嵌入由前端使用者所傳送過來的內容造成的攻擊，所以 Reflected XSS 並不會影響到後端資料庫。一般來說， Reflected XSS 會搭配釣魚網站或是惡意郵件竊取使用者的資料。

• 儲存型 / Stored XSS

  案例參考: ZD-2021-00009

  如果惡意代碼會儲存到後端資料庫中，並且惡意代碼是會在客戶端的瀏覽器被執行的，這類的 XSS 就屬於 Stored XSS。

• DOM Based XSS

  案例參考: ZD-2020-01067

  當網頁中的 JS 程式碼會因為使用者輸入特定資料對 DOM 操作時，如果開發者沒有對輸入的資料做篩選以及處理，就有可能讓惡意程式碼/元件被植入到網站中。

  let btn = document.querySelector('#btn');
  btn.addEventListener(()=>{
    let value = document.querySelector('#input');
    btn.innerHTML = value;
  })

  不過， DOM Based XSS 需要駭客在客戶電腦前手動操作，感覺很難造成實質性傷害(?)

• <svg/onload=alert(1)>
• <img src=# onerror=alert(1)>
• <input onfocus=alert(1)>

• <a href="javascript:alert(1)">Click Me</a>
• location.replace("javascript:alert(1)");

以 React.js 來說，都會使用 {} 來做 data-binding 因此對於輸入有基本的跳脫機制，防止 XSS 但對於動態屬性綁定（dynamic attribute values）並沒有這項保護，因此有可能產生 XSS

example:

<form action={data}></form>

早期瀏覽器對於 XSS 的防禦不夠完全， Web developer 可以使用 X-XSS-Protection Header 加強安全性。 現代瀏覽器對於 XSS 攻擊都有基本的防範，不過， Web developer 仍需對 XSS 多做防範(像是引入跳脫機制)。 以 R-XSS 與 Stored XSS 來看，需要從後端對特定字元做出過濾:

至於 DOM Based XSS ，可以將上面有弱點的程式碼替換成:

let btn = document.querySelector('#btn');
btn.addEventListener(()=>{
  let value = document.querySelector('#input');
  btn.innerText = value;
})

讓使用者輸入的內容被網站解讀成純文字，就可以避免掉 DOM Based XSS 。