Capture mobile network traffic

มันคืออะไร

บทความนี้จะมาแนะนำ Tools สำหรับ capture mobile network traffic ครับ เครื่องมือแบบนี้มีหลายชื่อเลยบางคนเรียก proxy tools, sniff package tools, network monitoring tools,.... มันอยู่ในกลุ่มเครื่องมือประเภทเดียวกันละครับ

สาย IT/Engineer ที่เกี่ยวข้องกับ Network น่าจะคุ้นเคยเป็นอย่างดี เพราะเป็นเครื่องมือที่จะช่วยให้เรามองเห็นว่าโปรแกรมต่างๆ ที่ใช้งานอยู่นั้นคุยไปที่ไหนกับใครและได้อะไรกลับมา

เครื่องมือนี้จะช่วยอะไรเรา

จะขอยกตัวอย่างในแนวทางของ devolper หรือ tester นะครับ ที่ต้องทำงานกับ Mobile application คิดว่าเครื่องมือนี้จะช่วยชีวิตได้ไม่น้อยเลย เนื่องจากเครื่องมือนี้สามารถช่วยเรา investigate ปัญหาได้ทั้ง app debug และ app production ตามชื่อของมันครับมันจะเห็น traffic ทั้งหมดที่ app ทำงานเวลาผ่าน network ใช่คับ mobile app ทุกอย่างทำงานผ่าน network หมด API, image, และหลายๆ อย่าง

Fiddler by Telerik

เกรินไปพอสมควรแนะนำเครื่องมือที่จะใช้กันเลยดีกว่า จริงๆ แล้วมีหลายเจ้านะครับ แต่บทความนี้ขอแนะนำตัวนี้

เจ้า Fiddler ผมใช้งานมันมาสักใหญ่แล้วครับ เพราะ freeware , featrue เพียงพอและตอบโจทยย์ และมีให้ใช้งานได้ทั้ง windows, mac, linux ครับ

Fiddler เป็น product ตัวนึงของ Telerik นะครับ เป็น Tech company ที่มีชื่อในเรื่อง UI Framework หลายๆ ท่านน่าจะรู้จัก สามารถ download ตัว install ได้จากที่นี้ครับ 👉 https://www.telerik.com/fiddler

• Fidder Classic : เป็น version แรกนะครับ UI จะโบราณหน่อย และ support แค่ Windows ครับ

• Fiddler Everywhere : เป็น UI ตัวไหมนะครับ Modern กว่าตัว Classic และ support ทั้ง WIndows,Mac, Linux

Dowload มาแล้วขั้นตอน install ก็ basic เลยครับ next..next..next 😄

Overview Fiddler

เนื่องจากงานผมจะใช้งานอยู่กับ Windows เป็นส่วนใหญ่เลย และผมได้ลองใช้งานทั้ง version Classic และ Everywhere ผมยังรู้สึกว่า Classic ยังตอนโจทย์ผมอยู่นะครับ(ถูกใจ featrue โดยรวมมากกว่า) จึงยังใช้อยู่กับ version Classic นะครับ

หลักๆ ที่ผมใช้งานอยู่จะมี 3 ส่วน

1. ส่วน panel ที่แสดง transaction ที่ capture ได้จาก network

   เราจะเห็นที่ traffic ที่เราใช้งานอยู่ภายใต้เครื่องเราครับ ไม่ว่าจะเป็น google, youtube, facebook, ..... ทั้งหมดเลยครับ และเราสามารถเห็นรายละเอียดการคุยกันได้ผ่านเมนูที่ 2

2. เมนู inspector

   เมื่อเราคลิกเลือก traffic จากข้อ 1 แล้วเมนูนี้จะช่วยเราในการดูลายละเอียดข้างในทั้ง request/response ครับ หน้าที่จะคลายๆ ในส่วนของ developer tools ใน chrome developer tools

3. เมนู filter

   หากลองใช้งานดูจะเห็นว่าข้อ 1 จะมีรายการเข้ามาเยอะมากๆ และไหลเข้ามาเรื่อยๆ เลยทำให้เรา focus ส่วนที่เราสนใจได้ยากมากๆ เมนูนี้ละที่จะช่วยในส่วนนี้ เราสามารถกำหนด rule ในการ filter ได้ด้วยครับ โดยกำหนดได้หลายรูปแบบเลย regex ก็ได้เช่นกัน

