HTTPS และ SSL/TLS Certificate

HTTPS คือ HTTP ที่ทำงานบน TLS เพื่อเข้ารหัสข้อมูลระหว่าง Client และ Server ส่วน SSL/TLS Certificate คือ Digital Certificate ที่ช่วยยืนยันตัวตนของเว็บไซต์และใช้ประกอบการสร้างการเชื่อมต่อที่ปลอดภัย

Timeline/ประวัติศาสตร์

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
  subgraph Era1["ยุค HTTP / Plain Traffic"]
    A["HTTP
ข้อมูลไม่เข้ารหัส"]
  end
  subgraph Era2["ยุค SSL/TLS / Encrypted Web"]
    B["TLS Handshake
ตกลงกุญแจ"]
    C["Certificate
ยืนยันเว็บไซต์"]
  end
  subgraph Era3["ยุค HTTPS by Default"]
    D["Let's Encrypt
Certificate ฟรี"]
    E["HSTS
บังคับ HTTPS"]
  end
  A --> B --> C --> D --> E

แนวคิดสำคัญ

• HTTP vs HTTPS ต่างกันที่ HTTPS เข้ารหัสข้อมูลระหว่างทาง
• TLS Handshake คือขั้นตอนตกลงการเชื่อมต่อที่ปลอดภัย
• SSL Certificate หรือ TLS Certificate ยืนยันตัวตนของเว็บไซต์
• Let's Encrypt ออก Certificate ฟรีและนิยมใช้ร่วมกับ Certbot
• HSTS บังคับให้ Browser ใช้ HTTPS เสมอ
• Mixed Content เกิดเมื่อหน้า HTTPS โหลด resource ผ่าน HTTP

ตารางเปรียบเทียบ

Mermaid Diagram: TLS Handshake

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
sequenceDiagram
  participant C as Client / Browser
  participant S as Server / Website
  C->>S: ClientHello
  S-->>C: ServerHello + Certificate
  C->>C: Verify Certificate
  C->>S: Key Exchange
  S-->>C: Secure Channel Ready
  C->>S: HTTPS Request
  S-->>C: Encrypted Response

Code Example

# Caddyfile
# Caddy สามารถออกและต่ออายุ HTTPS certificate อัตโนมัติเมื่อใช้ domain จริง
example.com {
  root * /www
  encode gzip
  file_server

  header {
    Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
    X-Content-Type-Options "nosniff"
  }
}

# ตัวอย่างการใช้งาน:
# ชี้ DNS ของ example.com มาที่ server แล้วรัน Caddy
# Caddy จะขอ certificate จาก CA ที่รองรับให้อัตโนมัติ

<!-- mixed-content-example.html -->
<!-- หลีกเลี่ยงการโหลด resource แบบ http ในหน้า https -->
<script src="https://cdn.example.com/app.js"></script>
<img src="https://cdn.example.com/logo.png" alt="Logo">

วิดีโอแนะนำ

• YouTube: HTTPS TLS SSL Certificate Explained

กิจกรรมท้ายบท

1. อธิบาย TLS Handshake เป็นขั้นตอน
2. ตรวจหน้าเว็บว่ามี mixed content หรือไม่
3. เพิ่ม HSTS header ใน reverse proxy หรือ web server
4. เปรียบเทียบการออก certificate ด้วย Caddy และ Certbot

กลับสัปดาห์ที่ 12