一日圖書館管理員：HTTP Challenge

[debbygigigi]

由 @huli 大大開發的小遊戲，因為覺得概念實在太有趣了，就來玩玩看並做個簡單的紀錄。

主要會練習到 GET POST DELETE PATCH 這四種常見的方法，還有 query string 的運用，以及 Authoration 驗證。

除了 GET 方法會直接在網頁的 URL 輸入之外，其他的方法我會透過 Postman 來幫忙。

那麼就開始吧！遊戲網址

Lv0：熱身

https://lidemy-http-challenge.herokuapp.com/start

安安，歡迎來到 Lidemy HTTP challenge。

這裡一共有 10 道關卡，每一關的網址皆為 /lvX，X 即為關卡的數字。
但只知道網址是沒有用的，需要搭配正確的 token 才能順利進入關卡，傳入 token 的方式為 query string，例如 /lv1?token=xxx。

另外，為了讓你方便辨別這是 token，token 的內容一定是用一個大括弧刮起來的字串。
每一關都會有提示，只要按照提示照著做，就能拿到前往下一關的 token。

準備好了嗎？

第一關的 token 為：{GOGOGO}

給第一次進來的朋友的遊戲解說。

Lv1：GET

https://lidemy-http-challenge.herokuapp.com/lv1?token={GOGOGO}

啊...好久沒有看到年輕人到我這個圖書館了，我叫做 lib，是這個圖書館的管理員。
很開心看到有年輕人願意來幫忙，最近圖書館剛換了資訊系統，我都搞不清楚怎麼用了...這是他們提供給我的文件，我一個字都看不懂，但對你可能會有幫助：https://gist.github.com/aszx87410/3873b3d9cbb28cb6fcbb85bf493b63ba

你叫做什麼名字呢？用 GET 方法跟我說你的 name 叫做什麼吧！

直接在 query string 上加上 name={你的名字}

https://lidemy-http-challenge.herokuapp.com/lv1?token={GOGOGO}&name=Debby

啊...原來你叫 Debby 啊！下一關的 token 是 {HellOWOrld}

Lv2：還是 GET

https://lidemy-http-challenge.herokuapp.com/lv2?token={HellOWOrld}

我前陣子在整理書籍的時候看到了一本我很喜歡的書，可是現在卻怎麼想都想不起來是哪一本...
我只記得那本書的 id 是兩位數，介於 54~58 之間，你可以幫幫我嗎？
找到是哪一本之後把書的 id 用 GET 傳給我就行了。

一樣是 GET，只要在 query string 加上 id，後面的數字就是 54~58 選一個，試到對為止。

如果不對的話，會回應 好像不是這本書耶...，最後試出來是 56。

https://lidemy-http-challenge.herokuapp.com/lv2?token={HellOWOrld}&id=56

啊！就是這本書，太謝謝你了。下一關的 token 為：{5566NO1}

5566NO1... 作者私心？

Lv3：POST

https://lidemy-http-challenge.herokuapp.com/lv3?token={5566NO1}

真是太感謝你幫我找到這本書了！

剛剛在你找書的時候有一批新的書籍送來了，是這次圖書館根據讀者的推薦買的新書，其中有一本我特別喜歡，想要優先上架。
書名是《大腦喜歡這樣學》，ISBN 為 9789863594475。

就拜託你了。
新增完之後幫我把書籍的 id 用 GET 告訴我。

POST 的部分就請 Postman 來幫忙，參考一下 圖書館資訊系統 API 文件。

POST 的 url 是這樣：https://lidemy-http-challenge.herokuapp.com/books
Body 的格式選擇 x-www-form-urlencoded ，再把 token name ISBN 填入，按下 send

{"message":"新增成功","id":"1989"}

把 id 用 queryString 帶入

https://lidemy-http-challenge.herokuapp.com/lv3?token={5566NO1}&name=Debby&id=1989

這樣子讀者就能趕快看到這本新書了，謝謝！下一關的 token 為 {LEarnHOWtoLeArn}

Lv4：GET 的 query 練習

https://lidemy-http-challenge.herokuapp.com/lv4?token={LEarnHOWtoLeArn}

我翻了一下你之前幫我找的那本書，發現我記錯了...這不是我朝思暮想的那一本。
我之前跟你講的線索好像都是錯的，我記到別本書去了，真是抱歉啊。
我記得我想找的那本書，書名有：「世界」兩字，而且是村上春樹寫的，可以幫我找到書的 id 並傳給我嗎？

這是 GET 方法。

其中提到書名有「世界」兩字，根據 API 文件，使用參數 q 來查詢。
而雖然題目有提到作者是要「村上春樹」，但 API 並沒有提供篩選作者的方法，所以只能靠肉眼找出 id（試過 ?q=世界&author=村上春樹，結果相同）

https://lidemy-http-challenge.herokuapp.com/books?q=世界

