Beyond XSS 1-1 ~ 1-4

[MiJouHsieh]

《Beyond XSS》從 XSS 開始談前端資安 1-1~1-4

---

20241017 1-1~1-4

導讀人：Lois
筆記工：Mi

簡報

問題回顧
1-1 瀏覽器的安全模型

1. 網頁前端與後端執行環境的主要區別是什麼？為什麼前端無法像後端一樣執行檔案讀寫操作？

   有瀏覽器的安全限制。避免檔案讀取或上傳操作，避免他人透過瀏覽器對電腦操作，造成資安漏洞。

2. 瀏覽器的安全限制中，為什麼禁止前端程式碼主動讀寫本機檔案？這項限制的目的和潛在風險是什麼？

   1. 前端執行在瀏覽器(應用程式)，瀏覽器禁止前端程式碼去讀寫本機的檔案，除了 <input type=”file”> 使用者可上傳檔案，程式碼可讀寫檔案。
   2. 限制的目的:避免前端程式碼可以去操作電腦檔案。用戶本身沒有預期說，訪問一個網頁就被讀寫電腦中的檔案。潛在風險像是，隱私洩漏、密碼被讀取和惡意軟體植入。

3. 瀏覽器提供了一些系統 API，例如 Web Bluetooth API 和 MediaDevices API，但這些 API 的使用需要經過什麼樣的權限管理機制？

   取得使用者的同意。像是網頁要讀取地理資訊、麥克風和攝影機等的 API 使用，要先取得使用者的同意，才能進一步執行應用。

4. 同源政策（SOP）是什麼？舉例說明一個可能繞過同源政策的攻擊手法，並解釋瀏覽器如何進行防禦。

   1. 一種安全規範的限制，限制網頁只能存取同源的資源。同源是要符合三者，包含 protocol、domain 和 port。像是，A網頁存取不到B網頁的內容跟網址。
   2. 繞過同源政策的攻擊手法，比如一個頁面包含<iframe>，而<iframe>的 src屬性可以放其他網頁的網址，把<iframe>的網址做重新導向到空白頁面，由於會和加載它(空白頁面)的頁面(當前頁面)同源，所以<iframe>的網址就會和當前頁面同源，因此就可以繞過同源政策。接著就可以讀取<iframe>的歷史紀錄，可查到<iframe>原來的網址，也就能因此查到不同來源的網頁。
   3. Site Isolation 的安全措施。Chrome 瀏覽器為了要確保透過不同來源，像是圖片或<iframe>來嵌入不同網頁的方式，用不同 Process 來處理。比如。A網頁有嵌入<iframe> 的B網頁，這兩個網頁有各自的 Process 做隔離，所以就會在不同記憶體，無法取得彼此的資料。

5. RCE（Remote Code Execution）遠端程式碼執行的攻擊是什麼？簡述一個 RCE 攻擊案例，並說明這類攻擊的風險。

   打開網頁就能駭入電腦。利用 V8 引擎最佳化程式碼的 bug ，植入惡意程式碼來執行任意程式碼，達到攻擊目的。

---

1-2 前端資安還是得從 XSS 開始談起才對味

1. XSS 的全名是什麼？為什麼不叫 CSS？

   Cross-site scripting，不叫 CSS 是因為已是 Cascading Style Sheets 的縮寫，因此取叫 XSS。

2. 什麼是 Self-XSS？請舉出一個例子。

   1. 打開網頁開發者工具，貼上一段 JavaScript 程式碼。
   2. 在網站的設定頁面編輯電話欄位，只有使用者自己看的到，若打開設定可看見alert方法彈出視窗，若有其他漏洞，別人透過漏洞傳入其他<script>到設定頁面的欄位，當點擊或送出此欄位，就會觸發XSS。

3. 當一個網站發生 XSS 漏洞時，攻擊者可以做什麼事？請舉例。

   攻擊者可以把腳本植入到網站上面，使用 query string 方式帶有alert，或發送電子郵件攻擊server、竊取帳號密碼、串改網頁內容、竊取 cookie 的驗證token、劫持網頁。

4. 為什麼很多網站在改密碼時需要再輸入一次現有密碼？

   駭客若取得網頁中 localStorage 存的 access token 的話，就能以使用者的身分去打後端提供的更新密碼 API ，若此 API 需要輸入現有密碼和新密碼，因為駭客不知現有密碼，所以無法打 API 去更新密碼，而拿不到使用者帳號。

5. 什麼是 Blind XSS？它和傳統 XSS 有什麼不同？

   1. Blind XSS 是看不見的攻擊， Blind XSS 被觸發時看不到效果，因為攻擊腳本放在後端的某個位置去執行，所以不會在瀏覽器中顯示攻擊效果，所以不易被察覺到。
   2. 傳統 XSS ，在前端做攻擊，會馬上看到效果。

---

1-3 再多了解 XSS 一點點

1. 為什麼在 innerHTML 的情境下，使用 <script> 標籤無法發動 XSS 攻擊？還有什麼其他方式可以執行 JavaScript？

   1. innerHTML 的行為設計不會執行程式碼
   2. event handler: <button onclick> 或 <img onerror>

2. 除了 <script> 標籤之外，請舉例說明一個可以利用事件處理器（如 onerror）來執行 JavaScript 的 XSS payload，並解釋其運作方式。

   <svg onload="alert(1)"> onload 是一個事件屬性，用來指定當元素完全加載後觸發的 JavaScript 函式，觸發 XSS。

3. 當使用者輸入被注入到 HTML 內的屬性中時，攻擊者如何跳脫屬性並插入新的 HTML 標籤？請舉一個 payload 的例子。

