Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Node.js 蟲蟲危機 - 手作你的第一個自動上網資料分析機器人!

229b1596ce57cd0935a2bacd410d87a0?s=47 adr
February 11, 2018

Node.js 蟲蟲危機 - 手作你的第一個自動上網資料分析機器人!

在不同的網站上都有珍貴的資料,但人工去將網站中資料一筆一筆的複製下來相當麻煩、甚至是有些資料是對方不願意開 API 出來給開發者使用,但你想使用對吧?

此場議程將會為各位介紹爬蟲技術入門:當各位使用瀏覽器連上一個網站時,是如何運作的,並使用封包相關分析工具,分析一個網站的運作。最後將以 Javascript 基於 Node.js,介紹如何撰寫簡單的 Javascript 自動化模擬瀏覽器的瀏覽行為、並使用現有的套件來將網站中想要的資料撈下來保存到本地端。

議程內包含網頁請求封包分析、Node.js 封包分析、Yahoo翻譯請求自動發送、PTT自動爬站爬蟲撰寫開發之開發基礎練習。課堂示範練習題目公布於 Github 上,請參閱至 https://github.com/aaaddress1/nodeSpiderExam

229b1596ce57cd0935a2bacd410d87a0?s=128

adr

February 11, 2018
Tweet

More Decks by adr

Other Decks in Technology

