一日圖書館管理員:HTTP Challenge
Opened this issue · 4 comments
由 @huli 大大開發的小遊戲,因為覺得概念實在太有趣了,就來玩玩看並做個簡單的紀錄。
主要會練習到 GET
POST
DELETE
PATCH
這四種常見的方法,還有 query string
的運用,以及 Authoration
驗證。
除了 GET 方法會直接在網頁的 URL 輸入之外,其他的方法我會透過 Postman 來幫忙。
那麼就開始吧!遊戲網址
Lv0:熱身
安安,歡迎來到 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=村上春樹
,結果相同)
[{"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
[{"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 傳給我。
居然是幾A幾B當結尾!那這就不破梗了,讓觀眾自己猜。
不過還是要放張過關圖🎉
lv8 的 token 倒著看就會發現梗了 XD
話說後面新增了幾關,要不要繼續挑戰XD
@aszx87410 沒問題😂等我更新!
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
跟菲律賓圖書館打個招呼
然後會得到這樣的錯誤
您的 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選項裡,會看到如下的樣子)
(補充: 找到MDN這篇後,有了一點解題的靈感)
(reference-Redirections in HTTP)
LV13 : Proxy 代理伺服器
https://lidemy-http-challenge.herokuapp.com/lv13?token={qspyz}
太好了!自從你上次把運送用的 token 拿回來以後,我們就密切地與菲律賓在交換書籍
可是最近碰到了一些小問題,不知道為什麼有時候會傳送失敗
我跟他們反映過後,他們叫我們自己去拿 log 來看,你可以幫我去看看嗎?
從系統日誌裡面應該可以找到一些端倪
取得log
此 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 搜尋引擎看到的內容跟我們看到的不一樣?
算了,還是不要瞎猜好了,你幫我們研究一下吧!
獲取首頁內容
<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
<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大大 提供的教學
破關完想起電影一級玩家,好玩~
(若有步驟、流程錯誤或是其他問題,歡迎告知,我將進行修正)