iT邦幫忙

2023 iThome 鐵人賽

DAY 13
0
Security

學分的追逐,資安的啟程系列 第 13

Day 13 Web 基礎介紹 (一)

  • 分享至 

  • xImage
  •  

什麼是 Web?

  • World  Wide  Web
  • 全球資訊網
  • 一種系統,以 網際網路 為連結核心,將所有的 網頁網站 連結在一起
    • 網頁 : 與網際網路相連的檔案
    • 網站 : 由許多網頁組成

前端 Front-end VS 後端 Back-end

常常聽到有人在說前端還是後端,而什麼是前端 ? 什麼又是後端 ?

其實所謂的前端就是指使用者在瀏覽器中看到和與之互動的部分,負責網頁的外觀和用戶體驗

而後端則是在伺服器端執行的部分,負責處理數據、業務邏輯、伺服器設置等,並向前端提供所需的資料

特點 前端 Front-end 後端 Back-end
使用者可不可見 用戶可以直接看到和互動的部分 通常不可見於用戶,處理背後運算和數據
使用技術 HTML、CSS、JavaScript等 Node.js、Python、Ruby on Rails等
處理範圍 主要處理用戶界面互動和數據呈現 負責處理數據庫、業務邏輯和伺服器設置
安全性 主要關注用戶端安全性 主要關注伺服器端安全性
前後端互動 與後端通信以獲取數據和執行操作 提供數據給前端,接收來自前端的請求

https://ithelp.ithome.com.tw/upload/images/20230928/20162775rtUpbr9OT6.png

網路上的梗圖

我們是怎麼看到一個網站的 ?

https://ithelp.ithome.com.tw/upload/images/20230928/20162775VrHui2CWnA.png

上面是我們平常看見一個網站的過程

看起來有點複雜,但我們可以想像這就是一個買東西的過程,接下來會以買東西的比喻來介紹 Web 中使用到的三大概念 URL , HTTP, HTML

https://ithelp.ithome.com.tw/upload/images/20230928/201627757WDIUZWQ3z.png

URL(Uniform Resource Locator)

我們在買東西的時候,首先要先知道東西會在哪裡賣,而 URL 就代表賣東西的那間商店的地址
https://ithelp.ithome.com.tw/upload/images/20230928/20162775y0yUgKFjBq.png

  • 統一資源定位符
  • 代表網站的位置

常見格式

https://ithelp.ithome.com.tw/upload/images/20230928/201627759XlwHi52J6.png

協定(Protocol)
指定了訪問資源的方式,例如HTTP、HTTPS、FTP等。HTTP和HTTPS是最常見的協議,用於訪問網頁

伺服器位置(Host)
也稱主機名或域名,代表資源所在的伺服器的名稱或IP地址

埠號(Port)
這是伺服器上處理資源請求的端口號,通常不必指定,因為它們有默認值,像是 http的預設值是80, https是443

檔案路徑 & 檔名(Path)
這是伺服器上資源的位置,通常是一個目錄或文件的路徑

查詢字符串(Query String)
用於向伺服器傳遞參數或資訊,通常以問號(?)開頭

片段ID(Fragment Identifier)
指示瀏覽器在載入網頁後,將頁面滾動到指定的位置或元素,而不必重新請求整個網頁

範例

https://ithelp.ithome.com.tw/upload/images/20230928/20162775oFJhk4Fxil.png

HTML(Hypertext Markup Language)

HTML 就像是描述你要買的東西長什麼樣子,用於創建網頁的結構和內容
https://ithelp.ithome.com.tw/upload/images/20230928/20162775uz4YcqfzLA.png

  • 超文本標記語言
  • 描述網頁內容與架構
  • 瀏覽器可以將其視覺化
  • "網頁骨架"
  • 充滿<標籤> (tag)

範例

<!DOCTYPE html>
<html>
<head>
    <title>網頁標題</title>
</head>
<body>
    <h1>這是標題</h1>
    <p>這是文字</p>
    <a href="https://www.example.com">訪問網站</a>
</body>
</html>

HTTP(Hypertext Transfer Protocol)

HTTP就像是告訴你要怎麼買東西,也就是使用者端跟伺服器端之間要如何溝通的協定,用於在網際網路上傳輸超文本(如網頁)

https://ithelp.ithome.com.tw/upload/images/20230928/20162775xvtyjF9VnQ.png

  • 超文本傳輸協定

Hypertext (超文本) : 意思是擁有超鏈接(一點就跳去另一個網頁)能力的文件。

  • 是一種用來傳輸超媒體(HTML)文件的應用層協定
  • 規範了使用者端請求與伺服器回應的標準
  • HTTP 傳送是明文的,這意味著資料可能會被竊聽或修改。為了提高安全性,通常使用 HTTPS(HTTP Secure),它使用 SSL/TLS 加密來保護資料。

https://ithelp.ithome.com.tw/upload/images/20230928/201627750EvvAMveK5.png

GET

  • 向伺服器請求資料
  • 資料的相關內容直接丟在URL上
  • 資料大小會受限於URL的長度

格式 : 網址?參數名稱1=參數內容1&參數名稱2=參數內容2...

POST

  • 詳細資料傳輸存放在網頁傳輸的封包當中
  • 封包攔截仍然能查詢到相關資訊
  • 相較 GET 已經無法直接用URL取得隱私資料

HTTP 狀態碼 ( HTTP Status Code )

HTTP 協議中用於描述伺服器對使用者端發出的請求的回應狀態的三位數字代碼,目的是為使用者端和伺服器之間的通信提供標準化的方式,以便更好地處理請求和回應

狀態碼 代表
1XX 訊息提示 (Informational)
2XX 代表成功 (Successful)
3XX 重新導向 (Redirection)
4XX 用戶端錯誤 (Client Error)
5XX 伺服器錯誤 (Server Error) 
  • 一些常見的狀態碼
    • 1xx(Informational)

      • 100 Continue:伺服器已收到部分請求,使用者端應繼續發送請求的其餘部分
    • 2xx(Successful)

      • 200 OK:請求成功,伺服器已回應請求
      • 201 Created:請求成功,伺服器已創建新資源
      • 204 No Content:請求成功,伺服器無需回傳內容
    • 3xx(Redirection)

      • 301 Moved Permanently:資源永久移動,使用者端應該使用新的URL
      • 302 Found:資源暫時移動,使用者端應繼續使用原始URL
      • 304 Not Modified:使用者端的快取版本仍然有效,無需重新下載
    • 4xx(Client Error)

      • 400 Bad Request:伺服器無法理解使用者端的請求
      • 401 Unauthorized:請求需要驗證,使用者端未提供有效的驗證資訊
      • 403 Forbidden:伺服器拒絕了使用者端的請求,通常是由於權限問題引起的
      • 404 Not Found:伺服器未找到請求的資源
    • 5xx(Server Error)

      • 500 Internal Server Error:伺服器遇到內部錯誤,無法完成請求
      • 502 Bad Gateway:伺服器充當代理或閘道,但從上游伺服器接收到無效的回應
      • 503 Service Unavailable:伺服器暫時無法處理請求,通常是由於過載或維護引起的
    • 更多


上一篇
Day 12 Kali 你的工具好幫手(二)
下一篇
Day 14 Web 基礎介紹(二)
系列文
學分的追逐,資安的啟程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言