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

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

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

แนวคิดสำคัญ

• 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

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

Mermaid Diagram: Threat Model

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

Code Example

// 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('<', '&lt;');
  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

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

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

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