[{"id":2,"name":"當我想你時，全世界都救不了我","author":"肆一","ISBN":"5549173495"},{"id":27,"name":"從你的全世界路過","author":"張嘉佳","ISBN":"8426216529"},{"id":79,"name":"世界末日與冷酷異境","author":"村上春樹","ISBN":"9571313408"},{"id":90,"name":"文學的40堂公開課：從神話到當代暢銷書，文學如何影響我們、帶領我們理解這個世界","author":"約翰．薩德蘭","ISBN":"7978376866"}]

找到 id 為 79

https://lidemy-http-challenge.herokuapp.com/lv4?token={LEarnHOWtoLeArn}&id=79

沒錯！這次我很確定了，就是這本！下一關的 token 為 {HarukiMurakami}

Lv5：delete 練習

https://lidemy-http-challenge.herokuapp.com/lv5?token={HarukiMurakami}

昨天有個人匆匆忙忙跑過來說他不小心捐錯書了，想要來問可不可以把書拿回去。
跟他溝通過後，我就把他捐過來的書還他了，所以現在要把這本書從系統裡面刪掉才行。

那本書的 id 是 23，你可以幫我刪掉嗎？

這次使用 DELETE 方法，

Lv6：Authorization 驗證

https://lidemy-http-challenge.herokuapp.com/lv6?token={CHICKENCUTLET}

我終於知道上次哪裡怪怪的了！

照理來說要進入系統應該要先登入才對，怎麼沒有登入就可以新增刪除...
這太奇怪了，我已經回報給那邊的工程師了，他們給了我一份新的文件：https://gist.github.com/aszx87410/1e5e5105c1c35197f55c485a88b0328a。

這邊是帳號密碼，你先登入試試看吧，可以呼叫一個 /me 的 endpoint，裡面會給你一個 email。
把 email 放在 query string 上面帶過來，我看看是不是對的。

帳號：admin
密碼：admin123

這次多了一個新版的 API文件

如果我直接 GET https://lidemy-http-challenge.herokuapp.com/v2/me ，會給我一個 Invalid Authorization token 的錯誤

在 Postman 上，Authorization 選擇 Basic Auth，username 和 password 就填上題目寫的帳號跟密碼

將 email 放在 queryString

https://lidemy-http-challenge.herokuapp.com/lv6?token={CHICKENCUTLET}&email=lib@lidemy.com

對對對，就是這個，這樣才對嘛！下一關的 token 為 {SECurityIsImPORTant}

Lv7：Authorization 版的 DELETE

https://lidemy-http-challenge.herokuapp.com/lv7?token={SECurityIsImPORTant}

那邊的工程師說系統整個修復完成了，剛好昨天我們發現有一本書被偷走了...
這本書我們已經買第五次了，每次都被偷走，看來這本書很熱門啊。
我們要把這本書從系統裡面刪掉，就拜託你了。

對了！記得要用新的系統喔，舊的已經完全廢棄不用了。

書的 id 是 89。

一樣是 DELETE 方法，不同的是，這次要加上剛剛的 Authorization

Lv8：PATCH 更新

https://lidemy-http-challenge.herokuapp.com/lv8?token={HsifnAerok}

我昨天在整理書籍的時候發現有一本書的 ISBN 編號跟系統內的對不上，仔細看了一下發現我當時輸入系統時 key 錯了。
哎呀，人老了就是這樣，老是會看錯。

那本書的名字裡面有個「我」，作者的名字是四個字，key 錯的 ISBN 最後一碼為 7，只要把最後一碼改成 3 就行了。
對了！記得要用新的系統喔，舊的已經完全廢棄不用了。

首先，先找到那本書，使用 GET

https://lidemy-http-challenge.herokuapp.com/v2/books?q=我

[{"id":2,"name":"當我想你時，全世界都救不了我","author":"肆一","ISBN":"5549173495"},{"id":3,"name":"我殺的人與殺我的人","author":"東山彰良","ISBN":"9262228645"},{"id":7,"name":"你已走遠，我還在練習道別","author":"渺渺","ISBN":"3722233689"},{"id":9,"name":"你是我最熟悉的陌生人","author":"Middle","ISBN":"9765734253"},{"id":22,"name":"我輩中人：寫給中年人的情書","author":"張曼娟","ISBN":"7241428897"},{"id":38,"name":"我和我追逐的垃圾車","author":"謝子凡","ISBN":"7797349452"},{"id":57,"name":"我的櫻花戀人","author":"宇山佳佑","ISBN":"2947749939"},{"id":60,"name":"你走慢了我的時間","author":"張西","ISBN":"8811544334"},{"id":66,"name":"我是許涼涼","author":"李維菁","ISBN":"8389193464"},{"id":72,"name":"日日好日：茶道教我的幸福15味【電影書腰版】","author":"森下典子","ISBN":"9981835427"},{"id":90,"name":"文學的40堂公開課：從神話到當代暢銷書，文學如何影響我們、帶領我們理解這個世界","author":"約翰．薩德蘭","ISBN":"7978376866"},{"id":95,"name":"我想吃掉你的胰臟【電影珍藏版】","author":"住野夜","ISBN":"2615985356"},{"id":100,"name":"慢情書：我們會在更好的地方相遇嗎？","author":"林達陽","ISBN":"7418527246"}]

