r3:0 異世界網站挑戰 破關筆記(上)

中集在此 : r3:0 異世界網站挑戰 破關筆記(中)
下集在此 : r3:0 異世界網站挑戰 破關筆記(下)

程式導師計劃來到第十週，這週一邊防疫一邊複習一邊來玩 Huli 大與助教 minw 設計的 異世界網站挑戰遊戲 ，以下就是開始到第五關的破關筆記 :

遊戲開始

第 0 關

第 0 關就是熱身關吧，告訴你這個遊戲就是找到 token 用 query string 的方式帶進網址裡就可以到下一關了，網址的關卡數字當然也是要換成下一關的喔!

前往下一關 :
https://r30challenge.herokuapp.com/lv1.php?token=r30:start

第 1 關

看到怪物的名字只有 1 & 0，就是除了十進位之外最熟悉的二進位了吧，這關的難度在於十八進位的轉換比較少見，我找了好久啊。

怪物的名字 : 100101001001100001110。
比較不常見的十八進制 : 進制轉換。

p.s : 看到轉換後的 token 我笑了出來

前往下一關 :
https://r30challenge.herokuapp.com/lv2.php?token=bad18

第 2 關

「井中的水面一片黑黝，跟瀏覽器一樣」

看到這句話，就立刻聯想到 綜合能力測驗遊戲。
( 寫在沒玩過遊戲的人之前 : 進去後，你應該會揉揉眼睛想重新整理頁面。)
既然這樣，就打開最親切的 Devtool 來看看吧。
現在看到有隱藏感的問題，就會想先看看 CSS 跟 Element 有沒有一些取名為 "hidden"、"hide" 之類的 class 或 CSS 內容，再度重現了語意化的重要性。
在 lv2.css 中果然看到了 .hidden{ color: #000; }，就是他了，然後回到 Element 看到了 class 標籤是 hidden 的內容，找到 token。

前往下一關 :
https://r30challenge.herokuapp.com/lv3.php?token=divsurprise

第 3 關

再度一片黑，然後 Element 裡面再找一下，發現了另外一個用 { } 包起來的東西被註解掉了，就是他!

前往下一關 :
https://r30challenge.herokuapp.com/lv4.php?token=commentfaker

第 4 關

已經給你了是甚麼意思? 在 Devtool 裡到處看看，找到了 lv4.css 的內容，才和 「替身攻擊」連結起來。

.special::after {
  content: '{tRaNspar3nT}';
  margin-left: -160px;
  background-color: #000;
}

原來是正確的 token 內容被 ::after 偽元素給蓋住了，呈現了畫面中的樣子。回到 Element 找到 class 是「special」的元素，看到了原本的內容，拿到 token。

前往下一關 :
https://r30challenge.herokuapp.com/lv5.php?token=csspersona!

第 5 關

Game Over ? 但在轉到這頁前，我有先看到一個頁面閃了一下才跳轉過來，加上提示，原來是跳轉的問題。

知道是跳轉問題當然就可以用偷吃步，在跳轉之前迅速按下 ESC 強制結束跳轉，這樣就可以看到 token 囉。

我另外也試了用 curl 打開 https://r30challenge.herokuapp.com/lv5.php?token=csspersona! 剛剛這個破關網址，直接打開頁面，在 html 架構裡發現了 token。

 <p> {windowhack} </p>

好像還是沒解開跳關的把戲…之後再研究一下可以回來補齊!

前往下一關 :
https://r30challenge.herokuapp.com/lv6.php?token=windowhack

有興趣繼續往下的話，請參考以下:
中集在此 : r3:0 異世界網站挑戰 破關筆記(中)
下集在此 : r3:0 異世界網站挑戰 破關筆記(下)