Capture mobile traffic

มาถึงหัวข้อสุดท้าย จากหัวข้อ Overview Fiddler หากได้ทดสอบ install และใช้งานแล้วจะเห็นว่า taffic ที่เกิดทั้งหมดนั้นมาจาก notebook หรือ computer เราเท่านั้นเลย หัวข้อนี้ละเราจะทำให้ traffic ของ mobile device เราไหลเข้ามาให้เราเห็น ภาพง่ายๆ เพื่อเพิ่มความเข้าใจคือแบบนี้ครับ

ลงมือกันดีกว่า สิ่งทีเราต้อง config จแบ่งเป็น 2 ส่วนนะครับ คือทำทั้งที่ notebook และทำที่ mobile device เรานะครับ

ทำที่ notebook

1. เข้าไปที่ Fiddler แล้วไปที่ Menu Tools -> Options และเปิด Tab connections ให้ติ๊กถูกที่ Allow remote computers to connect และจำ Port ไวด้วยครับ (default คือ 8888)

2. จากนั้นให้เอาเมาส์ไปชี้ที่ icon Online ที่มุมขวาบน เพื่อจะดูว่าเครื่องเรานั้น IP address คืออะไรแล้วให้จำไวครับ

3. ต่อไปเราจะ allow ไม่ให้ Windows Firewall Block ครับ ให้ไปที่

• Control Panel เลือก Windows Defender Firewall

• จากนั้นเลือก Allow an app or feature through windows defender firewall ที่ด้านซ้าย

• คลิกปุ่ม Change settings (ปุ่ม Allow another app.. จะ enable ให้คลิกได้)

• คลิก Allow another app.. แล้ว Browse.. ไปหาที่อยู่ของ Fiddler เราครับ ให้เลือกตัว Fiddler.exe เลยครับ (windows ส่วนมากน่าจะอยู่ที่ C:\Users\<username>\AppData\Local\Programs\Fiddler)

• คลิป Add ครับ

ทำที่ Mobile device

ตัวอย่างนี้ขอเป็นของ Android นะครับ iOS ก็ทำได้คลายๆ กันครับ คิดว่าไม่อยากเกินไปที่จะเอาไปประยุกค์กับ iOS

1. เข้าไปที่ wifi ตัวที่เราต่ออยู่นะครับ (ต้องเป็น wifi ตัวเดียวกับที่ Notebook เราใช้งานอยู่นะครับ)

2. เลือก Manage network settings

3. เลือก show advanced options

4. ตรง Proxy ให้เลือกเป็น Manaul

5. มันจะมีช่องให้กรอกเพิ่ม ให้ใส่ Proxy host name เป็น IP address ของ Notebook แล้ว ส่วนช่อง Port ให้ใส่เป็นตามข้อ Port ที่เราได้มาจาก Fiddler (ข้อ 1 ที่ทำที่ Notebook)

6. กด Save ตั้งแต่ Step นี้จะทำให้ taffic ต่างของ Mobile device วิ่งผ่าน Notebook เราแล้วครับ แต่จะมีบาง traffic ที่เราจะไม่สามารถ Inspec ดู value ได้เนื่องจากติดเรื่อง security https ครับ

1. จากปัญหาเรื่อง https เราต้องติดตั้ง certificate ของ Fiddler และ Trust ลงที่ Mobile device เรา ทำได้ดังนี้ครับ เปิด chrome ขึ้นมา พิมพ์ url ไปว่า <IP address ของ notebook>:<Fidder Port>/fiddlerroot.cer

   ตัวอย่าง http://192.168.1.100:8888/fiddlerroot.cer

2. Download cer ที่ได้มาแล้วกดให้มัน install ลงไปที่มือถือ

หลังจากที่เราทำตาม Step ทั้งในส่วนของ Notebook และ Mobile device แล้ว ถ้าเราเล่น App อะไรที่ Mobile เราจะเห็น Taffic ต่างๆ วิ่งเข้ามาที่ Fiddler ที่เปิดที่ Notebook ละครับ เย่!!

Reference : https://www.telerik.com/blogs/how-to-capture-android-traffic-with-fiddler