The Apple’s Grand Mistake: บทเรียนราคาแพงจากไฟล์ธรรมด๊าธรรมดา
By Teeramet Eakwilai,
Penetration Tester Team, Datafarm Company Limited
สวัสดีครับมิตรรักชาว sec ทุกท่าน ❤
วันนี้เราจะมาเหลากันกับเหตุการณ์หนึ่งในช่วงต้นเดือนพฤศจิกายนที่ผ่านนี้กัน ซึ่งก็คือเหตุการ์ณที่ Apple ได้เผลอเปิดให้เข้าถึงไฟล์ Source map ของเว็บ App store ของตัวเองบน Production environment โดยเหตุการณ์นี้ก่อให้เกิดความตื่นตระหนกแก่ชาวนักพัฒนาเว็บไซต์เป็นอย่างมาก และถือเป็นกรณีศึกษาสำหรับชาว Sec ในการดูแลความปลอดภัยในส่วนนี้เช่นกัน
แล้วเจ้า Source map มันคืออะไรละ
Source Map คือไฟล์ที่ทำหน้าที่เป็นคล้ายๆกับแผนที่หรือแผนผัง ที่จะมีหน้าที่ในการเชื่อมโยงระหว่าง Source code และ Generated code ที่ถูกย่อขนาด (Minified) หรือคอมไพล์ (Compiled) แล้ว ซึ่งในโลกของการพัฒนาเว็บสมัยใหม่ๆ เหล่านักพัฒนาเว็บไซต์ส่วนใหญ่ก็มักจะใช้ภาษาหรือ Framework ที่ซับซ้อนขึ้นกว่าแต่ก่อน เช่น TypeScript, Svelte, React หรือ Vue.js ก่อนที่จะถูกแปลงและย่อขนาดให้เป็นไฟล์ JavaScript และ CSS ที่มีขนาดเล็กเพื่อให้สามารถโหลดบนเว็บไซต์ได้เร็วยิ่งขึ้น
อย่างในรูปผมได้เขียน Typescript ง่ายๆ ที่เห็นแว่บแรกก็เข้าใจได้ง่ายทันที นั้นก็คือการเก็บชื่อ Firstname และได้แปลงเป็น JavaScript เพื่อนำไปใช้งาน แต่จะเห็นได้ชัดเจนเลยครับว่าข้อมูลหรือตัวอักษรมันยาวขึ้น !
ภาพที่ 1 : การแปลงไฟล์ TypeScript เป็น JavaScript
และแน่นอนว่าหากนำ TypeScript ที่ใช้งานจริงมาแปลงเป็น JavaScript ความยากในการเข้าใจก็จะมีความซับซ้อนที่สูงมากขึ้นตาม
ดังนั้นไฟล์ Source map นี้ก็จะทำหน้าที่ในการเชื่อมทั้งสองอย่างให้เข้าใจได้ง่ายขึ้น ซึ่งโดยปกติแล้ว ไฟล์ Source Map มักจะอยู่ในรูปแบบไฟล์ “.js.map” ที่เชื่อมโยงบรรทัดของโค้ดใน Production Code กลับไปยังบรรทัดที่สอดคล้องกันใน Source Code โดยเมื่อเกิด Error หรือ Bug ในเว็บไซต์ นักพัฒนาสามารถใช้เครื่องมือ Debugger ของเบราว์เซอร์เพื่อดู Stack Trace ที่ชี้ไปยัง Source code ได้ทันที ซึ่งช่วยให้การ Debug ง่ายและรวดเร็วขึ้นอย่างมาก
ภาพที่ 2: จุดสังเกตการที่แสดงถึงการใช้งาน Source Map
โดยหลังจากการสร้าง Source Map ขึ้นมาแล้วจะมีหน้าตาแบบนี้
ภาพที่ 3: หน้าตาของ Source Map ไฟล์
จะเห็นได้ว่า… อ่านไม่รู้เรื่องกว่าเดิมอีก 5555555555555555555
แต่ถ้าสังเกตุดีๆ Source Map จะมีการแบ่งสัดส่วนได้อย่างชัดเจนคือ
- Version >> บอกว่าใช้ source map เวอร์ชันไหน
- File >> บอกว่าไฟล์ที่ generated คือไฟล์ไหน (ในที่นี้คือ example.js)
- sourceRoot >> บอกโครงสร้างของโฟลเดอร์ไฟล์ มักใช้สำหรับการประหยัดพื้นที่
- sources >> บอกถึงไฟล์ที่ใช้ในการสร้างไฟล์ที่ได้เอามารวมกัน (ปกติจะใช้คำว่า bundle.js หรือ utils.js) เพื่อ map กับ source code ต้นฉบับ (ในที่นี้คือ example.ts)
- name >> บอกถึงตัวแปร หรือ method ต่างๆ บน code
- mapping >> [ส่วนสำคัญ] ส่วนที่ใช้ในการยึดโยงทั้ง Source code และ generated code เข้าด้วยกัน โดยมีหลักการทำงานในรูปแบบของ Base64 VLQ (Variable Length Quantity) ซึ่งจุดนี้คือจุดที่ทำให้ประหยัดพื้นที่ และทำให้โหลดเร็วขึ้นจริงๆ
และแน่นอนว่าในโลกความเป็นจริงเราจะไม่วิเคราะห์ mapping property นี้แน่ๆ ยิ่งเว็บไซต์ใหญ่ๆ ซับซ้อนๆ คงได้อ้วกกันไปข้าง แต่ … ชาว Sec อย่างเรามีเครื่องมืออยู่แล้วนั้นก็คืออออ “Sourcemapper” นั้นเองง
ภาพที่ 4: Meme Sourcemapper
โดยเครื่องมือนี้จะลดความยุ่งยากในการ map ระหว่าง source code และ generated code ลงได้อย่างมีนัยยะสำคัญ และจะ Export ออกมาเป็นโฟลเดอร์ webpack ไว้ให้ด้วย อ่าน Source code กันสนุกแน่นอน 5555
ภาพที่ 5:หน้าตาของ Sourcemapper
หลังจากที่ได้รู้จัก Source map กันไปแล้ว กลับมาที่ Apple Source map Incident ที่กล่าวไว้ตอนต้น หลายๆท่านคงสงสัยว่ามันเกิดขึ้นได้อย่างไร จริงๆแล้วเหตุการณ์นี้มันไม่ได้เกิดจากการโจมตีไปที่ช่องโหว่ของระบบอะไรเลย แต่มันเกิดจากการ “ลืม” เนื่องจาก Framework สมัยใหม่ส่วนใหญ่มักจะมีการสร้างไฟล์ Source map ขึ้นอยู่แล้วเพื่อเพิ่มประสิทธิภาพในการใช้งานเว็บแอปพลิเคชันหลังจาก Compiled Source code
ดังนั้นแล้วพวก UI Components (Svelte/TypeScript), State Management Logic หรือ Routing Configuration ของ Apple ก็จะถูกรวมไว้บนไฟล์ Source map และจะถูก Reverse-Engineer ออกมาเป็น Original Source code ได้(เกือบ)ทั้งหมดในที่สุด แต่โชคดีของ Apple ที่ Source code ส่วนนี้เป็นส่วนของ Front-End Code เท่านั้น ไม่ใช่ Back-End Code โดยหลังจากที่ Apple สะดุ้งกับเหตุการณ์นี้ ก็ได้ดำเนินการทางกฎหมาย (DMCA Takedown) บนแหล่งที่โพสข้อมูล Source code ดังกล่าวทั้งหมด
ภาพที่ 6: Apple’s DMCA Takedown
ดังนั้นแล้วชาว Sec อย่างเราก็จะมี Best Practice ในการแก้ปัญหานี้ได้ง่ายๆ อยู่ 2 รูปแบบ คือ
1. ปิดการสร้างไฟล์ Source map บน Framework ที่เราใช้งานไปเลย ไม่ให้ build ไม่ให้สร้าง ไม่ให้ผุดไม่ให้เกิดกันไปเลย โดยส่วนใหญ่มักปิดกันในไฟล์ “.config.js” ต่างๆ เช่น vite.config.js ในส่วนของ build หรือ webpack.config.js ในส่วนของ devtool นอกจากนี้หากปิดการสร้างไปแล้วก็ควรตรวจสอบใน wwwroot ของเราอีกครั้งด้วยว่าได้ลบไฟล์ source map เหล่านี้ออกไปทั้งหมดยัง โดยมักจะอยู่ในโฟลเดอร์ build, dist, public ก่อนที่จะ deploy นะครับ
“แต่เดี๋ยวก่อนนนนนน ถ้าไม่ให้สร้าง ผม(นักพัฒนาเว็บไซต์เอง)
จะ debug ได้ยังไงเล่า ใครจะไปรู้ว่ามัน error จากตรงไหน”
ดังนั้นในฐานะชาว Sec ก็จะตอบว่าไป “Deploy บน UAT แล้ว Debug สิ !!” (แซว)
ภาพที่ 7: WebDev vs ชาว Sec
จริงๆแล้วปัญหานี้จะนำมาสู่วิธีที่สองนั้นก็คือ
2. จำกัดการเข้าถึงไฟล์ source map พวกนี้สิ ไม่ว่าจะต้องเป็นการใช้ basic authentication, การใช้ VPN หรือการตั้งค่าในไฟล์ .htaccess ต่างๆ แต่ทั้งนี้ทั้งนั้นวิธีนี้ก็ควรตรวจสอบการตั้งค่าการเข้าถึงให้ถี่ถ้วนก่อนการใช้งานจริงนะครับ
ดังนั้นจากเรื่องราวของเหตุการณ์นี้ถือเป็นบทเรียนที่ดี (สำหรับเรา) เพื่อให้ตระหนักถึงส่วนเล็กๆของเว็บไซต์ที่มักจะถูกลืมกันไป แต่ผลกระทบอาจจะทำให้ลืมกันไม่ลงกันไปอีกนานเลย นอกจากนี้จริงๆแล้วไฟล์ Source map จะไม่นับเป็นส่วนของ Security Misconfiguration เลย ถ้าข้อมูลส่วนนั้นเป็นข้อมูลที่ Public อยู่แล้ว และไม่มีข้อมูล Sensitive ใดๆของระบบอยู่ เช่น Hard-Code Credential / API Keys
ทั้งนี้หากพูดถึงข้อมูล Sensitive ที่อยู่บนโลกออนไลน์แล้ว เราจะรู้ได้อย่างไรว่าข้อมูลเหล่านั้นเป็นของเรา ข้อมูลที่ใครๆก็อยากจะขโมยไปใช้งาน ผมขอแนะนำ Personar เลยครับ เป็นเครื่องมือช่วยตรวจสอบการข้อมูลที่มีรั่วไหลอยู่บนโลกอินเตอร์เน็ตอันโหดร้ายนี้ได้ ไม่ว่าจะเป็นจาก Dark web, Deep web หรือแหล่งอื่นๆ และคอยแจ้งเตือนเสมือนมีเพื่อนคอยเตือนอยู่ข้างๆ ก่อนที่ใครจะได้เอาข้อมูลนี้ไปใช้งานต่อ หรือส่งผลกระทบอื่นๆได้ครับ โดยสามารถติดตามข่าวสารเพิ่มเติมได้ที่เพจ Personar Thailand บน Facebook ได้เลยครับ
แล้วตอนนี้เว็บไซต์ของ “คุณ” ได้ตรวจสอบ และลบไฟล์ Source map ของคุณหรือยัง ?
สวัสดีครับ
อ้างอิง:
https://web.dev/articles/source-maps
https://developer.mozilla.org/en-US/docs/Glossary/Source_map
https://css-tricks.com/should-i-use-source-maps-in-production/
https://pulsesecurity.co.nz/articles/javascript-from-sourcemaps https://github.com/github/dmca/blob/master/2025/11/2025-11-05-apple.md
