Lidemy HTTP 圖書館小弟加班(V2)

2019-04-16 23:58:27

Lidemy HTTP 圖書館小弟V1

Lidemy HTTP 圖書館小弟加班(V2)

4/13

huli [3:57 PM]:
有興趣再幫我玩一次嗎
https://lidemy-http-challenge.herokuapp.com
我改了一些東西

嘿,老師邀請我在玩玩看他的遊戲,然後一路看著之前的筆記,一直想說到底是改了什麼東西@@。 只知道 api 的網址不太一樣,然後透過 curl 指令,一口氣完到第十關。

// lv10
很開心在這裡的時光能有你一起陪伴,讓我的生活不再那麼一成不變,很開心認識你,下次有機會再一起玩吧!

The End,恭喜破關!

author: huli@lidemy.com
https://www.facebook.com/lidemytw/

附註:
原本遊戲只規劃到這邊,第十關就是最後一關。
後來我有加了一些新關卡但難度較高,如果你還想挑戰看看,下一關的 token 為 {IhateCORS}

原來是從破關開始,進入下一個全新的關卡了!

根據第十關給的第十一關的 token。


lv11

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

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

根據 api 文件進入 /hello 這個端點。

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

參考文章: https://stackoverflow.com/questions/12173990/how-can-you-debug-a-cors-request-with-curl https://segmentfault.com/a/1190000009971254

過程中,透過這串提示嘗試了一陣子,最後遲遲沒效果,後來發覺提示有打錯的地方,透過 cli 下 curl -H [origin: URL] <API Entry Points> 指令就過關了。

// note
// 加上 -H/--header 設定傳遞給伺服器的自定義標頭(header)
curl -H "Origin: https://lidemy.com" https://lidemy-http-challenge.herokuapp.com/api/v3/hello

// 可加上 -v/--verbose 得到更詳細的資訊。
curl --verbose -H "Origin: https://lidemy.com" https://lidemy-http-challenge.herokuapp.com/api/v3/hello

curl -v -H "Origin: https://lidemy.com" https://lidemy-http-challenge.herokuapp.com/api/v3/hello

花絮:各種嘗試

curl -H "Origin: https://lidey.com" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: X-Requested-With" \
    --verbose \
  https://lidemy-http-challenge.herokuapp.com/api/v3/hello

curl -H "Origin: lidemy.com" \
  -H "Access-Control-Allow-Origin: *" \
  -H "Access-Control-Request-Method: GET" \
  -X OPTIONS --verbose \
  https://lidemy-http-challenge.herokuapp.com/api/v3/hello

  curl -H "Origin: http://lidemy.com" \
  -H "Access-Control-Request-Method: GET" \
  -H "Access-Control-Request-Headers: X-Requested-With" \
  --verbose \
  https://lidemy-http-challenge.herokuapp.com/api/v3/hello

lv12

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

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

一開始的思路是找尋 devTool,到處看,看不出一個所以然,curl 亂試一通,發覺這種做法是大大的錯誤,靜心看看提示,想想提示給了你什麼。

關鍵 a->c->b,想說是 dns 轉址的過程,想說用 cli 指令弄一下,可是這是 api 呀,會有這樣的過程嗎?

// 做了這些嘗試
telnet https://lidemy-http-challenge.herokuapp.com/api/v3/deliver_token

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

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

curl -X GET --verbose https://lidemy-http-challenge.herokuapp.com/api/v3/deliver_token_result

後來又看了一下「跨國圖書館資訊系統 API v3」API 手冊,哎呀! /deliver_token 竟然沒注意到網址多了一個 result!!!!


隔天再整理心得的此時此刻,昨天的這邊的思路大抵上是沒問題的,但是沒留意的網址的已經是轉址之後了,以為是一開始 api 提供的那個 __/deliver_token__。

所以透過 Chrome 的 DevTool,Network 的 Preserve Log 打勾,就可以看過這個轉址的過程了。

或者是 curl 加上 -v 參數,查看詳細資訊。 curl -v https://lidemy-http-challenge.herokuapp.com/api/v3/deliver_token

假使你跟我一樣複製網址列的 url,沒注意到 302,你只會收到

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


lv13

透過 token 進入 lv13 的提示。

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

從 api 文件進入了 /log 這個 Entry Points。

映入眼簾的 此 request 不是來自菲律賓,禁止存取系統資訊。

從 Chrome 的發開者工具查看 logs 的 headers 的資訊,是從 Accept-Language: es-ph 開始著手嘗試。 然後經過一連串的嘗試與 google 補充相關知識之後。

curl -H "X-Forwarded-For: 180.190.197.232" "https://lidemy-http-challenge.herokuapp.com/api/v3/logs" curl -H "X-Forwarded-For: 180.190.197.232" -v "https://lidemy-http-challenge.herokuapp.com/api/v3/logs"

成功獲取下一關的 token 了。

現在打心得的,惡補一下這是什麼鬼,如何正確的取得使用者 IP? | DEVCORE 戴夫寇爾