document.querySelector('#content').innerHTML = `
  <div class="${clazz}">
     Demo
  </div>
‵
const clazz="><img src=not_exist onerror="alert(1)">

//跳脫class屬性並插入新 HTML 標籤
  <div class=""><img src=not_exist onerror="alert(1)">">
    Demo
  </div>

在template literal 中帶入clazz 變數的值，先用 ”> 關閉 class 屬性和 <div>，接著可以插入新的 HTML 標籤 <img>，原本<div> 的 "> 就會變成字元。

4. 為什麼不應該寫出如下的程式碼？攻擊者如何利用這種程式碼發動 XSS 攻擊？

  <div class=${clazz}>
    Demo
  </div>

沒有限定字串的範圍，屬性值沒有用單引號或雙引號包住，若值包含特定字元 <>”’，可能會讓瀏覽器解析為新增的 HTML 標籤和屬性，若帶有惡意 payload 就會觸發 XSS。

若 clazz 的值為 ”” onload=”alert(1)”，帶入屬性就會是

<div class=”” onload=”alert(1)”>
  Demo
</div>

5. 在 JavaScript 的 template string 中，如何利用 ${} 來達成 XSS 攻擊？請舉一個可能的範例並說明其運作原理。

在模板字串中，${} 用來插入變數。這裡的 clazz 變數被插入到 HTML <div> 的 class 屬性中。
clazz 變數的值是 test' onmouseover='alert(1)，這包含 class 的名稱，還包括一個 JavaScript 事件 onmouseover 和其內嵌的惡意程式碼 alert(1)。

document.querySelector('#content').innerHTML = `
  <div class=${clazz}>
    Demo
  </div>
 `
  const clazz =`test' onmouseover='alert(1)`

onmouseover='alert(1)' 成功注入了 onmouseover 事件，當用戶將滑鼠移過這個 <div> 時，瀏覽器就會執行 alert(1)，彈出一個彈窗，形成 XSS 攻擊的例子。

<div class='test' onmouseover='alert(1)'>
   Demo
 </div>

---

1-4 危險的 JavaScript：偽協議

1. 什麼是 javascript: 偽協議？它與其他協議（如 HTTP、FTP）有什麼不同？

   HTTP、FTP 為真協議，會建立網路連線做資料的傳輸。
   偽協議作用為網頁的內容操作， javascript: 偽協議是可以執行 JavaScript，比如，<a href="javascript:void(0)">Link</a> 防止頁面跳轉。

2. 如何利用 javascript: 偽協議來執行 JavaScript 程式碼 ?
   javascript: 偽協議後面接 JavaScript 程式碼

   1. <a href="javascript:alert(1)">Link</a>
   2. <iframe src="javascript:alert(1)"></iframe >

3. 在使用 <iframe> 標籤時，如果網站允許嵌入第三方連結，開發者應如何避免 XSS 漏洞？

   1. 檢查網址的格式和 protocol 是否為 http:// 或 https:// 開頭
   2. 使用JavaScript 解析網址，以 protocol 判斷是否為合法的協議
   3. 可使用套件，如 sanitize-url，或框架寫的 RegExp

4. 為什麼只檢查網址是否以 javascript: 開頭或試圖移除 javascript 這個字串，無法有效防止 XSS 攻擊？

   在<a> href 屬性的內容，可以經過編碼。j 編碼為 &#106 、 : 編碼為:
<a href=”&#106avascript&colon;alert(1)”>
   HTML屬性的內容，可以經過編碼，所以可以繞過用字串比對有無 javascript的檢查。

5. 當開發者在處理頁面跳轉（如重新導向登入前的目標頁面）時，應該如何防止 javascript: 偽協議帶來的安全風險？

   1. 使用JavaScript new URL() 解析網址，以 protocol 判斷是否為合法的協議
   2. 連結加上屬性 target=“_blank”，以另開新網頁的方式，若網址有含 javascript: 偽協議會轉為無效網頁，且瀏覽器不執行 JavasScript。

---

討論
Q: 目前認識的漏洞可以被前端框架處理掉，有無在實際工作上做處理，還是由前端就可以解決?

Lois： React 本身可以幫助解決部分前端的安全問題。儘管如此，第三方套件仍然有可能存在安全風險。專案中，有用一個第三方套件來顯示從資料庫中讀取的 HTML，但目前並未對這些資料進行過濾，因此可以跳出 alert，這個問題尚未修正。

Steven： CKEditor 5 自帶內容過濾功能，如果用戶輸入了 <script> 之類的標籤，處理後這些內容將不會被送出或顯示。不過，這樣做會有一些麻煩，因為我們需要為客戶提供部分客製化的輸入功能。

Sam： 在發送 request 之前，應該先對資料做過濾處理，因為即使 API 回應成功，後端回傳的資料也不一定是安全的。如果駭客篡改了某個欄位的內容，而前端沒有進行驗證就直接將資料渲染到頁面上，這樣可能會產生很大的安全風險。

前端應當驗證與消毒所有來自使用者輸入或後端返回的資料，並且可以利用套件如 DOMPurify 來幫助進行這些處理，對資料進行解構賦值，確保資料的安全性。

---

補充

• Shirley：在終端機使用curl 命令 ，可以去解析短網址，避免被攻擊。
  

• Steven：CKEditor
  CKEditor 是一個常用的富文本編輯器，常被嵌入到網頁中讓使用者能夠編輯格式化的文字。有內建一些過濾機制來避免直接插入 <script> 這樣的惡意代碼。

• Yo0：Web Security Dojo
  Web Security Dojo 是一個虛擬機器環境，專門用來學習和練習網頁應用程式的安全測試。平台提供了多種工具和漏洞應用，讓使用者可以模擬不同的攻擊場景，其中包括 XSS（跨站腳本攻擊）等常見的網頁漏洞，因此適合用來進行 XSS 練習。