Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
不要小看我的情報網_上吧網路爬蟲!!@HackerSir 11th
Search
YUKAI
May 30, 2025
Education
0
28
不要小看我的情報網_上吧網路爬蟲!!@HackerSir 11th
YUKAI
May 30, 2025
Tweet
Share
More Decks by YUKAI
See All by YUKAI
WebAssembly 入門:在 Browser 上跑 C Code 是怎麼回事@HackerSir StudyGroup
yukai0xe
0
15
Docker Escape@HackerSir StudyGroup
yukai0xe
0
34
How to use Docker@HackerSir 11th
yukai0xe
0
20
OAuth2.0 Easy Talk@HackerSir StudyGroup
yukai0xe
0
19
Discord Bot Junior Tutorial@HackerSir 11th
yukai0xe
0
10
XSS Everywhere@HackerSir 11th
yukai0xe
0
14
Other Decks in Education
See All in Education
著作権と授業に関する出前講習会/dme-2025-05-01
gnutar
0
200
小さなチャレンジが生んだチームの大きな変化 -私のふりかえり探求の原点
callas1900
0
550
推しのコミュニティはなんぼあってもいい / Let's join a lot of communities.
kaga
2
1.8k
データ分析
takenawa
0
6.5k
新卒研修に仕掛ける 学びのサイクル / Implementing Learning Cycles in New Graduate Training
takashi_toyosaki
1
160
Tangible, Embedded and Embodied Interaction - Lecture 7 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
Education-JAWS #3 ~教育現場に、AWSのチカラを~
masakiokuda
0
170
【品女100周年企画】_抜粋
shinagawajoshigakuin_100th
0
770
The Art of Note Taking
kanaya
1
140
GitHubとAzureを使って開発者になろう
ymd65536
1
120
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
signer
PRO
1
2.1k
Gamified Interventions for Composting Behavior: A Case Study Using the Gamiflow Framework in a Workplace Setting
ezefranca
1
140
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Docker and Python
trallard
44
3.5k
Designing for Performance
lara
610
69k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Typedesign – Prime Four
hannesfritz
42
2.7k
Balancing Empowerment & Direction
lara
1
430
Being A Developer After 40
akosma
90
590k
Building an army of robots
kneath
306
45k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Transcript
不要小看我的情報網 上吧網路爬蟲 講者:YuKAi
• 安裝 python 套件:requests、beautifulsoup4 • 指令: • Requests:用來發送網路請求 • Beautifulsoup4:分析
HTML,並讓 Python 能選取 Element Before Class pip install requests beautifulsoup4
爬蟲與網頁渲染 01 SSR 網頁爬取 02 CSR 網頁爬取 03 04 Outline
More
爬蟲與網頁渲染 01
• 透過程式自動抓取網站資料的過程 • 常見應用 • 搜尋引擎 • 批量下載 • 商品比較、價格追蹤
• 構建屬於自己的情報網 什麼是爬蟲
• 將 HTML、CSS、JavaScript 解析並轉化為使用者可互動網頁的過程 • 常見的渲染方式 • Client-Side Render(客戶端渲染) •
Server-Side Render(伺服器端渲染) 網頁渲染(Rendering)
• 每次請求 Server 都回傳相同的 HTML、CSS、JavaScript • 根據 JavaScript 生成網頁 Client-Side
Render Server side rendering, client side rendering, or static site generation? - IONOS 圖源:IONOS
• 優點 • 伺服器負擔少 • 網頁好維護 • 缺點 • 需要等待
JavaScript 執行 • 網頁渲染速度取決於使用者裝置性能 Client-Side Render
• Server 先建立好要回傳的 HTML • 會根據 request 每次重新抓取資料,生成 HTML(動態網頁) Server-Side
Render Server side rendering, client side rendering, or static site generation? - IONOS CA 圖源:IONOS
• 優點 • 直接爬取 HTML 就可以獲得想要的資料 • 不必等到 JavaScript 執行完才看得到畫面
• 缺點 • 程式邏輯與架構會較複雜 • 載入速度取決伺服器性能 Server-Side Render
• 根據 request 直接將對應的 HTML 傳回使用者,不需要重新生成 HTML • 優點 •
更快的加載速度與穩定性 • 缺點 • 網頁內容不能有太多變化,動態內容不建議使用 補充:Static Side Generation
小節 優點 缺點 Server-Side Render SEO 友善 伺服器負擔高 網頁架構複雜 Client-Side
Render 伺服器負擔低 網頁維護方便 SEO 不友善
• SSR 需要使用爬蟲分析網頁 • CSR 可以呼叫 API 來直接獲取資料 • Hydration:SSR
+ CSR • 為了網頁效能,先請求渲染好的網頁,再呼叫 API 請求資料 小節
以 逢甲大學的新聞與活動 為例 1. 打開 DevTools 2. 點擊 Network 3.
點擊第一筆內容,通常會是載入的頁面 如何辨識渲染方式
4. 在 Response 按下 Ctrl+F 5. 搜尋想要爬蟲的內容 6. 如果找得到就可判斷是 SSR
以這個畫面而言,找得到內容所以是 SSR 如何辨識渲染方式
• 作用:讓伺服器識別使用者的瀏覽器、版本、作業系統 • 好處 • 正確顯示網頁內容 • 快速載入簡易網頁 • 防止網頁爬蟲
• 切換 User-Agent:User-Agent Switcher and Manager User-Agent 的重要性
插件使用 可以將 UserAgent 設為空 可以選擇其他 UserAgent 設定好就應用在這個分頁後刷新
蝦皮 User-Agent:empty User-Agent:Chrome
巴哈姆特 User-Agent:empty User-Agent:Chrome
SSR 網頁爬取 02
可以從 Response 找到要爬取的內容,所以可判斷是 SSR 以 巴哈的新聞網 為例
以 巴哈的新聞網 為例 • 可以用 Ctrl + Shift + C
協助定位 Element • 發現是由 h1 的區塊組成
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
11. 12. 13. 14. import requests from bs4 import BeautifulSoup url = "https://gnn.gamer.com.tw/" headers = { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36", } res = requests.get(url, headers=headers) # GET 方法取得網頁 soup = BeautifulSoup(res.text, "html.parser") # 解析網頁 html 發送請求
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
11. 12. 13. 14. # 找出所有 h1 標籤,且 class 為 GN-lbox2D posts = soup.find_all('h1', class_='GN-lbox2D') # 將資料提取後記錄在 results results = [] for post in posts: results.append({ 'title': post.find('a').text.strip(), # 找出 a 標籤,取得文字內容 'link': post.find('a')['href'] # 找出 a 標籤,取得 href 屬性 }) 找出 Element
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
11. 12. 13. 14. import json # 將結果寫入 result.json with open('result.json', 'w', encoding='utf-8') as f: json.dump(results, f, ensure_ascii=False, indent=4) 資料匯出
結果
• 嘗試把每則貼文的 Tag 和下面的內文也爬下來,例如這則貼文的 Tag 是「多平台」 Lab
• 參考解 Lab Ans & Result
CSR 網頁爬取 03
• 找不到要爬的內容,可以判斷是 CSR(客戶端渲染 + AJAX) 以 逢甲大學課程檢索 為例
• 點擊上面的 Fetch/XHR 可以看到網頁呼叫哪些 API • 最後在 GetType1Result 找到我們要爬的內容 呼叫
API 獲取更多資料
• 從 Headers 可以看出是以 POST 呼叫此 API • 並且 Request
攜帶的資料格式是 json 呼叫 API 獲取更多資料
• 從 Payload 可以看到 Request 攜帶的資料 呼叫 API 獲取更多資料 lang
課程語言 sms 上/下學期 year 學年度 classId 班級 degree 學制 deptId 學院 unitId 系所
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
11. 12. 13. 14. import requests, json # 要呼叫的 API 網址 result_url = "https://coursesearch04.fcu.edu.tw/Service/Search.asmx/GetType1Result" headers = { "User-Agent": "Mozilla/5.0 (Windows NT 10.0 Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36", } 直接呼叫 API
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
11. 12. 13. 14. # 設定要傳送的資料 data = { "baseOptions": { "lang": "cht", "year": 113, "sms": 1 }, "typeOptions": { "degree": "1", "deptId": "CI", "unitId": "CE07", "classId": "CE07131" } } 直接呼叫 API
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
11. 12. 13. 14. # 呼叫 API res = requests.post(result_url, headers=headers, json=data) # 將結果寫入 result.json with open('result.json', 'w', encoding='utf-8') as f: json.dump(res.json(), f, ensure_ascii=False, indent=4) 直接呼叫 API
結果
More Web Scrawler 04 爬蟲比你想得更強大且困難
• 原本的用途:Web UI 自動化測試工具 • 實際上:模擬使用者操作的爬蟲工具 • 優點 • 可以模擬畫面滾動、點擊、輸入等一切使用者操作
• 展示性高 • 缺點:爬蟲效率較差,不適合用於快速爬蟲 Selenium
• Step1: • 需要先在下載 browser 的 driver,這邊以 chromedriver 為例 •
Download Link:Chromedriver#stable • 把 driver 放在與程式同一個資料夾 • 備註:下載的 driver 要與 browser 的版本一樣 • Step2: • 安裝 selenium 套件 • 指令: Selenium pip install selenium
• 以 Chrome 為例,在網址地方輸入:chrome://version 確認 browser 版本
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
11. 12. 13. 14. # 引入 webdriver from selenium import webdriver # 引入 By 語法用來查找 Elemnent from selenium.webdriver.common.by import By # 引入 time 模組,用來暫停程式 import time # 設定帳號密碼和 URL username = "" password = "" url = "https://ilearn.fcu.edu.tw/login/index.php" 帳號密碼輸入、按鈕點擊
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
11. 12. 13. 14. # 創建 Chrome 瀏覽器實例,並前往網址 driver = webdriver.Chrome() driver.get(url) # 找輸入框和按鈕 username_input = driver.find_element(By.ID, "username") password_input = driver.find_element(By.ID, "password") submit_button = driver.find_element(By.ID, "loginbtn") 帳號密碼輸入、按鈕點擊
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
11. 12. 13. 14. # 輸入帳號密碼後點擊登入 username_input.send_keys(username) password_input.send_keys(password) submit_button.click() # 等待 10 秒後關閉瀏覽器 time.sleep(10) driver.quit() 帳號密碼輸入、按鈕點擊
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
11. 12. 13. 14. # 用 JavaScript 實現滾動 js = "document.querySelector('div#page').scrollTop = 100000;" driver.execute_script(js) 畫面滾動
• reCAPTCHA 驗證機制 • 常見解法 • 人工輸入驗證碼 • 模擬人類動作,ex:selenium •
OCR 辨識驗證碼,ex:pytesseract、ddddocr • 第三方平台驗證碼辨識服務,ex:Anti-captcha • User Session 爬蟲會遇到的其他問題
• Rate Limit / Throttle(頻率限制) • 常見解法 • 設定隨機延遲時間 •
輪流切換 IP 位址 • 更換 User-Agent 爬蟲會遇到的其他問題
None