# 來刷一下吧 *Lidemy HTTP Challenge* ###### tags: `http` Copyright 2021, [月下麒麟](https://hackmd.io/@YMont/note-catalog) --- ## start Reference:[Lidemy HTTP Challenge](https://lidemy-http-challenge.herokuapp.com/start) ## Concept 一個學習HTTP相關知識的網頁遊戲，作者為Huli大，這邊紀錄學習過程 ## 第一關 https://lidemy-http-challenge.herokuapp.com/lv1?token={GOGOGO} ```python= import requests token = '{GOGOGO}' name = 'edgar' header = {"Content-Type":"application/x-www-form-urlencoded"} api_url = rf"https://lidemy-http-challenge.herokuapp.com/lv1?token={token}&name={name}" r = requests.get(api_url) print(r) print(r.text) ``` ``` <Response [200]> 啊...原來你叫 edgar 啊！下一關的 token 是 {HellOWOrld} ``` >Level2~10以下省略，可參考jijigo大大的 >reference: [一日圖書館管理員：HTTP Challenge #24](https://github.com/jijigo/notes/issues/24) ## Hook 剛好要接續玩下去，就想說剩下11~15關，我把它補齊 於是乎在該github留言下方有我放的詳解 同時也將它記錄在此 --- ## Solution LV.11~15 Reference:[解答 一日圖書館管理員：HTTP Challenge](https://github.com/jijigo/notes/issues/24) Reference:[幕後花絮：Lidemy HTTP Challenge 的設計以及彩蛋](https://github.com/aszx87410/blog/issues/42) --- ### 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一樣是解不開的喔~) ![image](https://user-images.githubusercontent.com/58437649/142143788-c5c61a4d-9272-4309-933e-3ea5b29cbcad.png) ``` 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選項裡，會看到如下的樣子) ![image](https://user-images.githubusercontent.com/58437649/142148112-73ce4aa7-b623-4fb8-8a12-e80de359a47e.png) 對著第一筆資訊點擊兩下 ![image](https://user-images.githubusercontent.com/58437649/142148915-a35d065a-53d7-447f-ac44-93ccf8829b34.png) Bingo ![image](https://user-images.githubusercontent.com/58437649/142149416-075ec8a5-9767-43ed-bc69-e1bfbf3c4e91.png) (補充: 找到MDN這篇後，有了一點解題的靈感) (reference-[Redirections in HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections)) --- ### 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 設定的頁面 ![image](https://user-images.githubusercontent.com/58437649/142163531-328188b7-3efa-4ad8-b663-4ce14a1552b6.png) 開啟proxy ![image](https://user-images.githubusercontent.com/58437649/142163824-a5c40fde-a58b-403e-bb11-2161fc5de46d.png) 重新整理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 ![image](https://user-images.githubusercontent.com/58437649/142171313-dca9a1b7-613a-4b15-822e-35c6c4f6c71d.png) 一樣的內容，以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) ![image](https://user-images.githubusercontent.com/58437649/142169265-a375d724-0631-48f5-88fc-3196c364be84.png) ``` <html> <h1>I Love Google</h1> <p>Google please rank our website higher, PLEASE!</p> <!-- token for lv15：{ILOVELIdemy!!!} --> </html> ``` 得到Level15的token了! (補充:將上面成功取得資料的那段HTML以瀏覽器開啟後，並不會在頁面上顯示，需要F12開啟查看) ![image](https://user-images.githubusercontent.com/58437649/142171791-b02a5f91-bb4b-47bb-ae32-f8208e056233.png) 查看 ![image](https://user-images.githubusercontent.com/58437649/142171894-739a289f-3052-425b-b55e-24db24127a48.png) --- ### LV15 : 破關囉 >https://lidemy-http-challenge.herokuapp.com/lv15?token={ILOVELIdemy!!!} 恭喜囉，破關了~ ``` 還真的是我猜的那樣...不過還是要謝謝你幫我們完成這麼多任務！ 今天是我在這職位的最後一天啦，之後我要升官了，應該就不用處理這麼多小事情了 這段期間感謝你的幫忙，我們以後有緣再相見啦！ The End，恭喜破關！ 這次是真的破關了，這是最後一關，感謝你願意參與這個遊戲 也希望這遊戲是有趣的，希望你在玩的時候有學到東西 也歡迎把這個遊戲分享給親朋好友們 感謝！ 我開了一個 gist，大家可以在這邊隨意留言，或是講一下破關感言 https://gist.github.com/aszx87410/1dbde92876ba253a45654988ca829ebb 最後，感謝所有幫我測試的朋友們 Author: huli@lidemy.com https://www.facebook.com/lidemytw/ ```