Security

XSS Attack คืออะไร แก้ยังไง

📅 2026-02-09 | โดย อ.บอม กิตติทัศน์ เจริญพนาสิทธิ์ — SiamCafe.net Since 1997

XSS Attack: ภัยร้ายบนเว็บไซต์ที่คุณต้องรู้ทัน

น้องๆ เคยเจอปัญหาเว็บแปลกๆ โผล่มาไหม? หรือเห็นข้อความที่เราไม่ได้พิมพ์เองขึ้นบนเว็บที่เราเล่นอยู่ทุกวัน? นั่นแหละ อาจจะเป็นฝีมือของ XSS Attack หรือ Cross-Site Scripting นี่แหละครับ สมัยผมทำร้านเน็ตก็เคยเจอเคสลูกค้าโดนแฮก Facebook เพราะโดน XSS หลอกเอา cookie ไป โคตรซวยเลย!

XSS คืออะไร? ทำไมต้องระวัง?

XSS เป็นการโจมตีโดยการแทรกสคริปต์อันตราย (ส่วนใหญ่เป็น JavaScript) เข้าไปในเว็บไซต์ที่เหยื่อใช้งานอยู่ พอเหยื่อเข้าเว็บนั้น สคริปต์ก็จะทำงานทันที ทำให้คนร้ายสามารถขโมยข้อมูล, เปลี่ยนหน้าเว็บ, หรือแม้แต่หลอกให้เหยื่อทำอะไรก็ได้ตามใจชอบ

ทำไมต้องระวังน่ะเหรอ? ก็เพราะ XSS มันร้ายแรงไง! มันสามารถทำให้ข้อมูลส่วนตัวของลูกค้าเราหลุด, ทำลายความน่าเชื่อถือของเว็บไซต์, หรือแม้แต่ทำให้ธุรกิจเจ๊งได้เลยนะเว้ย! สมัยนี้คนทำเว็บต้องระวังเรื่องนี้ให้ดีๆ เลยนะ

ประเภทของ XSS Attack

XSS มันมีหลายแบบนะน้องๆ หลักๆ ก็จะมี 3 แบบที่เจอกันบ่อยๆ:

• Stored XSS (Persistent XSS): สคริปต์อันตรายจะถูกบันทึกไว้ในฐานข้อมูลของเว็บไซต์เลย พอใครก็ตามเข้าหน้าเว็บที่ข้อมูลนั้นแสดง สคริปต์ก็จะทำงานทันที อันนี้อันตรายสุดๆ เพราะมันจะโจมตีทุกคนที่เข้าเว็บนั้น
• Reflected XSS (Non-Persistent XSS): สคริปต์อันตรายจะมากับ URL หรือ form ที่เราส่งไปให้เว็บ พอเว็บแสดงผลข้อมูลที่เราส่งไป สคริปต์ก็จะทำงาน อันนี้จะโจมตีเฉพาะคนที่คลิกลิงก์หรือส่ง form นั้นๆ
• DOM-based XSS: สคริปต์อันตรายจะทำงานในฝั่ง client-side โดยใช้ JavaScript แก้ไข DOM (Document Object Model) ของหน้าเว็บ อันนี้จะตรวจจับยากหน่อย เพราะมันไม่ได้ส่งข้อมูลไปที่ server

แต่ละแบบก็มีวิธีป้องกันที่แตกต่างกันไป แต่หลักๆ ก็คือต้อง "sanitize" หรือ "escape" ข้อมูลทุกอย่างที่รับมาจากผู้ใช้ก่อนที่จะเอาไปแสดงผล

วิธีป้องกัน XSS Attack: ป้องกันไว้ดีกว่าแก้

การป้องกัน XSS Attack ต้องทำหลายขั้นตอนนะน้องๆ ไม่ใช่แค่ทำอย่างเดียวแล้วจะรอด ต้องทำควบคู่กันไปถึงจะปลอดภัย

1. Input Validation: ตรวจสอบข้อมูลตั้งแต่ต้นทาง

ก่อนที่จะรับข้อมูลอะไรก็ตามจากผู้ใช้ (เช่น จาก form, URL, cookie) ต้องตรวจสอบให้แน่ใจก่อนว่าข้อมูลนั้นถูกต้องตามที่เราต้องการ เช่น ถ้าเป็นเบอร์โทรศัพท์ ก็ต้องมีแค่ตัวเลข ถ้าเป็นอีเมล ก็ต้องมี @ และ .com เป็นต้น ถ้าข้อมูลไม่ถูกต้อง ก็ให้ปฏิเสธไปเลย ไม่ต้องเอามาใช้งาน

