---
tags: 程式導師計劃, 異世界網站挑戰, Huli, Minw
---

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

{%hackmd BJrTq20hE %}
<br>

中集在此 : [r3:0 異世界網站挑戰 破關筆記(中)](https://hackmd.io/@dingdingdingliu/rka3aMoi_)
下集在此 : [r3:0 異世界網站挑戰 破關筆記(下)](https://hackmd.io/@dingdingdingliu/ryEzAmjju)

<br>

程式導師計劃來到第十週，這週一邊防疫一邊複習一邊來玩 Huli 大與助教 minw 設計的 [異世界網站挑戰遊戲](https://r30challenge.herokuapp.com/) ，以下就是開始到第五關的破關筆記 :
<br>

### 遊戲開始
<br>

<br>
<br>

### 第 0 關


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

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

<br>
<br>

### 第 1 關


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

怪物的名字 : 100101001001100001110。
比較不常見的十八進制 : [進制轉換](http://www.kwuntung.net/hkunit/base/base.php)。

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

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

<br>
<br>

### 第 2 關

<br>

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

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

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

<br>
<br>

### 第 3 關


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

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

<br>
<br>

### 第 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!](https://r30challenge.herokuapp.com/lv5.php?token=csspersona!)**

<br>
<br>

### 第 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**

<br>
<br>

有興趣繼續往下的話，請參考以下:
中集在此 : [r3:0 異世界網站挑戰 破關筆記(中)](https://hackmd.io/@dingdingdingliu/rka3aMoi_)
下集在此 : [r3:0 異世界網站挑戰 破關筆記(下)](https://hackmd.io/@dingdingdingliu/ryEzAmjju)