從入門到入土
Owen | 溟
Lab
Getting data from web?
World Wide Web
傳輸網頁的協定
HTTP
伺服器的位址
URL
建構網頁的語言
HTML
網站運作原理
傳輸
運行
傳輸程式＆頁面資料
運行程式＆請求資料
網站運作原理
傳輸
運行
傳輸程式＆頁面資料
運行瀏覽器
對網站伺服器發出請求
網站運作原理
傳輸
運行
傳輸頁面及腳本
運行程式＆請求資料
網站運作原理
傳輸
運行
傳輸程式＆頁面資料
運行程式請求資料
e.g.影片、相關影片
網站運作原理
傳輸
運行
傳輸程式請求之資料
運行程式＆請求資料
網站運作原理
傳輸
運行
傳輸程式＆頁面資料
運行瀏覽器
對網站伺服器發出請求
?
http://
ntust.pro
/ctf
?question=1
協議
位址 / ip
路徑
參數
http://
ntust.pro
/ctf
?question=1
協議
位址 / ip
路徑
參數
http://
ntust.pro
/ctf
?question=1
協議
位址 / ip
路徑
參數
GET /ctf?question=1 HTTP/2
Host: ntust.pro
User-Agent: Chrome/116.0.5845.141 Safari/537.36
Accept: text/html
Accept-Language: en-US,en;q=0.9
account=wusandwitch
........
GET /ctf?question=1 HTTP/2
Host: ntust.pro
User-Agent: Chrome/116.0.5845.141 Safari/537.36
Accept: text/html
Accept-Language: en-US,en;q=0.9
account=wusandwitch
........
Method 方法
Credit:
Ed Tsai
GET /ctf?question=1 HTTP/2
Host: ntust.pro
User-Agent: Chrome/116.0.5845.141 Safari/537.36
Accept: text/html
Accept-Language: en-US,en;q=0.9
account=wusandwitch
........
Path / Route 路徑
GET /ctf?question=1 HTTP/2
Host: ntust.pro
User-Agent: Chrome/116.0.5845.141 Safari/537.36
Accept: text/html
Accept-Language: en-US,en;q=0.9
account=wusandwitch
........
Protocol Version 協議版本
Hypter
Text
Transfer
Protocol
超文本傳輸協定
GET /ctf?question=1 HTTP/2
Host: ntust.pro
User-Agent: Chrome/116.0.5845.141 Safari/537.36
Accept: text/html
Accept-Language: en-US,en;q=0.9
account=wusandwitch
........
Host 位址
http://
ntust.pro
/ctf
?question=1
協議
位址 / ip
路徑
參數
伺服器位址
GET /ctf?question=1 HTTP/2
Host: ntust.pro
User-Agent: Chrome/116.0.5845.141 Safari/537.36
Accept: text/html
Accept-Language: en-US,en;q=0.9
account=wusandwitch
........
Header 標頭
請求資訊
（類似Metadata）
GET /ctf?question=1 HTTP/2
Host: ntust.pro
User-Agent: Chrome/116.0.5845.141 Safari/537.36
Accept: text/html
Accept-Language: en-US,en;q=0.9
account=wusandwitch
........
Body 主要資料
夾帶資訊
通常出現在 POST / PATCH / PUT
GET 等 Method 通常不會有
網站運作原理
傳輸
運行
傳輸頁面及腳本
運行程式＆請求資料
?
傳輸？
GET /ctf?question=1 HTTP/2 Host: ntust.pro ...
瀏覽器
伺服器
HTTP/2 200 OK
Content-Type: text/html ...
HTTP/2 200 OK
Date: Mon, 25 Sep 2023 09:23:05 GMT
Content-Type: text/html; charset=UTF-8
<html>
<head>...</head>
<body>...</body>
</html>
Status Code 狀態碼
Credit: splitline
HTTP/2 200 OK
Date: Mon, 25 Sep 2023 09:23:05 GMT
Content-Type: text/html; charset=UTF-8
<html>
<head>...</head>
<body>...</body>
</html>
Header 標頭
回應ㄉ附加資訊
（一樣類似 Metadata）
HTTP/2 200 OK
Date: Mon, 25 Sep 2023 09:23:05 GMT
Content-Type: text/html; charset=UTF-8
<html>
<head>...</head>
<body>...</body>
</html>
Body 主要資料
真 回應資料
（頁面、程式、資料）
HTML / Js / 貓咪圖片
What if...?
GET /ctf?question=1 HTTP/2 Host: ntust.pro ...
瀏覽器
伺服器
HTTP/2 200 OK
Content-Type: text/html ...
What if...?
GET /ctf?question=1 HTTP/2 Host: ntust.pro ...
伺服器
HTTP/2 200 OK
Content-Type: text/html ...
What if...?
GET /ctf?question=1 HTTP/2 Host: ntust.pro ...
大蟒蛇
伺服器
HTTP/2 200 OK
Content-Type: text/html ...
What if...?
GET /ctf?question=1 HTTP/2 Host: ntust.pro ...
Burpsuite (?
伺服器
HTTP/2 200 OK
Content-Type: text/html ...
Burp Suite
CTF
Capture The Flag
FLAG{}
Python Requests
What if...?
GET /ctf?question=1 HTTP/2 Host: ntust.pro ...
大蟒蛇
伺服器
HTTP/2 200 OK
Content-Type: text/html ...
What if...?
GET /ctf?question=1 HTTP/2 Host: ntust.pro ...
大蟒蛇
伺服器
HTTP/2 200 OK
Content-Type: text/html ...
What if...?
GET /ctf?question=1 HTTP/2 Host: ntust.pro ...
大蟒蛇
伺服器
HTTP/2 200 OK
Content-Type: text/html ...
What if...?
GET /ctf?question=1 HTTP/2 Host: ntust.pro ...
大蟒蛇
伺服器
HTTP/2 200 OK
Content-Type: text/html ...
What if...?
GET /ctf?question=1 HTTP/2 Host: ntust.pro ...
大蟒蛇
伺服器
HTTP/2 200 OK
Content-Type: text/html ...
API ?
Application
Programming
Interface
應用程式
可編程
接口
Credit: NightFeather
前端
資料庫
後端
瀏覽器
伺服器
伺服器
HTML / CSS / JS
SQL / Mongo / ...
PHP / node.js / ...
看得到
看不到
看不到
前端
資料庫
後端
渲染？ 頁面資料？
Credit: splitline
HTML
HTML + CSS
HTML + CSS + JS
F12 Developer Tool
Python BeautifulSoup
<h1>
<p>
<li>
<html> 湯
<ul> 湯
<li> 湯
<li> 湯
<li> 湯
find
find