Transcript

  1. aaaddress1@chroot.org ⼿手作你的第⼀一個⾃自動上網資料分析機器⼈人! Node.js 蟲蟲危機

  2. aaaddress1@chroot.org ./Bio • ⾺馬聖豪, aaaddress1 aka adr • Chroot, TDOH

    • TDOHConf: 2016 議程組長 & 2017 活動組長 • 精通 C/C++、Windows 特性、逆向⼯工程 • Speaker: HITCON CMT 2015, CMT 2016 Lightning, CMT 2017 SITCON 2016, 2017 iThome#Chatbot 2017 BSidesLV 2016 ICNC'17 MC2015 CISC 2016 資訊安全基礎技術⼯工作坊 資安實務攻防研習營 ⼤大.⼤大.⼤大..⼤大概啦
  3. aaaddress1@chroot.org Introduction 1. #murmur 2. HTTP (aka Hypertext Transfer Protocol)

    3. Javascript & Node.js on Windows 4. Chrome, 網⾴頁封包分析練習 5. cheerio & request 6. 實戰練習 i. Yahoo 翻譯網路路請求發送 ii. PTT 熱⾨門看板列列舉 iii. PTT 爆卦爬蟲機器⼈人
  4. aaaddress1@chroot.org #murmur ٩(˃ ̶ ͈ ̀௰˂ ̶ ͈ ́)و╭(°A°`)╮∑(゚Д゚)

  5. aaaddress1@chroot.org

  6. aaaddress1@chroot.org 先別被嚇哭! 對,Javascript 很恐怖我知道, 但今天不會講太深 :)

  7. 爬蟲?

  8. 網路路爬蟲啦! https://zh.wikipedia.org/wiki/網路路爬蟲

  9. aaaddress1@chroot.org 比⽅方說當個 Google 認證的帥哥

  10. aaaddress1@chroot.org Funtime 機票比價網

  11. aaaddress1@chroot.org 各種奇怪搶票機s(複數+s)

  12. aaaddress1@chroot.org 所以... 它們怎麼做到這些⿇麻瓜辦不到的事?

  13. aaaddress1@chroot.org HTTP Hypertext Transfer Protocol

  14. aaaddress1@chroot.org 網⾴頁瀏覽器 模擬⼀一般使⽤用者的瀏覽器⾏行行為 去對伺服器收發 POST/GET 要求

  15. aaaddress1@chroot.org School Server POST /login HTTP/1.1
 usr=adr&pass=handsome HTTP/1.1 200 OK

    Set-Cookie: hello=world; … 網⾴頁瀏覽器
  16. aaaddress1@chroot.org HTTP/1.1 200 OK <p>hello world! adr<p> Cookie: hello=world; (⾝身份資訊)

    網⾴頁瀏覽器 GET /index.php HTTP/1.1 Cookie: hello=world;
  17. aaaddress1@chroot.org HTTP/1.1 200 OK <p>hello world! adr<p> Cookie: hello=world; (⾝身份資訊)

    網⾴頁瀏覽器 GET /index.php HTTP/1.1 Cookie: hello=world; 收到伺服器回應的網⾴頁原始碼, 解析並更更新 UI 顯⽰示給使⽤用者
  18. aaaddress1@chroot.org 請求 回應 Cookie:⾝身份辨識資訊; 網⾴頁瀏覽器

  19. aaaddress1@chroot.org Javascript Javascript & Node.js on Windows

  20. Javascript 第⼀一次聽到嗎? 事實上每個⼈人電腦都已經具備可以跑 Javascript 環境啦!

  21. Javascript https://zh.wikipedia.org/wiki/JavaScript 「⋯⋯JavaScript,⼀一種⾼高階程式語⾔言,通過解釋執⾏行行,是⼀一⾨門動態型別,物件導向(基 於原型)的直譯語⾔言。它已經由ECMA(歐洲電腦製造商協會)通過ECMAScript實現語⾔言 的標準化[4]。它被世界上的絕⼤大多數網站所使⽤用,也被世界主流瀏覽器(Chrome、IE、 FireFox、Safari、Opera)⽀支援⋯⋯」

  22. aaaddress1@chroot.org Javascript

  23. aaaddress1@chroot.org Javascript 當那個彈出來來後⋯⋯對,我說偵錯介⾯面, 你就可以輸入 Javascript 來來執⾏行行啦!

  24. Node.js? https://zh.wikipedia.org/wiki/Node.js 「Node.js是⼀一個能夠在伺服器端運⾏行行JavaScript的開放原始碼、跨平台JavaScript 執⾏行行環境。Node.js由Node.js基⾦金金會持有和維護,並與Linux基⾦金金會有合作關係。 Node.js 採⽤用Google開發的V8執⾏行行程式碼,使⽤用事件驅動、非阻塞和非同步輸入輸 出模型等技術來來提⾼高效能,可優化應⽤用程式的傳輸量量和規模。這些技術通常⽤用於資 料密集的事實應⽤用程式。⋯⋯」

  25. V8? https://zh.wikipedia.org/wiki/V8_(JavaScript引擎) 「V8是⼀一個由美國Google開發的開源JavaScript引擎,⽤用於Google Chrome及 Chromium中。Lars Bak是這個項⽬目的組長。」

  26. aaaddress1@chroot.org https://nodejs.org

  27. aaaddress1@chroot.org 提⽰示命令字元 開始 > 執⾏行行... > cmd.exe

  28. aaaddress1@chroot.org 提⽰示命令字元 > node 這時候輸入 Javascript 指令如果有回應 就代表安裝成功啦!

  29. aaaddress1@chroot.org hello.js@~\desktop\project\ 也可以把你想執⾏行行的 Javascript 程式碼存為 *.js 腳本

  30. aaaddress1@chroot.org hello.js@~\desktop\project\ 然後⽤用 Node <腳本路路徑> 使⽤用 Node.js 引擎執⾏行行腳本

  31. aaaddress1@chroot.org 封包分析練習 ⽤用 Chrome 瀏覽器內建的封包⼯工具分析網⾴頁封包

  32. aaaddress1@chroot.org 網⾴頁封包分析⼯工具 網⾴頁任意處右鍵 > 檢查 > Network 分⾴頁

  33. aaaddress1@chroot.org 網⾴頁封包分析⼯工具 記得將 Network 分⾴頁中的 Preserve log 選項勾選, 當網⾴頁有多重跳轉的時候,封包才不會被洗掉 ╭(°A°`)╮

  34. Exam 1 在 Yahoo 奇摩字典上輸入單字, 並分析封包如何傳遞、使⽤用者的資料如何傳送出去 https://tw.dictionary.yahoo.com

  35. aaaddress1@chroot.org Exam 1

  36. aaaddress1@chroot.org Exam 1 你會發現每次打的字不同的時候,都會送出⼀一個新的封包到 https://tw.dictionary.yahoo.com/_td/api/resource?bkt=...(省略略) 這是⽤用 POST 的⽅方式送出資料,資料如下: {"requests":{"g0": {"resource":"SpellCheck","operation":"read","params":

    {"query":"ap"}}},"context":{"bkt":"","crumb":"LpDntKQ/ xn8","device":"desktop","intl":"tw","lang":"zh-Hant- TW","partner":"none","prid":"74b45q5d7emli","region":"US","site" :"all","tz":"Asia/Taipei","ver":"1.0.208"}}
  37. aaaddress1@chroot.org Exam 1 使⽤用者查詢的字詞被 POST 出去後, 回應其他可能的關鍵單字(JSON 格式) {"g0": {"data":

    {"gossip": { "qry": "ap", "gprid": "uwJS5P5mQveG7SvxZORrDA", "results": [ { "key": "ap", "mrk": 0 }, { "key": "app", "mrk": 0 }, { "key": "appreciate", "mrk": 0 } ...
  38. aaaddress1@chroot.org Exam 1 按「搜尋」後,會看到將使⽤用者欲查詢的單字送⾄至: https://tw.dictionary.yahoo.com/dictionary?p=<單字> 並回應 HTML 網⾴頁原始碼,這就是我們瀏覽器看到的⾴頁⾯面

  39. aaaddress1@chroot.org Exam 1

  40. aaaddress1@chroot.org request ⽤用於發送網⾴頁封包的 Node.js 套件

  41. aaaddress1@chroot.org request ⼀一個超棒開源的套件, 可以讓你發送網⾴頁封包變得超簡單超舒服 ! !

  42. aaaddress1@chroot.org $ npm install request 使⽤用命令提⽰示字元進入到專案的資料夾, 下指令 npm install request

    後, request 套件就會被安裝到這個專案資料夾上了了 :)
  43. aaaddress1@chroot.org 舉個 var request = require('request'); request('http://www.google.com', (error, response, body)

    => { console.log('error:', error); // Print the error if one occurred console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received console.log('body:', body); // Print the HTML for the Google homepage. });
  44. Exam 2 試著⽤用 request 套件 取得 PTT 熱⾨門看板的網⾴頁原始碼 https://www.ptt.cc/bbs/index.html

  45. aaaddress1@chroot.org Exam 2

  46. aaaddress1@chroot.org Exam 2

  47. aaaddress1@chroot.org Exam 2

  48. aaaddress1@chroot.org Exam 2

  49. 這時候你會發現⿇麻煩⼤大了了 網⾴頁原始碼那麼⼤大⼀一坨,我要怎麼取得我想要的資訊?

  50. aaaddress1@chroot.org 怎麼取得網⾴頁指定內容? 1. ⽂文字切割⼤大法 - 讚讚讚!刻苦耐勞,22K 有前途! 2. ...

  51. aaaddress1@chroot.org 怎麼取得網⾴頁指定內容? 1. ⽂文字切割⼤大法 - 讚讚讚!刻苦耐勞,22K 有前途! 2. 正則表達式忍術 -

    WoW!你也懂得⿊黑魔法!
 下⼀一個接⼿手的⼯工程師會很痛苦啦 ( ・᷄ὢ・᷅ ) 3. ...
  52. 你以為 我想教⿊黑魔法嗎? 因為時間不夠,所以我們就不能教正則表達⿊黑魔法了了 絕對不是因為我覺得教正則表達很⿇麻煩

  53. aaaddress1@chroot.org 怎麼取得網⾴頁指定內容? 1. ⽂文字切割⼤大法 - 讚讚讚!刻苦耐勞,22K 有前途! 2. 正則表達式忍術 -

    WoW!你也懂得⿊黑魔法! 3. cheerio - 你、我,聰明肥宅都愛⽤用的⾸首選!
 (來來賓請掌聲⿎鼓勵⿎鼓勵)
  54. aaaddress1@chroot.org 讓我們談談 $ 吧 你說錢錢嗎?不,我是說 JQuery 的 $。

  55. aaaddress1@chroot.org cheerio 有良好相容性、 仿造 JQuery ⽅方式操作 DOM 物件的 Node.js 套件

  56. aaaddress1@chroot.org cheerio ⼀一樣超棒開源、超多⼈人維護、超穩定的 DOM 解析套件

  57. aaaddress1@chroot.org $ npm install cheerio 使⽤用命令提⽰示字元進入到專案的資料夾, 下指令 npm install cheerio

    後, cheerio 套件就會被安裝到這個專案資料夾上了了 :)
  58. aaaddress1@chroot.org 舉個 const cheerio = require('cheerio'); const $ = cheerio.load(

    '<h2 class="title">Hello world</h2>' ); $('h2.title').text('Hello there!'); $('h2').addClass('welcome'); $.html(); //=> <h2 class="title welcome">Hello there!</h2>
  59. aaaddress1@chroot.org DOM 檢閱 在 Chrome 裡⾯面我要怎麼確認指定 DOM 物件的元素資訊?

  60. aaaddress1@chroot.org DOM 檢閱 我們剛剛⽤用 request 可以取得 PTT 熱⾨門看板的網⾴頁原始碼

  61. aaaddress1@chroot.org DOM 檢閱 對著你想檢查的物件右鍵 > 檢查

  62. aaaddress1@chroot.org DOM 檢閱 會發現它是⼀一個 tagName 為 a、 id 為 logo

    的 DOM 物件
  63. aaaddress1@chroot.org DOM 檢閱 會發現它是⼀一個 tagName 為 a、 id 為 logo

    的 DOM 物件
  64. aaaddress1@chroot.org cheerio + request 組・組・組,組合技!

  65. aaaddress1@chroot.org cheerio + request

  66. Exam 3 試著⽤用 request 與 cheerio 套件 取得 PTT 熱⾨門看板所有看板名稱與連結地址

    • https://www.ptt.cc/bbs/index.html • https://github.com/cheeriojs/cheerio
  67. aaaddress1@chroot.org Exam 3 選取任意⼀一個看板,右鍵 > 檢查,會發現:

  68. aaaddress1@chroot.org Exam 3 a.board(href=看板網址) div.board-name 看板名稱 div.board-nuser 看板⼈人數(??? 不清楚) div.board-class

    看板類型 div.board-title 看板標題
  69. aaaddress1@chroot.org Exam 3

  70. aaaddress1@chroot.org Exam 3

  71. aaaddress1@chroot.org Exam 3

  72. PTT 爆卦⽂文章爬蟲 試著⽤用 request 與 cheerio 套件 取得 PTT 前⼗十熱⾨門看板被列列為「爆」的⽂文章與網址

    • https://www.ptt.cc/bbs/index.html • https://github.com/cheeriojs/cheerio
  73. aaaddress1@chroot.org PTT 爆卦⽂文章爬蟲 先偷偷⽤用 Promise + async/await 把 request 調⽤用簡化⼀一下

  74. aaaddress1@chroot.org PTT 爆卦⽂文章爬蟲 把熱⾨門看板列列出前⼗十筆的網址, 丟給⾃自幹好的函數(listHotTopic)去處理理分析熱⾨門貼⽂文部分

  75. aaaddress1@chroot.org PTT 爆卦⽂文章爬蟲 函數內只需要將每⼀一列列新的貼⽂文結構給列列舉出來來, 記下網址與推數,如果推數顯⽰示為「爆」就打印出來來 :)

  76. aaaddress1@chroot.org [爆卦] 32⾏行行解決貼⽂文爬蟲!

  77. aaaddress1@chroot.org PTT 爆卦⽂文章爬蟲 ⾝身為狂熱鄉⺠民就可以即時追蹤到⼤大家在茶茶餘飯後什什麼啦 !

  78. *cheers* Thanks!

  79. aaaddress1@chroot.org Thanks! Facebook: ⾺馬聖豪 Twitter: @aaaddress1 Email: aaaddress1@chroot.org PoC: github.com/aaaddress1/nodeSpiderExam