function validatePhoneNumber(phoneNumber) {
  const regex = /^[0-9]+$/;
  return regex.test(phoneNumber);
}

if (!validatePhoneNumber(phoneNumberInput.value)) {
  alert("กรุณากรอกเบอร์โทรศัพท์เป็นตัวเลขเท่านั้น");
  return;
}

โค้ดข้างบนเป็นตัวอย่างการตรวจสอบเบอร์โทรศัพท์ว่ามีแต่ตัวเลขเท่านั้น ถ้าไม่ใช่ ก็จะแจ้งเตือนผู้ใช้

2. Output Encoding (Escaping): แปลงข้อมูลก่อนแสดงผล

เวลาที่เราจะเอาข้อมูลที่รับมาจากผู้ใช้ไปแสดงผลบนหน้าเว็บ ต้อง "encode" หรือ "escape" ข้อมูลนั้นก่อน เพื่อป้องกันไม่ให้สคริปต์อันตรายทำงาน เช่น ถ้าผู้ใช้ใส่ <script>alert('XSS')</script> เข้ามา เราต้องแปลง < เป็น &lt; และ > เป็น &gt; ก่อนที่จะเอาไปแสดงผล

function escapeHTML(str) {
  return str.replace(/[&<>"']/g, function(m) {
    switch (m) {
      case '&':
        return '&';
      case '<':
        return '<';
      case '>':
        return '>';
      case '"':
        return '"';
      case "'":
        return ''';
      default:
        return m;
    }
  });
}

const userInput = "<script>alert('XSS')</script>";
const escapedInput = escapeHTML(userInput);
// escapedInput จะเป็น "&lt;script&gt;alert('XSS')&lt;/script&gt;"

โค้ดข้างบนเป็นตัวอย่างการ escape HTML โดยการแปลงตัวอักษรพิเศษให้เป็น HTML entities

3. Content Security Policy (CSP): กำหนดแหล่งที่มาของสคริปต์

CSP เป็นกลไกที่ช่วยให้เรากำหนดได้ว่าสคริปต์จากแหล่งไหนบ้างที่สามารถทำงานบนเว็บไซต์ของเราได้ เช่น เราอาจจะอนุญาตให้สคริปต์จากโดเมนของเราเองเท่านั้นที่ทำงานได้ ถ้ามีสคริปต์จากโดเมนอื่นพยายามทำงาน เว็บเบราว์เซอร์ก็จะบล็อกมันโดยอัตโนมัติ

การตั้งค่า CSP สามารถทำได้โดยการส่ง HTTP header หรือใส่ meta tag ในหน้า HTML

<meta http-equiv="Content-Security-Policy" content="default-src 'self';">

โค้ดข้างบนเป็นตัวอย่างการตั้งค่า CSP โดยอนุญาตให้สคริปต์จากโดเมนของตัวเองเท่านั้นที่ทำงานได้

4. ใช้ Framework ที่ปลอดภัย

ถ้าเราใช้ framework ในการพัฒนาเว็บไซต์ (เช่น React, Angular, Vue.js) Framework เหล่านี้มักจะมีกลไกในการป้องกัน XSS มาให้แล้วในตัว เช่น React จะ escape ข้อมูลทั้งหมดโดยอัตโนมัติก่อนที่จะเอาไปแสดงผลบนหน้าเว็บ

แต่ถึงแม้จะใช้ framework ที่ปลอดภัย เราก็ยังต้องระวังเรื่อง XSS อยู่ดีนะ เพราะ framework มันไม่ได้ป้องกันให้เราทุกอย่าง เราก็ต้องเขียนโค้ดให้ปลอดภัยด้วย

ตารางเปรียบเทียบ XSS แต่ละประเภท

ประเภท	ลักษณะ	วิธีการโจมตี	วิธีการป้องกัน
Stored XSS	สคริปต์ถูกบันทึกในฐานข้อมูล	ผู้ใช้เข้าชมหน้าที่แสดงสคริปต์	Input validation, Output encoding, CSP
Reflected XSS	สคริปต์มากับ URL หรือ form	ผู้ใช้คลิกลิงก์หรือส่ง form	Input validation, Output encoding
DOM-based XSS	สคริปต์ทำงานใน client-side	JavaScript แก้ไข DOM	Input validation, Output encoding, ใช้ framework ที่ปลอดภัย

ตารางนี้สรุปประเภทของ XSS Attack พร้อมทั้งวิธีการโจมตีและป้องกัน หวังว่าน้องๆ จะเข้าใจมากขึ้นนะ

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

ดูวิดีโอเพิ่มเติมเกี่ยวกับXSS Attack คืออะไร แก้ยังไง:

FAQ: คำถามที่พบบ่อยเกี่ยวกับ XSS Attack

น้องๆ หลายคนอาจจะมีคำถามเกี่ยวกับ XSS Attack ผมเลยรวบรวมคำถามที่พบบ่อยมาตอบให้แล้ว

1. ถ้าเว็บไซต์ของฉันไม่ได้เก็บข้อมูลสำคัญอะไรเลย ฉันยังต้องกังวลเรื่อง XSS อยู่ไหม?

ถึงแม้เว็บไซต์ของน้องจะไม่ได้เก็บข้อมูลสำคัญอะไรเลย น้องก็ยังต้องกังวลเรื่อง XSS อยู่นะ เพราะ XSS มันสามารถใช้ในการโจมตีรูปแบบอื่นๆ ได้ เช่น ใช้ในการ redirect ผู้ใช้ไปยังเว็บไซต์อันตราย, ใช้ในการติดตั้ง malware ลงบนเครื่องของผู้ใช้, หรือใช้ในการทำลายชื่อเสียงของเว็บไซต์

2. ฉันสามารถป้องกัน XSS ได้ 100% เลยไหม?

ไม่มีอะไรในโลกนี้ที่ป้องกันได้ 100% หรอกน้อง แต่ถ้าเราทำตามวิธีที่ผมบอกมาข้างต้นอย่างเคร่งครัด ก็จะช่วยลดความเสี่ยงในการโดน XSS ได้เยอะมากๆ สิ่งสำคัญคือต้องคอยอัปเดตความรู้และติดตามข่าวสารเกี่ยวกับ XSS อยู่เสมอ เพราะวิธีการโจมตีมันมีการพัฒนาอยู่ตลอดเวลา

3. มีเครื่องมืออะไรบ้างที่ช่วยในการตรวจจับ XSS?

มีเครื่องมือหลายอย่างที่ช่วยในการตรวจจับ XSS เช่น static analysis tools ที่จะช่วยวิเคราะห์โค้ดของเราเพื่อหาช่องโหว่, dynamic analysis tools ที่จะช่วยจำลองการโจมตีเพื่อดูว่าเว็บไซต์ของเรามีช่องโหว่หรือไม่, และ web application firewalls (WAFs) ที่จะช่วยกรอง traffic ที่เข้ามายังเว็บไซต์ของเราเพื่อบล็อกการโจมตี XSS

สุดท้ายนี้ อยากฝากน้องๆ ทุกคนว่าเรื่อง Security ไม่ใช่เรื่องเล่นๆ นะ ต้องให้ความสำคัญและใส่ใจในรายละเอียด เพราะถ้าพลาดไปทีเดียว อาจจะเสียหายเยอะเลย SiamCafe Blog มีบทความดีๆ เกี่ยวกับ Security อีกเยอะ ลองเข้าไปอ่านกันดูได้นะ แล้วก็อย่าลืมแวะมา SiamCafe Blog บ่อยๆ นะครับ!

Best Practices ในการป้องกัน XSS

1. Escape Output อย่างสม่ำเสมอ

สมัยผมทำร้านเน็ตฯ นี่เจอพวกนี้บ่อย เพราะเด็กๆ ชอบลองอะไรใหม่ๆ หนึ่งในวิธีที่ง่ายที่สุดคือการ escape output ทุกครั้งที่เราจะแสดงผลข้อมูลที่มาจาก user ไม่ว่าจะเป็นชื่อ, comment หรืออะไรก็ตาม ที่สำคัญคือต้องเลือกฟังก์ชัน escape ให้เหมาะสมกับบริบทด้วยนะ

<!-- ตัวอย่าง PHP -->
<p>สวัสดีครับ, <?php echo htmlspecialchars($_GET['name'], ENT_QUOTES, 'UTF-8'); ?></p>

htmlspecialchars() ใน PHP เป็นตัวช่วยที่ดี แต่ต้องระวังเรื่อง character encoding ด้วยนะ ไม่งั้นอาจจะเจอปัญหาแปลกๆ ตามมาได้

2. Validate Input ให้เข้มงวด

การ validate input คือปราการด่านแรกเลยครับ ก่อนที่จะเอาข้อมูลอะไรก็ตามไปใช้ ต้องตรวจสอบให้แน่ใจก่อนว่ามันเป็นไปตามที่เราคาดหวัง เช่น ถ้าเป็น email ก็ต้องมี format ที่ถูกต้อง ถ้าเป็นตัวเลขก็ต้องอยู่ในช่วงที่กำหนดไว้

<!-- ตัวอย่าง JavaScript -->
function isValidEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

if (!isValidEmail(email)) {
  alert("Email ไม่ถูกต้อง!");
}

สมัยก่อนผมเคยเจอเคสที่เด็กมัน inject SQL เข้ามาในช่อง username เพราะเราไม่ได้ validate input ให้ดีพอ บทเรียนราคาแพงเลยครับ

3. Content Security Policy (CSP)

CSP คือตัวช่วยที่ทรงพลังในการควบคุมว่า browser จะโหลด resources อะไรได้บ้าง เช่น script, stylesheet หรือ image การตั้งค่า CSP ที่ดีจะช่วยลดความเสี่ยงในการโดน XSS ได้อย่างมาก

<!-- ตัวอย่าง HTTP Header -->
Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com;

CSP อาจจะดูซับซ้อนในช่วงแรก แต่รับรองว่าคุ้มค่าที่จะเรียนรู้ครับ มันเหมือนกับการสร้าง whitelist ให้ browser รู้ว่าอะไรที่ปลอดภัย และอะไรที่ไม่ควรโหลด

4. ใช้ Framework ที่มี XSS Protection ในตัว

Framework สมัยใหม่ส่วนใหญ่จะมีกลไกในการป้องกัน XSS มาให้ในตัวอยู่แล้ว เช่น React, Angular หรือ Vue.js การเลือกใช้ framework เหล่านี้จะช่วยลดภาระในการดูแลเรื่อง security ไปได้เยอะครับ ลองดู SiamCafe Blog อาจมีบทความที่ช่วยได้

FAQ คำถามที่พบบ่อย

ทำไมต้อง Escape Output ทั้งๆ ที่ Validate Input แล้ว?

การ validate input เป็นสิ่งที่ดี แต่ไม่สามารถรับประกันได้ 100% ว่าข้อมูลที่เข้ามาจะปลอดภัยเสมอไป อาจมีช่องโหว่ที่เรามองไม่เห็น หรืออาจมี bypass techniques ใหม่ๆ เกิดขึ้นได้ การ escape output จึงเป็นเหมือน double-check ที่ช่วยป้องกัน XSS ได้อีกชั้นหนึ่งครับ

CSP ต้องตั้งค่าอย่างไร?

การตั้งค่า CSP ขึ้นอยู่กับลักษณะของ application ของเรา ไม่มีสูตรสำเร็จตายตัว แต่หลักการคือเราต้องระบุให้ชัดเจนว่า browser สามารถโหลด resources อะไรได้บ้าง และมาจากที่ไหนบ้าง ลองศึกษาจาก MDN Web Docs ดูครับ มีตัวอย่างเยอะแยะเลย

XSS ต่างจาก SQL Injection อย่างไร?

XSS คือการ inject script เข้าไปในฝั่ง client (browser) เพื่อหลอก user หรือขโมยข้อมูล ส่วน SQL Injection คือการ inject SQL code เข้าไปในฝั่ง server เพื่อเข้าถึงหรือแก้ไข database ทั้งสองอย่างเป็น security vulnerability ที่ร้ายแรง แต่มีวิธีการป้องกันที่แตกต่างกัน

iCafeForex เกี่ยวอะไรกับ XSS?

จริงๆ แล้ว iCafeForex ไม่ได้เกี่ยวอะไรกับ XSS โดยตรงครับ แต่ security เป็นเรื่องสำคัญสำหรับทุกธุรกิจ ไม่ว่าจะเป็นร้านเน็ตฯ หรือบริษัท financial technology

สรุป

XSS เป็นภัยคุกคามที่ร้ายแรง แต่ก็สามารถป้องกันได้ด้วยความรู้และความเข้าใจที่ถูกต้อง การ escape output, validate input, ใช้ CSP และเลือก framework ที่มี XSS protection ในตัว ล้วนเป็น best practices ที่เราควรนำไปใช้ในการพัฒนา web application ของเรา