Excessive Data Exposure คืออะไร และวิธีตรวจสอบการให้ข้อมูลเยอะเกินจำเป็นใน Vibe Coding Project

Excessive Data Exposure คืออะไร

Excessive Data Exposure คือช่องโหว่ด้านความปลอดภัยที่ API ส่งข้อมูลกลับมามากกว่าที่หน้าเว็บต้องการใช้งาน โดยที่ข้อมูลส่วนเกินเหล่านั้นอาจเป็นข้อมูลส่วนตัวของผู้ใช้คนอื่น เช่น ชื่อ, อีเมล, เบอร์โทรศัพท์ หรือข้อมูลที่ไม่ควรเปิดเผย

ช่องโหว่นี้ถูกบันทึกไว้ใน OWASP API Security Top 10 (API3:2019) และถือเป็นหนึ่งในความผิดพลาดที่พบบ่อยที่สุดใน Web Application สมัยใหม่ โดยเฉพาะโปรเจกต์ที่สร้างด้วย Vibe Coding

⚠️ ความเสี่ยง: แม้หน้าเว็บจะแสดงข้อมูลให้ดูเฉพาะบางส่วน แต่ถ้า API ส่งข้อมูลทั้งหมดมา ใครก็ตามที่เปิด Network Tab ใน DevTools สามารถดูข้อมูลที่ซ่อนอยู่ทั้งหมดได้ทันที

ตัวอย่างกรณีศึกษา: เว็บไซต์คอร์สเรียน

สถานการณ์: เว็บไซต์คอร์สเรียนออนไลน์ที่สร้างด้วย Vibe Coding มีหน้าแสดงรายชื่อคอร์สและจำนวนผู้เข้าเรียน

สิ่งที่เว็บแสดง: ชื่อคอร์ส + จำนวนคนลงทะเบียน เช่น “Claude Cowork รุ่น 1 — 128 คน”

สิ่งที่ API ส่งมาจริง: นอกจากชื่อคอร์สและจำนวนคน ยังมี รายชื่อผู้เรียนทุกคนพร้อมข้อมูลส่วนตัว ซ่อนอยู่ใน Response

ใครก็ตามที่เปิด Network Tab ขึ้นมาสามารถเห็นชื่อและข้อมูลติดต่อของผู้เรียนทุกคนได้ทันที โดยที่เจ้าของเว็บไม่รู้เลยว่าข้อมูลรั่วไหลออกไป

ดูตัวอย่างเว็บไซต์จริงที่: vibe-coding-security.vercel.app/excessive-data-exposure

วิธีตรวจสอบด้วย Network Tab ใน Chrome

ใช้เวลาไม่เกิน 5 นาที สามารถตรวจสอบได้เองง่าย ๆ ดังนี้

ขั้นตอนที่ 1: เปิด DevTools

เปิดเว็บไซต์ของคุณใน Chrome แล้ว คลิกขวา → Inspect หรือกด F12 เพื่อเปิด DevTools จากนั้นคลิกที่แถบ Network

ขั้นตอนที่ 2: กรอง Fetch/XHR

ในแถบ Network ให้กดที่ปุ่ม Fetch/XHR เพื่อกรองให้เห็นเฉพาะ API Request จากนั้น Reload หน้าเว็บ (Ctrl+R หรือ Cmd+R) เพื่อให้ Request ทั้งหมดโหลดใหม่

ขั้นตอนที่ 3: ตรวจสอบ Response

กดเข้าไปที่แต่ละ Request แล้วดูที่แถบ Preview หรือ Response

สิ่งที่ต้องระวัง:

• ชื่อ, อีเมล, เบอร์โทรผู้ใช้คนอื่น
• รหัสผ่าน (แม้จะเป็น Hash)
• ข้อมูลการชำระเงิน
• ข้อมูล Internal ที่ไม่ควรเปิดเผยต่อ Public

สาเหตุที่เกิด Excessive Data Exposure ใน Vibe Coding Project

AI เขียน API ที่ส่งข้อมูลมากกว่าที่ใช้งาน

เมื่อสั่ง AI ให้สร้าง API เพื่อดึงข้อมูล AI มักเขียนโค้ดที่ Query ข้อมูลทั้งหมดออกมาจาก Database แล้วส่งกลับทั้งก้อน เช่น

// API ส่งข้อมูลกลับมาทั้งหมด ทั้งที่หน้าเว็บใช้แค่บางฟิลด์
{
  "courses": [
    {
      "id": "course_001",
      "title": "Claude Cowork รุ่น 1",
      "studentCount": 128,
      "students": [
        {
          "name": "สมชาย ใจดี",
          "email": "somchai@email.com",
          "phone": "081-234-5678"
        }
      ]
    }
  ]
}

หน้าเว็บต้องการแค่ title และ studentCount แต่ API ดันส่ง students ทั้งหมดมาด้วย

ไม่มีการตรวจสอบ Response ที่ส่งกลับมา

เมื่อสร้างโปรเจกต์ด้วย Vibe Coding มักโฟกัสที่ว่าหน้าเว็บ “ทำงานได้” โดยไม่ได้ตรวจสอบว่า API ส่งข้อมูลอะไรกลับมาบ้าง ทำให้ข้อมูลส่วนตัวของผู้ใช้รั่วไหลโดยไม่รู้ตัว

วิธีแก้ไข

เมื่อพบว่า API ส่งข้อมูลเกินจำเป็น ให้ใช้ Prompt นี้กับ AI เพื่อแก้ไข:

ตรวจสอบ API endpoint ที่ [ชื่อ endpoint] 
และแก้ไขให้ส่งกลับเฉพาะฟิลด์ที่จำเป็นสำหรับหน้าเว็บนี้เท่านั้น 
ห้ามส่งข้อมูลส่วนตัวของผู้ใช้ เช่น email, phone, หรือข้อมูลที่ไม่ได้แสดงผลบนหน้าจอ
อ้างอิงหลักการ Least Privilege และ OWASP API Security Top 10 (API3: Excessive Data Exposure)