Cross-Site Scripting (XSS) คืออะไร และคุณจะป้องกันมันอย่างไร?

Question

Accepted Answer

**Cross-Site Scripting (XSS)** คือช่องโหว่ที่ผู้โจมตีแทรก **JavaScript** ที่เป็นอันตรายเข้าไปในหน้าเว็บที่ผู้ใช้คนอื่นดู โดยมันจะทำงานในเบราว์เซอร์ของพวกเขาเพื่อขโมยข้อมูล ยึด session หรือทำการกระทำในนามของพวกเขา มันเป็นช่องโหว่เว็บที่พบบ่อยและอันตราย แต่ป้องกันได้ด้วยการจัดการ output ที่เหมาะสม ## XSS ทำงานอย่างไร ```text When user input is rendered into a page WITHOUT proper escaping, injected SCRIPTS run: ``` ```html

Welcome, <%= userInput %>

``` สคริปต์ที่ถูกแทรกจะทำงานในเบราว์เซอร์ของเหยื่อ **เสมือนว่ามาจากเว็บไซต์ที่เชื่อถือได้** ทำให้ผู้โจมตีขโมย session cookie/token ยึดบัญชี ดักจับการกดแป้นพิมพ์ หรือทำการกระทำในนามของผู้ใช้ได้ ## ประเภทของ XSS ```text STORED → malicious script SAVED on the server (e.g. in a comment) → served to all viewers REFLECTED → script in a request (e.g. a URL parameter) reflected back in the response DOM-based → client-side JS unsafely puts untrusted data into the DOM ``` ## การป้องกัน ```text ✓ ESCAPE/ENCODE output → render user data as TEXT, not HTML (the key defense): → frameworks (React, Angular, Vue) auto-escape by default → use them properly → escape based on context (HTML, attribute, JS, URL) ✓ AVOID dangerous APIs → innerHTML, dangerouslySetInnerHTML, eval with untrusted data ✓ SANITIZE HTML if you must allow it (e.g. DOMPurify for rich text) ✓ Content Security Policy (CSP) → restricts what scripts can run (defense in depth) ✓ HttpOnly cookies → JS can't read them (limits cookie theft via XSS) ``` ## ทำไมจึงสำคัญ การเข้าใจ XSS และวิธีป้องกันมันเป็นเรื่องจำเป็น เพราะมันเป็น **ช่องโหว่เว็บที่พบบ่อยและอันตราย** ที่ทำให้ผู้โจมตีรันสคริปต์ที่เป็นอันตรายในเบราว์เซอร์ของผู้ใช้ได้ จึงเป็นความรู้ด้านความปลอดภัยที่ต้องรู้สำหรับนักพัฒนาเว็บ การเข้าใจ **ว่ามันทำงานอย่างไร** ว่าการ render input ของผู้ใช้เข้าไปในหน้าเว็บโดยไม่มีการ escape ที่เหมาะสม ทำให้ **JavaScript ที่ถูกแทรกทำงานในเบราว์เซอร์ของผู้ใช้คนอื่นในบริบทของเว็บไซต์ที่เชื่อถือได้** ทำให้ผู้โจมตีขโมย session cookie และ token ยึดบัญชี และทำการกระทำในนามของผู้ใช้ได้ จำเป็นสำหรับการรู้จักและป้องกันช่องโหว่นี้ XSS อันตรายเพราะมันทำให้ session และข้อมูลของผู้ใช้ถูกเจาะ และพบบ่อยในเว็บแอปที่แสดงเนื้อหาที่สร้างโดยผู้ใช้ การเข้าใจ **ประเภทต่าง ๆ** (stored XSS สคริปต์ที่เป็นอันตรายถูกบันทึกบนเซิร์ฟเวอร์และส่งไปยังผู้ดูทุกคน อันตรายที่สุด; reflected XSS สคริปต์ที่สะท้อนกลับจาก request; DOM-based XSS การจัดการ DOM ฝั่ง client อย่างไม่ปลอดภัย) ช่วยให้รู้จักช่องทางการโจมตีที่แตกต่างกัน การเข้าใจ **การป้องกัน** เป็นเรื่องจำเป็น: **การ escape/encode output** (render ข้อมูลของผู้ใช้เป็นข้อความ ไม่ใช่ HTML การป้องกันหลัก ซึ่ง framework สมัยใหม่อย่าง React ทำให้โดยอัตโนมัติเมื่อใช้อย่างถูกต้อง) **การหลีกเลี่ยง API ที่อันตราย** (innerHTML, dangerouslySetInnerHTML, eval กับข้อมูลที่ไม่น่าเชื่อถือ ซึ่งเป็นแหล่ง XSS ที่พบบ่อย) **การ sanitize HTML** เมื่อจำเป็นต้องอนุญาตเนื้อหาที่มีการจัดรูปแบบ (เช่น DOMPurify) **Content Security Policy** (การจำกัดการรันสคริปต์ในฐานะ defense-in-depth) และ **HttpOnly cookies** (ป้องกันไม่ให้ JS อ่านได้) การเข้าใจว่า framework ทำการ escape โดยอัตโนมัติ (ดังนั้นการใช้มันอย่างถูกต้องป้องกัน XSS ส่วนใหญ่ ในขณะที่การหลีกเลี่ยงการ escape ของมันทำให้ XSS กลับมา) มีความสำคัญในทางปฏิบัติ เนื่องจาก XSS เป็นช่องโหว่ที่พบบ่อยและอันตรายที่เจาะ session และข้อมูลของผู้ใช้ โดยเฉพาะในแอปที่แสดงเนื้อหาของผู้ใช้ และเนื่องจากการเข้าใจว่ามันทำงานอย่างไรและจะป้องกันอย่างไร (การ escape output การหลีกเลี่ยง API ที่อันตราย CSP ค่าเริ่มต้นของ framework) จำเป็นสำหรับนักพัฒนาเว็บ การเข้าใจ XSS และการป้องกันจึงเป็นความรู้ด้านความปลอดภัยที่จำเป็นและต้องรู้ เป็นช่องโหว่เว็บพื้นฐานที่ต้องป้องกัน ซึ่งการจัดการ output ที่เหมาะสม (การ escape การใช้ค่าเริ่มต้นของ framework การหลีกเลี่ยง API ที่อันตราย) เป็นความรู้สำคัญในการปกป้องผู้ใช้จากกลุ่มการโจมตีที่แพร่หลาย