reveal.js

# HTTPS และ SSL/TLS Certificate

Lesson 6 - Authentication และ Security

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

---

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

<pre class="mermaid">
%%{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<br/>ข้อมูลไม่เข้ารหัส"]
  end
  subgraph Era2["ยุค SSL/TLS / Encrypted Web"]
    B["TLS Handshake<br/>ตกลงกุญแจ"]
    C["Certificate<br/>ยืนยันเว็บไซต์"]
  end
  subgraph Era3["ยุค HTTPS by Default"]
    D["Let's Encrypt<br/>Certificate ฟรี"]
    E["HSTS<br/>บังคับ HTTPS"]
  end
  A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

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

---

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

| หัวข้อ | HTTP | HTTPS |
|---|---|---|
| การเข้ารหัส | ไม่มี | มี TLS |
| ความปลอดภัยระหว่างทาง | ต่ำ | สูงกว่า |
| Certificate | ไม่ใช้ | ต้องมี |
| Browser Trust | อาจเตือน | ได้กุญแจ/ปลอดภัยเมื่อ cert ถูกต้อง |
| เหมาะกับ Login | ไม่เหมาะ | จำเป็น |

---

## Mermaid Diagram: TLS Handshake

<pre class="mermaid">
%%{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
</pre>

---

## Code Example

```caddyfile
# 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 ที่รองรับให้อัตโนมัติ
```

```html


<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](https://www.youtube.com/results?search_query=HTTPS+TLS+SSL+certificate+explained)

---

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

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

---

## End

<a href="/web-programming/12-auth-security/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>