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

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

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

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

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