HTTP 和 HTTPS 的差別是什麼？

1. 定義與基本概念

HTTP（HyperText Transfer Protocol，超文本傳輸協議）
HTTP 是一種用於在網路上傳輸資料的協議，通常用來在客戶端（例如瀏覽器）和伺服器之間傳送網頁內容（HTML、CSS、JavaScript、圖片等）。
- 特點：資料以明文傳輸，沒有加密，意味著資料在傳輸過程中可能被第三方（例如駭客）攔截或竊聽。
HTTPS（HyperText Transfer Protocol Secure，超文本傳輸安全協議）
HTTPS 是 HTTP 的安全版本，通過在 HTTP 基礎上加入 SSL/TLS（安全套接字層/傳輸層安全協議） 來加密資料。
- 特點：資料在傳輸過程中會被加密，保護用戶隱私和資料安全。

2. 主要差別

以下是 HTTP 和 HTTPS 的核心差異，整理成表格方便理解：

特性	HTTP	HTTPS
安全性	無加密，資料以明文傳輸，易被攔截	使用 SSL/TLS 加密，保護資料安全
傳輸方式	明文傳輸	加密傳輸
預設連接埠	80	443
認證機制	無需 SSL/TLS 憑證	需要 SSL/TLS 憑證
URL 開頭	http://	https://
SEO 影響	搜尋引擎排名較低	搜尋引擎（例如 Google）優先排名
用戶信任	瀏覽器可能顯示「不安全」警告	顯示鎖頭圖示，表示安全連線

3. 詳細說明與範例

為了讓你更清楚 HTTP 和 HTTPS 的差別，我會進一步解釋每個關鍵點，並提供前端工程師可能會遇到的實際情境。

(1) 安全性

HTTP：因為資料是明文傳輸，假設你在咖啡廳的公共 Wi-Fi 上使用 HTTP 網站輸入帳號密碼，駭客可能通過「中間人攻擊」（Man-in-the-Middle Attack）竊取你的資料。
- 範例：你用 HTTP 網站登入，傳輸的資料可能是這樣的明文：
```
{
  "username": "user123",
  "password": "mypassword"
}
```
  這些資料在網路上「裸奔」，非常不安全。
HTTPS：資料經過 SSL/TLS 加密後，傳輸的內容會變成亂碼，只有擁有正確金鑰的伺服器才能解密。
- 範例：同樣的資料在 HTTPS 傳輸時，會被加密成類似這樣的內容：
```
x7b9f2a3c4e5d6f7g8h9i0j1k2l3m4n5...
```
  即使被攔截，駭客也無法輕易解讀。

(2) SSL/TLS 憑證

HTTPS 需要網站擁有 SSL/TLS 憑證，這是一種由受信任的憑證頒發機構（CA，Certificate Authority）簽發的數位證書，用來驗證網站的身份並啟用加密。
前端工程師在開發時，可能需要與後端合作，確保伺服器已正確配置 SSL 憑證。你可以通過以下方式檢查網站是否使用 HTTPS：
- 在瀏覽器網址列檢查是否有「鎖頭」圖示。
- 使用 Chrome 開發者工具（F12） -> Security 標籤，查看憑證狀態。

(3) 前端開發中的影響

作為前端工程師，你可能會在以下情境中感受到 HTTP 和 HTTPS 的差別：

混合內容問題（Mixed Content）：
- 如果你的網站使用 HTTPS，但載入的資源（例如圖片、CSS、JavaScript）來自 HTTP 網址，瀏覽器會顯示警告，甚至阻止這些資源載入。
- 解決方式：確保所有資源（圖片、API 請求等）都使用 HTTPS 網址。例如：
```
// 不安全的 HTTP 資源（錯誤）
<img src="http://example.com/image.jpg" alt="example image">

// 安全的 HTTPS 資源（正確）
<img src="https://example.com/image.jpg" alt="example image">
```

API 請求：

如果你的前端程式碼使用 fetch 或 XMLHttpRequest 呼叫後端 API，HTTPS 網站只能呼叫 HTTPS 的 API，否則會被瀏覽器阻止。

範例：安全的 API 請求程式碼：

fetch("https://api.example.com/data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("錯誤：", error));

(4) SEO 與用戶信任

SEO（搜尋引擎最佳化）：Google 明確表示 HTTPS 網站在搜尋排名上有優勢，因為它提供更安全的用戶體驗。
用戶信任：HTTPS 網站在瀏覽器中會顯示「鎖頭」圖示，讓用戶感到安心。如果是 HTTP 網站，瀏覽器可能會顯示「不安全」的警告，降低用戶信任。

4. 如何從 HTTP 轉換到 HTTPS

作為前端工程師，你可能需要協助網站從 HTTP 升級到 HTTPS。以下是簡單的步驟，詳細且易於操作：

步驟 1：取得 SSL/TLS 憑證

聯繫後端或伺服器管理員，購買或申請免費的 SSL 憑證（例如使用 Let’s Encrypt 提供的免費憑證）。
憑證需要安裝在伺服器上（例如 Nginx、Apache），這通常由後端工程師負責。

步驟 2：更新前端資源

檢查你的 HTML、CSS 和 JavaScript，確保所有資源（圖片、字型、外部腳本等）都使用 HTTPS 網址。

範例：檢查並修改 <script> 標籤：

// 錯誤：使用 HTTP
<script src="http://cdn.example.com/script.js"></script>

// 正確：使用 HTTPS
<script src="https://cdn.example.com/script.js"></script>

步驟 3：設定 301 重定向

與後端合作，將所有 HTTP 請求自動重定向到 HTTPS。例如，在 .htaccess 文件中加入：

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

步驟 4：測試與驗證

使用瀏覽器開發者工具檢查是否有「混合內容」警告。
使用線上工具（例如 SSL Labs）測試 HTTPS 配置是否正確。

5. 總結

HTTP：不安全的資料傳輸方式，適合簡單的靜態網站，但不適合處理敏感資料。
HTTPS：安全的資料傳輸方式，適合所有現代網站，尤其是涉及用戶資料（登入、表單提交等）的場景。
作為前端工程師，建議優先使用 HTTPS，因為它不僅提升安全性，還能改善 SEO 和用戶信任。

1. 定義與基本概念​

2. 主要差別​

3. 詳細說明與範例​

(1) 安全性​

(2) SSL/TLS 憑證​

(3) 前端開發中的影響​

(4) SEO 與用戶信任​

4. 如何從 HTTP 轉換到 HTTPS​

步驟 1：取得 SSL/TLS 憑證​

步驟 2：更新前端資源​

步驟 3：設定 301 重定向​

步驟 4：測試與驗證​

5. 總結​