然後目前的理解是 Server 會限制客戶端的 IP,透過 curl -H "X-Forwarded-For: [你設定的 ip]" URL,可能可以符合 Server 限制的 ip 進而可以連線或得到相關的資訊。


花絮:各種嘗試

  curl -H "Accept-Language: ph" \
   --verbose \
  https://lidemy-http-challenge.herokuapp.com/api/v3/logs

Accept-Language: zh-TW,zh;q=0.9,en-US;q=0.8,en;q=0.7,zh-CN;q=0.6

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

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

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

curl --header "X-Forwarded-For: 192.168.0.2" https://lidemy-http-challenge.herokuapp.com/api/v3/logs

curl -s -H 'Accept-Language: en-ph' -v -X GET "https://lidemy-http-challenge.herokuapp.com/api/v3/logs"

'更改語言沒有效果,用 ip 判斷 ?'
-H 'Accept-Language: en-ph'

https://zh.wikipedia.org/wiki/X-Forwarded-For

curl  -H "X-Forwarded-For: 180.190.197.232" -v "https://lidemy-http-challenge.herokuapp.com/api/v3/logs"

lv14

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

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

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

從這段提示「讓 Google 搜尋引擎看到的內容跟我們看到的不一樣?」大概可以看到線索是「Google 搜尋引擎爬到的內容跟我們看到的不一樣」,而我使用的工具就這兩個「Chrome DevTool、curl」。

一開始的思路與關鍵字是「curl 要下什麼指令可以讓結果不一樣?」、「爬蟲?」、「給爬蟲看的資料?」,然後朝 SEO 的方向去 google,比較了幾篇之後發現這篇的內容蠻豐富的 https://www.newscan.com.tw/all-seo/seo-guide.htm ,在裡面看到《Google搜尋引擎最佳化初學者指南》,又繼續往這個方向看了一下。

透過玩遊戲又加深了對 SEO 的印象,想到最近應徵看到有些公司條件中「擁有 SEO 相關知識為佳」,還愣住想說那個是啥呢。繼續 google,經過一連串的 google 之後

Making AJAX applications crawlable

Web crawler

Content Security Policy 入門教程

網站開發人員應該知道的61件事

嗯,SEO 搜尋引擎優化最大的重點就是讓蜘蛛(網路蜘蛛、爬蟲、crawler)可以去爬,然後經過很多動物演算法之後的加權提高分數影響搜尋結果的排名。前端框架網站的搜尋引擎優化相關。

以上是昨天睡前一直在嘗試的。

睡醒之後,看到老師給予的提示,不久後想通了@@

https://www.cyberciti.biz/faq/curl-set-user-agent-command-linux-unix/

  1. 方法一:根據這篇文章「如何在Google Chrome中更改用戶代理」,就知道 Dev Tool 有很多工具可以用,而我們現在要用到的就是 More tools -> Network conditions 裡面的 User agent,把用戶代理更改成 Googlebot 就可以得到不一樣的結果了,仔細一瞧發現下面的 input 有整串的用戶代理資訊,就可以使用 "curl -v -A [conditions] [URL]" 來測試這個 API 了

  2. 方法二: curl -v -A "User-agent: Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" https://lidemy-http-challenge.herokuapp.com/api/v3/index

然後你就會發現下一關的 token 了!


lv15

破關了,打工小弟要下班了XD

還真的是我猜的那樣...不過還是要謝謝你幫我們完成這麼多任務!
今天是我在這職位的最後一天啦,之後我要升官了,應該就不用處理這麼多小事情了
這段期間感謝你的幫忙,我們以後有緣再相見啦!

The End,恭喜破關!
這次是真的破關了,這是最後一關,感謝你願意參與這個遊戲
也希望這遊戲是有趣的,希望你在玩的時候有學到東西
也歡迎把這個遊戲分享給親朋好友們
感謝!

也感謝所有幫我測試的朋友們

Author: huli@lidemy.com
https://www.facebook.com/lidemytw/

參考資料:

Linux:cURL 命令详解 http://justcode.ikeepstudying.com/2018/02/linux%EF%BC%9Acurl-%E5%91%BD%E4%BB%A4%E8%AF%A6%E8%A7%A3%EF%BC%8C%E4%BB%A5%E5%8F%8A%E5%AE%9E%E4%BE%8B-%E5%BF%AB%E9%80%9F%E7%BD%91%E7%AB%99%E6%B5%8B%E5%8E%8B-curl-%E7%88%AC%E8%99%AB-curl-command-down/


後記

經過這兩次的圖書館小弟的體驗之後,更是加深了「header、POST、GET、SCO..等等」的概念,儘管有時候思維的出發點或方向不見得是最正確的,可能角度有些偏差,但是就像某篇文章提過的概念,透過解決問題、遇到更多問題、解決更多問題的過程中,從模糊的知道了這大概是什麼,逐漸明白這一切到底是什麼。