根據題目描述，作者的名字是四個字、ISBN 最後一碼為 7 的應該是這本：

{"id":72,"name":"日日好日：茶道教我的幸福15味【電影書腰版】","author":"森下典子","ISBN":"9981835427"}

接著使用 PATCH，因為更新也要傳遞資料，所以方法類似於 POST 會需要帶資料，而要帶的資料就是想要更新的資料，例如這個題目就是將 ISBN 參數帶上欲更改的

Lv9：特殊的 Header

https://lidemy-http-challenge.herokuapp.com/lv9?token={NeuN}

API 文件裡面有個獲取系統資訊的 endpoint 你記得嗎？
工程師跟我說這個網址不太一樣，用一般的方法是沒辦法成功拿到回傳值的。

想要存取的話要符合兩個條件：
1. 帶上一個 X-Library-Number 的 header，我們圖書館的編號是 20
2. 伺服器會用 user agent 檢查是否是從 Safari 送出的Request，不是的話會擋掉

順利拿到系統資訊之後應該會有個叫做 version 的欄位，把裡面的值放在 query syring 給我吧。

用一般的方法是沒辦法成功拿到回傳值的。

我們先試試看用一般的方法會怎樣，很單純的使用 GET 與 Authorization：

GET /v2/sys_info HTTP/1.1
Host: lidemy-http-challenge.herokuapp.com
Authorization: Basic YWRtaW46YWRtaW4xMjM=
Cache-Control: no-cache

會得到 Invalid Library Number 這樣的錯誤。

根據題目，我們在 header 加上 X-Library-Number 和 user-agent

得到 version 了！

https://lidemy-http-challenge.herokuapp.com/lv9?token={NeuN}&version=1A4938Jl7

限制這麼多都被你突破了，真有你的。要不要考慮以後來我們圖書館當工程師啊？下一關的 token 為 {duZDsG3tvoA}

Lv10：最終關－猜數字

https://lidemy-http-challenge.herokuapp.com/lv10?token={duZDsG3tvoA}

時間過得真快啊，今天是你在這邊幫忙的最後一天了。

我們來玩個遊戲吧？你有玩過猜數字嗎？

出題者會出一個四位數不重複的數字，例如說 9487。
你如果猜 9876，我會跟你說 1A2B，1A 代表 9 位置對數字也對，2B 代表 8 跟 7 你猜對了但位置錯了。

開始吧，把你要猜的數字放在 query string 用 num 當作 key 傳給我。

居然是幾Ａ幾Ｂ當結尾！那這就不破梗了，讓觀眾自己猜。
不過還是要放張過關圖🎉

[Rainbowrain-TW]

lv8 的 token 倒著看就會發現梗了 XD

[aszx87410]

話說後面新增了幾關，要不要繼續挑戰XD

[debbygigigi]

@aszx87410 沒問題😂等我更新！

[YMont]

LV11 : Origin 請求來源

https://lidemy-http-challenge.herokuapp.com/lv11?token={IhateCORS}

嘿！很開心看到你願意回來繼續幫忙，這次我們接到一個新的任務，要跟在菲律賓的一個中文圖書館資訊系統做串連
這邊是他們的 API 文件，你之後一定會用到：https://gist.github.com/aszx87410/0b0d3cabf32c4e44084fadf5180d0cf4。

現在就讓我們先跟他們打個招呼吧，只是我記得他們的 API 好像會限制一些東西就是了...

先開啟API文件的網址

https://gist.github.com/aszx87410/0b0d3cabf32c4e44084fadf5180d0cf4

跟菲律賓圖書館打個招呼

https://lidemy-http-challenge.herokuapp.com/api/v3/hello

然後會得到這樣的錯誤

您的 origin 不被允許存取此資源，請確認您是從 lidemy.com 送出 request。

解法
這邊有偷看一下Huli大大彩蛋的提示，
故嘗試在Postman Headers上key:Origin、value:lidemy.com
(補充: 這邊我理解的是server僅是需要知道client的Origin，故需要提供此資訊；
故使用Access-Control-Request-Headers這個header一樣是解不開的喔~)

Hello! 下一關的 token 為 {r3d1r3c7}

LV12 : Redirect 轉址

https://lidemy-http-challenge.herokuapp.com/lv12?token={r3d1r3c7}

