reveal.js

# CORS, CSRF, XSS — ภัยคุกคามและการป้องกัน

Lesson 4 - Authentication และ Security

**Web Security** ต้องเข้าใจทั้งข้อจำกัดของ Browser และรูปแบบโจมตีที่ใช้ประโยชน์จาก cookie, script และ input ของผู้ใช้ เช่น **CORS**, **CSRF**, **XSS** และ **SQL Injection**

---

## 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["ยุค Same-Origin / Browser Boundary"]
    A["Same-Origin Policy<br/>จำกัด cross-origin"]
  end
  subgraph Era2["ยุค Cross-Origin API"]
    B["CORS<br/>อนุญาต origin ที่กำหนด"]
    C["CSRF<br/>ปลอม request ด้วย cookie"]
  end
  subgraph Era3["ยุค Script Injection Defense"]
    D["XSS<br/>ฝัง script อันตราย"]
    E["CSP + Sanitize<br/>ลดความเสี่ยง"]
  end
  A --> B --> C --> D --> E
</pre>

---

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

- **CORS** เกี่ยวกับ Same-Origin Policy และการอนุญาต cross-origin request
- **`Access-Control-Allow-Origin`** กำหนด Domain ที่อนุญาต
- **CSRF** คือการปลอมแปลง Request จาก Domain อื่น โดยอาศัย cookie ของผู้ใช้
- **ป้องกัน CSRF** ด้วย CSRF Token และ SameSite Cookie
- **XSS** คือการฝัง Script อันตรายในหน้าเว็บ
- **ป้องกัน XSS** ด้วยการ sanitize input, escape output และ Content Security Policy
- **SQL Injection** ป้องกันด้วย Parameterized Query และ ORM

---

## ตารางภัยคุกคามและการป้องกัน

| ภัยคุกคาม | โจมตีอะไร | วิธีป้องกัน |
|---|---|---|
| CORS ผิดพลาด | Cross-origin access | จำกัด origin ที่ไว้ใจ |
| CSRF | Request ที่ใช้ cookie | CSRF token, SameSite |
| XSS | Script ในหน้าเว็บ | sanitize, escape, CSP |
| SQL Injection | Query ฐานข้อมูล | parameterized query, ORM |

---

## Mermaid Diagram: Threat Model

<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 TD
  A["Attacker Site<br/>เว็บโจมตี"] --> B["Victim Browser<br/>เบราว์เซอร์ผู้ใช้"]
  B --> C["Target API<br/>API เป้าหมาย"]
  D["Malicious Input<br/>input อันตราย"] --> E["XSS Script<br/>script ถูกฝัง"]
  E --> B
  C --> F["Protection<br/>CORS CSRF CSP SQL Params"]
</pre>

---

## Code Example

```js
// security-middleware-demo.mjs
// ตัวอย่างตั้งค่า CORS และ security headers แบบพื้นฐาน
import express from 'express';
import cors from 'cors';
import helmet from 'helmet';

const app = express();

app.use(express.json());

app.use(cors({
  origin: ['http://localhost:4200', 'https://example.com'],
  credentials: true
}));

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'"]
    }
  }
}));

app.post('/comment', (req, res) => {
  // ตัวอย่าง: ควร sanitize/validate ก่อนบันทึกลงฐานข้อมูล
  const safeText = String(req.body.text ?? '').replaceAll('<', '<');
  res.json({ saved: safeText });
});

app.listen(3000, () => console.log('Security demo on http://localhost:3000'));

// ตัวอย่างการใช้งาน:
// npm install express cors helmet
// ส่ง POST /comment พร้อม body { "text": "<script>alert(1)</script>" }
```

---

## วิดีโอแนะนำ

- [YouTube: CORS CSRF XSS Explained](https://www.youtube.com/results?search_query=CORS+CSRF+XSS+explained)

---

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

1. วิเคราะห์ form submit ที่เสี่ยง CSRF
2. เขียนรายการ header ที่ควรตั้งค่า
3. ทดลอง input ที่มี `<script>` และอธิบายวิธีป้องกัน
4. เปลี่ยน raw SQL เป็น parameterized query

---

## 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>