ทำไมเราถึงต้องอยากรู้ว่าเว็บไซต์แต่ละแห่งสร้างด้วยอะไร
เวลาเราเริ่มหัดเขียนโปรแกรม เรามักจะสงสัยว่าเว็บสวยๆ ที่เราเห็นเขาใช้เครื่องมืออะไรสร้างขึ้นมา การรู้ว่าเว็บนั้นใช้ Tech Stack (ชุดเทคโนโลยีที่ใช้สร้างเว็บ เช่น ภาษาโปรแกรมหรือฐานข้อมูล) จะช่วยให้เรามองเห็นภาพรวมของงานในสายอาชีพนี้ได้ชัดเจนขึ้น มันเหมือนกับการที่เราเดินดูบ้านแล้วอยากรู้ว่าเขาใช้อิฐอะไร ปูนยี่ห้อไหน หรือใช้โครงสร้างเหล็กแบบใด เพื่อที่เราจะได้นำมาปรับใช้กับโปรเจกต์ของตัวเองในอนาคต
สำหรับมือใหม่ การเรียนรู้ผ่านการ Reverse Engineering (การวิเคราะห์ย้อนกลับเพื่อดูว่าสิ่งที่เห็นสร้างขึ้นมาได้อย่างไร) เป็นวิธีที่ทรงพลังมาก เมื่อคุณเริ่มมองออกว่าเว็บไซต์ไหนใช้ React (ไลบรารีสำหรับสร้างส่วนติดต่อผู้ใช้) หรือเว็บไหนใช้ WordPress (ระบบจัดการเนื้อหาเว็บไซต์) คุณจะเริ่มเข้าใจว่าเทคโนโลยีแต่ละตัวเหมาะกับงานประเภทไหน และคุณควรเลือกเรียนอะไรเพื่อให้ได้งานที่ตลาดต้องการ
แต่การไล่คลิกดูทีละเว็บมันสนุกแค่ช่วงแรกเท่านั้น หากคุณต้องทำ Bulk Detection (การตรวจสอบข้อมูลจำนวนมากพร้อมกัน) เช่น คุณอยากรู้ว่าบริษัทในลิสต์ 5,000 เว็บไซต์ใช้ระบบอะไรบ้าง การทำด้วยมือคงเป็นไปไม่ได้เลย เราจึงต้องหันมาใช้สคริปต์หรือโปรแกรมช่วย ซึ่งเป็นทักษะสำคัญที่โปรแกรมเมอร์ยุคใหม่ต้องมีติดตัวไว้ เพื่อจัดการกับข้อมูลมหาศาลได้อย่างรวดเร็วและแม่นยำ
รู้จักกับร่องรอยทางดิจิทัลหรือ Fingerprints
ทุกเว็บไซต์ทิ้ง Fingerprints (ร่องรอยหรือเอกลักษณ์เฉพาะตัวที่เทคโนโลยีนั้นๆ ทิ้งไว้) เสมอครับ เปรียบเหมือนเวลาเราดูรอยนิ้วมือบนแก้วน้ำ เราก็รู้ว่าใครเป็นคนจับ เครื่องมือตรวจสอบเทคโนโลยีส่วนใหญ่ทำงานโดยการมองหา "ร่องรอย" เหล่านี้ในโค้ดของเว็บไซต์ เช่น ชื่อไฟล์เฉพาะ หรือข้อมูลที่ซ่อนอยู่ในส่วนหัวของหน้าเว็บที่เรียกว่า HTTP Headers (ข้อมูลส่วนเกินที่ส่งมาพร้อมหน้าเว็บเพื่อบอกรายละเอียดเซิร์ฟเวอร์)
ลองนึกภาพว่าคุณกำลังตามหาว่าร้านอาหารร้านไหนใช้เตาอบยี่ห้ออะไร คุณคงไม่เข้าไปถามเชฟตรงๆ แต่คุณอาจจะสังเกตจากกล่องบรรจุภัณฑ์ที่วางอยู่หลังร้าน หรือการออกแบบเมนูที่เป็นเอกลักษณ์ เครื่องมือตรวจจับเว็บก็ทำแบบเดียวกัน มันจะวิ่งไปดึงโค้ด HTML (ภาษาที่ใช้โครงสร้างหลักของหน้าเว็บ) แล้วเอาไปเทียบกับฐานข้อมูลที่มีรูปแบบของเทคโนโลยีต่างๆ เก็บไว้นับหมื่นรูปแบบ
โครงการที่เป็นหัวใจสำคัญของเรื่องนี้คือ webappanalyzer ซึ่งเป็นเครื่องมือแบบ Open-source (ซอฟต์แวร์ที่เปิดเผยโค้ดให้ทุกคนนำไปใช้หรือแก้ไขได้) โดยมันเก็บรูปแบบการตรวจจับไว้มากมาย เช่น การเช็คว่าในโค้ดมีคำว่า "WordPress" หรือไม่ หรือมีการเรียกใช้ไฟล์สคริปต์ชื่อเฉพาะของเทคโนโลยีนั้นๆ หรือเปล่า นี่คือพื้นฐานที่ทำให้คอมพิวเตอร์สามารถ "เดา" ได้ว่าเว็บนั้นสร้างด้วยอะไร
// ตัวอย่างรูปแบบการตรวจจับ WordPress
"WordPress": {
"meta": {
"generator": "^WordPress ?([\\d.]+)?\\;version:\\1"
},
"html": "<link rel=\"stylesheet\" id=\"wp-block-library-css\""
}ส่วนของโค้ดนี้คือการกำหนดค่าในฐานข้อมูลครับ บรรทัดที่ 3 คือการบอกให้โปรแกรมไปหาคำว่า "WordPress" ในส่วนของ meta tag (แท็กที่เก็บข้อมูลสรุปของหน้าเว็บ) ส่วนบรรทัดที่ 5 คือการเช็คว่าในโค้ด HTML มีการเรียกใช้ไฟล์ CSS ที่ชื่อว่า wp-block-library หรือไม่ หากเจอ แสดงว่ามีโอกาสสูงมากที่เว็บนั้นใช้ WordPress
ผลลัพธ์ที่ได้จากการรันคำสั่งนี้คือค่า Boolean (ค่าความจริงที่มีแค่ จริง หรือ เท็จ) หากเครื่องมือเจอรูปแบบที่กำหนดไว้ มันจะคืนค่ากลับมาว่า "ใช่ เว็บนี้คือ WordPress" แต่ถ้าไม่เจอ มันก็จะข้ามไปตรวจตัวเลือกถัดไปในฐานข้อมูลจนกว่าจะครบทุกรายการ
ข้อจำกัดของเครื่องมือตรวจจับทั่วไป
เครื่องมือส่วนใหญ่ที่เราใช้กันในปัจจุบันทำงานในระดับ Static Analysis (การวิเคราะห์โดยอ่านโค้ดนิ่งๆ ไม่มีการรันโปรแกรม) ซึ่งก็เหมือนกับการอ่านหนังสือแล้วพยายามเดาว่าเนื้อเรื่องเป็นอย่างไรโดยไม่ได้ดูหนังที่สร้างจากหนังสือเล่มนั้น มันเร็วและประหยัดทรัพยากรมาก แต่มันมักจะพลาดสิ่งที่ "ซ่อนอยู่" หรือสิ่งที่เกิดจากการทำงานของ JavaScript (ภาษาที่ทำให้เว็บโต้ตอบกับผู้ใช้ได้) ในภายหลัง
สมมติว่าคุณกำลังมองหาเว็บที่ใช้ Shopify (แพลตฟอร์มสำหรับทำร้านค้าออนไลน์) ถ้าคุณแค่โหลดโค้ด HTML มาอ่าน บางครั้งคุณจะไม่เห็นร่องรอยอะไรเลย เพราะข้อมูลเหล่านั้นถูกดึงมาโชว์หลังจากที่หน้าเว็บโหลดเสร็จแล้วโดยโปรแกรมที่ทำงานอยู่เบื้องหลัง การใช้แค่การอ่านโค้ดดิบๆ จึงเหมือนการดูภาพนิ่งแทนที่จะดูวิดีโอ ทำให้เราพลาดข้อมูลสำคัญไปกว่าครึ่ง
มือใหม่หลายคนมักจะตกม้าตายตรงนี้ คือเชื่อมั่นในผลลัพธ์จากเครื่องมือทั่วไปมากเกินไปจนลืมไปว่า เว็บไซต์สมัยใหม่มีการทำงานที่ซับซ้อนมาก การตรวจจับด้วยวิธีเดิมๆ จึงให้ผลลัพธ์ที่ต่ำกว่าความเป็นจริงเสมอ หากคุณต้องการเก็บข้อมูลเพื่อทำวิเคราะห์ธุรกิจหรือทำการตลาด การรู้แค่ "ผิวเผิน" อาจทำให้คุณเสียโอกาสในการเห็นภาพรวมที่แท้จริงของคู่แข่งหรือกลุ่มเป้าหมาย
ทำไม Real Browser ถึงตรวจจับได้แม่นยำกว่า 2 เท่า
วิธีแก้ปัญหาที่ดีที่สุดคือการใช้ Real Browser (เบราว์เซอร์จริงๆ เช่น Chrome หรือ Firefox ที่รันบนเครื่อง) แทนที่จะอ่านแค่โค้ดดิบ เราจะให้โปรแกรมสั่งเปิดเบราว์เซอร์ขึ้นมาจริงๆ แล้วปล่อยให้มันรัน JavaScript ทั้งหมดจนจบ เมื่อหน้าเว็บแสดงผลเสร็จสมบูรณ์ เราค่อยเข้าไปเช็คข้อมูลในหน่วยความจำของเบราว์เซอร์นั้น วิธีนี้ทำให้เราเห็นทุกอย่างที่ผู้ใช้งานทั่วไปเห็น
เมื่อเราใช้เบราว์เซอร์จริงๆ เราจะเจอสิ่งที่เรียกว่า Global Variables (ตัวแปรที่ถูกประกาศไว้ให้ใช้ได้ทั่วทั้งเว็บ) ซึ่งเทคโนโลยีหลายตัวมักจะทิ้งชื่อไว้ในนี้เพื่อบอกตัวเองว่า "ฉันถูกโหลดขึ้นมาแล้วนะ" เช่น หากเว็บนั้นใช้ React เราอาจจะเจอตัวแปรชื่อ __REACT_DEVTOOLS_GLOBAL_HOOK__ วิ่งอยู่ในเบราว์เซอร์ ซึ่งเครื่องมืออ่านโค้ดดิบไม่มีทางมองเห็นสิ่งนี้ได้เลย
การใช้เบราว์เซอร์จริงอาจจะช้ากว่าการอ่านโค้ดดิบหลายเท่าตัว แต่ถ้าพูดถึงความแม่นยำ มันชนะขาดลอย โดยปกติแล้ววิธีนี้สามารถตรวจจับเทคโนโลยีได้มากกว่าวิธีเดิมถึง 2 เท่า เพราะมันครอบคลุมทั้งสิ่งที่เขียนไว้ใน HTML และสิ่งที่ถูกสร้างขึ้นมาในขณะที่หน้าเว็บกำลังทำงานอยู่จริงๆ นี่คือเทคนิคที่นักวิเคราะห์ข้อมูลระดับมืออาชีพเลือกใช้
// ตัวอย่างการใช้ Puppeteer เพื่อเปิดเบราว์เซอร์จริง
const puppeteer = require('puppeteer'); // ดึงไลบรารีสำหรับสั่งงานเบราว์เซอร์
(async () => {
const browser = await puppeteer.launch(); // สั่งเปิดเบราว์เซอร์ขึ้นมา
const page = await browser.newPage(); // สร้างหน้าเว็บใหม่
await page.goto('https://example.com'); // เข้าไปที่เว็บไซต์เป้าหมาย
// ตรวจสอบตัวแปรในเบราว์เซอร์
const isReact = await page.evaluate(() => !!window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
console.log('React detected:', isReact);
await browser.close(); // ปิดเบราว์เซอร์เมื่อเสร็จงาน
})();ในโค้ดนี้ เราใช้ puppeteer (เครื่องมือควบคุมเบราว์เซอร์ Chrome) บรรทัดที่ 4 คือการสั่งเปิดเบราว์เซอร์ขึ้นมาจริงๆ ส่วนบรรทัดที่ 8 คือการสั่งให้เบราว์เซอร์ตรวจสอบว่ามีตัวแปร __REACT_DEVTOOLS_GLOBAL_HOOK__ อยู่หรือไม่ ซึ่งเป็นตัวบ่งชี้ว่าเว็บนี้ใช้ React
ผลลัพธ์ที่ได้คือข้อความ React detected: true หรือ false ตามจริง ซึ่งแม่นยำกว่าการเดาจากชื่อไฟล์มาก เพราะนี่คือการถามจากสิ่งที่ระบบกำลังใช้งานอยู่จริงๆ ในขณะนั้น
ข้อควรระวังในการทำ Bulk Detection
เวลาคุณรันโปรแกรมเพื่อดึงข้อมูลจากหลายพันเว็บไซต์พร้อมกัน คุณต้องระวังเรื่อง Rate Limiting (การจำกัดจำนวนครั้งที่เข้าถึงเว็บไซต์ในเวลาที่กำหนด) หากคุณส่งคำขอเข้าไปถี่เกินไป เซิร์ฟเวอร์ของเป้าหมายอาจจะมองว่าคุณเป็น Bot (โปรแกรมอัตโนมัติ) ที่เป็นอันตรายและทำการแบน IP ของคุณได้ทันที อย่าลืมใส่การหน่วงเวลาไว้ในโปรแกรมด้วย
อีกเรื่องที่สำคัญคือการจัดการกับ Memory Leak (ปัญหาหน่วยความจำค้างเนื่องจากโปรแกรมลืมคืนค่าที่ไม่ใช้แล้ว) การเปิดเบราว์เซอร์ 5,000 ครั้งติดต่อกันโดยไม่ปิดให้ดีจะทำให้คอมพิวเตอร์ของคุณค้างแน่นอน มือใหม่มักจะลืมสั่งปิดเบราว์เซอร์ในทุกๆ รอบของการวนลูป ทำให้แรมเครื่องเต็มจนเครื่องดับไปก่อนจะเก็บข้อมูลครบ
สุดท้าย ให้ทำเฉพาะกับข้อมูลที่เป็นสาธารณะเท่านั้น การเข้าถึงข้อมูลในส่วนที่ต้องล็อกอินหรือข้อมูลส่วนตัวของผู้อื่นถือเป็นเรื่องที่ผิดจรรยาบรรณและผิดกฎหมาย ให้นึกเสมอว่าเรากำลังทำเพื่อเรียนรู้เทคโนโลยี ไม่ใช่เพื่อไปละเมิดความเป็นส่วนตัวของใคร การเป็นโปรแกรมเมอร์ที่ดีต้องมาพร้อมกับความรับผิดชอบต่อสังคมดิจิทัลด้วยเสมอ
สรุปและแนวทางการนำไปใช้
การเข้าใจว่าเว็บไซต์สร้างขึ้นมาได้อย่างไรเป็นก้าวแรกที่ดีในการเป็นโปรแกรมเมอร์ที่มองภาพรวมออก คุณได้เรียนรู้แล้วว่าการตรวจจับด้วยการอ่านโค้ดดิบอาจไม่เพียงพอ และการใช้เบราว์เซอร์จริงจะช่วยให้คุณเห็นความลับของเทคโนโลยีได้ลึกซึ้งขึ้น หากคุณอยากลองทำโปรเจกต์แรก แนะนำให้ลองเขียนสคริปต์ง่ายๆ เพื่อดึงชื่อเทคโนโลยีจากเว็บไซต์ที่คุณชื่นชอบสัก 10 เว็บไซต์ก่อน
การเรียนรู้ที่จะใช้เครื่องมืออย่าง Puppeteer จะเป็นแต้มต่อสำคัญในการหางาน เพราะมันไม่ใช่แค่การตรวจจับเทคโนโลยี แต่ยังรวมไปถึงการทำ Web Scraping (การดึงข้อมูลจากเว็บไซต์มาใช้งาน) ซึ่งเป็นทักษะที่บริษัทต่างๆ ต้องการตัวมากที่สุดทักษะหนึ่ง ลองเริ่มจากโปรเจกต์เล็กๆ บนเครื่องตัวเอง แล้วคุณจะพบว่าโลกของเว็บนั้นน่าสนใจกว่าที่ตาเห็นเยอะเลยครับ
เมื่อคุณทำจนคล่องแล้ว ลองขยับขยายไปสู่การเก็บข้อมูลลงฐานข้อมูลจริงๆ หรือทำเป็น Dashboard (หน้าจอสรุปผลข้อมูล) เพื่อแสดงผลลัพธ์ที่สวยงาม นี่จะเป็นส่วนหนึ่งของ Portfolio (แฟ้มสะสมผลงาน) ที่จะทำให้คุณโดดเด่นกว่าผู้สมัครคนอื่นๆ ในการสัมภาษณ์งานครั้งแรก ขอให้สนุกกับการแกะรอยเทคโนโลยีครับ!
ที่มา: How to detect any website's tech stack in bulk (and why a real browser finds 2x more) — DEV Community