打完招呼之後我們要開始送一些書過去了，不過其實運送沒有你想像中的簡單，不是單純的 A 到 B 而已
而是像轉機那樣，A 到 C，C 才到 B，中間會經過一些轉運點才會到達目的地...算了，我跟你說那麼多幹嘛

現在請你幫我把運送要用的 token 給拿回來吧，要有這個 token 我們才能繼續往下一步走

前往取得Token

https://lidemy-http-challenge.herokuapp.com/api/v3/deliver_token?token={r3d1r3c7}

我已經把運送要用的 token 給你囉，請你仔細找找

執行完，網頁網址有變動 >> https://lidemy-http-challenge.herokuapp.com/api/v3/deliver_token_result
可能你會覺得怎麼什麼東西都沒有!?
別緊張，對著剛剛的網址按下F12 (Chrome DevTools)，先暫時擱置一旁

再次將剛剛帶有token的網址再貼一次(F12開起來的網頁別關掉)

https://lidemy-http-challenge.herokuapp.com/api/v3/deliver_token?token={r3d1r3c7}

回到Chrome DevTools的網頁(進入到Network選項裡，會看到如下的樣子)

對著第一筆資訊點擊兩下

Bingo

(補充: 找到MDN這篇後，有了一點解題的靈感)
(reference-Redirections in HTTP)

LV13 : Proxy 代理伺服器

https://lidemy-http-challenge.herokuapp.com/lv13?token={qspyz}

太好了！自從你上次把運送用的 token 拿回來以後，我們就密切地與菲律賓在交換書籍
可是最近碰到了一些小問題，不知道為什麼有時候會傳送失敗
我跟他們反映過後，他們叫我們自己去拿 log 來看，你可以幫我去看看嗎？
從系統日誌裡面應該可以找到一些端倪

取得log

https://lidemy-http-challenge.herokuapp.com/api/v3/logs

此 request 不是來自菲律賓，禁止存取系統資訊。

看一下hint XD

https://lidemy-http-challenge.herokuapp.com/lv13?token={qspyz}&hint=1

你有聽過代理伺服器 proxy 嗎？

有兩個重點，request來自菲律賓就可以取得log內容，要利用Proxy進行連線

找尋來自菲律賓的Proxy IP:116.50.163.67 Port:80

設定Proxy，開啟Google 設定的頁面

開啟proxy

重新整理Chrome頁面，得到Level14的token了

[
 { logType: 'token', value: '{SEOisHard}' }
]

(補充:Huli大大的彩蛋也有補充其他解法)

LV14 : 瀏覽器優化

https://lidemy-http-challenge.herokuapp.com/lv14?token={SEOisHard}

跟那邊的溝通差不多都搞定了，真是太謝謝你了，關於這方面沒什麼問題了！
不過我老大昨天給了我一個任務，他希望我去研究那邊的首頁內容到底是怎麼做的
為什麼用 Google 一搜尋關鍵字就可以排在第一頁，真是太不合理了

他們的網站明明就什麼都沒有，怎麼會排在那麼前面？
難道說他們偷偷動了一些手腳？讓 Google 搜尋引擎看到的內容跟我們看到的不一樣？

算了，還是不要瞎猜好了，你幫我們研究一下吧！

獲取首頁內容

https://lidemy-http-challenge.herokuapp.com/api/v3/index

一樣的內容，以HTML表達(F12進行查看)

<html>
    <h1>Library</h1>
    <p>Hello, here is the website for lidemy library</p>
</html>

還是想不出要如何做，看一下hint

https://lidemy-http-challenge.herokuapp.com/lv14?token={SEOisHard}&hint=1

伺服器是怎麼辨識是不是 Google 搜尋引擎的？仔細想想之前我們怎麼偽裝自己是 IE6 的

於是，google關鍵字搜尋一下 Google 搜尋引擎 with web server
看起來跟SEO有關係呢~ >> user agent SEO request postman >> User-Agent: Googlebot

Bingo!
(借助Postman)

<html>
<h1>I Love Google</h1>
<p>Google please rank our website higher, PLEASE!</p>
<!-- token for lv15：{ILOVELIdemy!!!}  -->
</html>

得到Level15的token了!

(補充:將上面成功取得資料的那段HTML以瀏覽器開啟後，並不會在頁面上顯示，需要F12開啟查看)

查看

LV15 : 破關囉

https://lidemy-http-challenge.herokuapp.com/lv15?token={ILOVELIdemy!!!}

恭喜囉，再留給想自己最後破關的人去看看最後的地方吧~

---

小小結語
受惠於 @Jijigo 大大的詳解，
想說第10關後也來貢獻一己之力，讓這篇詳解有更完整的解答
謝謝 Huli大大 提供的教學

破關完想起電影一級玩家，好玩~

(若有步驟、流程錯誤或是其他問題，歡迎告知，我將進行修正)