Broken Access Control คืออะไร
Broken Access Control คือช่องโหว่ด้านความปลอดภัยที่ระบบควบคุมการเข้าถึงทำงานไม่สมบูรณ์ ทำให้ผู้ใช้ทั่วไปสามารถเข้าถึงข้อมูลหรือฟีเจอร์ที่ไม่ควรมีสิทธิ์ได้
ช่องโหว่นี้ถูกบันทึกไว้ใน OWASP Top 10 (A01:2025) และเป็นปัญหาอันดับ 1 ที่พบบ่อยที่สุดใน Web Application สมัยใหม่ โดยเฉพาะโปรเจกต์ที่สร้างด้วย Vibe Coding
กรณีที่พบบ่อยที่สุดในโปรเจกต์ Vibe Coding คือการที่ AI เขียน Logic การตรวจสอบ Password ไว้ที่ ฝั่ง Client (Browser) แทนที่จะเป็น ฝั่ง Server (Backend/API) ซึ่งหมายความว่า Password จริง ๆ ถูกส่งมาพร้อมกับไฟล์ที่โหลดเข้าเครื่องผู้ใช้ทุกคนตั้งแต่แรก
⚠️ ความเสี่ยง: การเข้าเว็บไซต์คือการโหลดสำเนาของโค้ดทั้งหมดมาไว้ที่เครื่อง ถ้า Password ฝังอยู่ใน Source Code ใครก็ตามสามารถเปิดดูได้ทันทีโดยไม่ต้องมีความรู้ด้าน Hacking แม้แต่น้อย
ตัวอย่างกรณีศึกษา: เว็บไซต์บทความ Premium
สถานการณ์: เว็บไซต์สอน Claude Code 101 สร้างด้วย Vibe Coding มีระบบล็อคบทความ ผู้ใช้ต้องจ่ายเงินก่อนถึงจะได้รับ Password มาปลดล็อคเพื่ออ่านเนื้อหา
สิ่งที่เว็บแสดง: กล่องกรอก Password พร้อมข้อความ “กรุณากรอกรหัสผ่านเพื่อเข้าถึงบทความ”
สิ่งที่ซ่อนอยู่ใน Source Code:
ใครก็ตามที่เปิด DevTools ขึ้นมาสามารถเห็น Password จริง ๆ ได้ทันที โดยที่เจ้าของเว็บไม่รู้เลยว่าระบบล็อคของตัวเองไม่ได้ป้องกันอะไรเลย
// HTML version — ฝัง Password ไว้ตรง ๆ ใน Script
const PASSWORD = 'claude101'
form.addEventListener('submit', e => {
e.preventDefault()
if (input.value === PASSWORD) {
// แสดงบทความ
}
})// React / Next.js version — ใช้ Environment Variable แต่ยังหลุดอยู่
if (password === process.env.NEXT_PUBLIC_PASSWORD) {
onUnlock()
}ดูตัวอย่างเว็บไซต์จริงที่:
vibe-coding-security.vercel.app/broken-access-control-html.html (Version HTML)
vibe-coding-security.vercel.app/broken-access-control (Version React / Next.js / Vite.js)
วิธีตรวจสอบด้วย View Source และ DevTools ใน Chrome
ใช้เวลาไม่เกิน 5 นาที สามารถตรวจสอบได้เองง่าย ๆ ดังนี้
กรณี HTML ธรรมดา: ใช้ View Source
เว็บไซต์ที่ไฟล์ลงท้ายด้วย .html ตรวจสอบได้ง่ายที่สุด
- เปิดเว็บไซต์ใน Chrome
- คลิกขวาที่หน้าเว็บ → เลือก View Page Source (หรือกด
Ctrl+U/Cmd+U) - กด
Ctrl+F/Cmd+Fแล้วค้นหาคำว่าpassword,PASSWORD, หรือpass - ถ้าพบ Password อยู่ในโค้ด แปลว่าช่องโหว่นี้มีอยู่จริงในเว็บไซต์ของคุณ
กรณี React.js / Next.js / Vite.js: ใช้ Network Tab
เว็บไซต์ที่สร้างด้วย Framework สมัยใหม่จะเก็บโค้ดไว้ในไฟล์ JavaScript แยกต่างหาก ต้องตรวจสอบผ่าน DevTools
ขั้นตอนที่ 1: เปิด DevTools
คลิกขวาที่หน้าเว็บ → Inspect หรือกด F12 จากนั้นคลิกที่แถบ Network
ขั้นตอนที่ 2: กรองไฟล์ JS
ในแถบ Network ให้กดที่ปุ่ม JS เพื่อกรองให้เห็นเฉพาะไฟล์ JavaScript จากนั้น Reload หน้าเว็บ (Ctrl+R หรือ Cmd+R) เพื่อให้ไฟล์ทั้งหมดโหลดใหม่
ขั้นตอนที่ 3: ตรวจสอบไฟล์ที่น่าสงสัย
กดเข้าไปที่ไฟล์ JS ที่น่าจะเกี่ยวข้องกับหน้านั้น (เช่น ไฟล์ที่มีชื่อว่า page, index, หรือชื่อ Component) แล้วดูที่แถบ Response
สามารถ Search All เพื่อค้นหาหลาย ๆ ไฟล์ได้
ถ้าไม่อยากไล่อ่านโค้ดเอง ให้ Copy โค้ดทั้งหมดในไฟล์ที่น่าสงสัยแล้วไปถาม AI ด้วย Prompt นี้:
Analyze this source code and try to find any hardcoded password
or secret for security testing purposes.สิ่งที่ต้องระวัง:
- ตัวแปรชื่อ
PASSWORD,SECRET,KEY,TOKEN - ค่าที่ดูเหมือน Password อยู่ในเครื่องหมาย
' 'หรือ" " - Environment Variable ที่ขึ้นต้นด้วย
NEXT_PUBLIC_หรือVITE_
สาเหตุที่เกิด Broken Access Control ใน Vibe Coding Project
AI เขียน Logic ตรวจ Password ไว้ที่ฝั่ง Client
เมื่อสั่ง AI ให้สร้างระบบล็อคด้วย Password AI มักเขียนโค้ดที่เปรียบเทียบ Password ในเบราว์เซอร์ของผู้ใช้ แทนที่จะส่งไปตรวจสอบที่ Server นั่นหมายความว่า Password จริงต้องถูกส่งมาที่เครื่องผู้ใช้ก่อน จึงจะเปรียบเทียบได้ — ซึ่งทำให้ใครก็ตามสามารถดู Password นั้นได้
ตั้งชื่อตัวแปรว่า `NEXT_PUBLIC_` แต่คิดว่าปลอดภัย
ใน Next.js ตัวแปรที่ขึ้นต้นด้วย NEXT_PUBLIC_ จะถูก Bundle รวมเข้าไปในไฟล์ JavaScript ที่ส่งไปให้ Browser โดยอัตโนมัติ นั่นหมายความว่า NEXT_PUBLIC_PASSWORD=claude101 ใน .env ไม่ต่างจากการเขียน const PASSWORD = 'claude101' ตรง ๆ ในโค้ดเลย เพราะ PUBLIC คือ PUBLIC — ทุกคนสามารถเห็นค่านั้นได้
รายชื่อ Prefix ของแต่ละ Framework
Framework ส่วนใหญ่จะป้องกันไม่ให้ตัวแปรในไฟล์ .env หลุดไปที่ Client โดยอัตโนมัติ เว้นแต่คุณจะใช้ Prefix ที่กำหนดไว้ดังนี้:
| Framework / Tool | Prefix ที่จะถูกส่งไป Frontend |
| Next.js | NEXT_PUBLIC_ |
| Vite (React, Vue, Svelte) | VITE_ |
| Create React App | REACT_APP_ |
วิธีแก้ไข Broken Access Control ใน Vibe Coding Project
เมื่อพบว่ามีการฝัง Password ไว้ใน Client-side Code ให้ใช้ Prompt นี้กับ AI เพื่อแก้ไข:
ตรวจสอบระบบ Password ในหน้า [ชื่อหน้า] และแก้ไขให้ถูกต้องโดย:
1. ย้าย Logic การตรวจสอบ Password ไปไว้ที่ Backend API แทน
2. หน้าเว็บส่งแค่ Password ที่ผู้ใช้กรอกไปให้ API ตรวจสอบ
3. API ตอบกลับมาแค่ว่า "ถูก" หรือ "ผิด" พร้อม Token สำหรับเข้าถึงเนื้อหา
4. ห้ามเก็บ Password จริงไว้ใน Environment Variable ที่ขึ้นต้นด้วย NEXT_PUBLIC_ หรือ VITE_
อ้างอิงหลักการ Server-side Validation และ OWASP Top 10 (A01:2025 Broken Access Control)คำถามที่พบบ่อย (FAQ)
คือช่องโหว่ที่ระบบควบคุมการเข้าถึงทำงานไม่สมบูรณ์ ในกรณีนี้คือการฝัง Password ไว้ใน Source Code ที่ฝั่ง Client ทำให้ใครก็ตามสามารถดู Password ได้โดยไม่ต้องจ่ายเงิน
เพราะการ “ซ่อน” บนหน้าเว็บ (เช่น ใช้ CSS ซ่อนองค์ประกอบ หรือ blur เนื้อหา) ไม่ได้กันไม่ให้ดูโค้ด ตราบใดที่ไฟล์ถูกโหลดมาที่เครื่องแล้ว ใครก็ตามสามารถเปิดดู Source Code ได้ทันที
NEXT_PUBLIC_PASSWORD ใน .env ปลอดภัยไหม? ไม่ปลอดภัย เพราะ NEXT_PUBLIC_ บอกให้ Next.js Bundle ค่านั้นเข้าไปในไฟล์ JavaScript ที่ส่งให้ Browser ทุกคนโดยตรง ต้องใช้ตัวแปรที่ไม่มี NEXT_PUBLIC_ นำหน้า และตรวจสอบ Password ที่ Backend เท่านั้น
ส่งผลต่อรายได้โดยตรง (ผู้ใช้ไม่ต้องจ่ายเงินก็เข้าถึงเนื้อหาได้), ความน่าเชื่อถือของเว็บไซต์ และอาจส่งผลต่อการละเมิดสิทธิ์ของเนื้อหาที่คุณสร้างขึ้น