แอบดู Web API ด้วย Postman : Interceptor
สำหรับคนที่ต้องยุ่งเกี่ยวกับ Web API ไม่ว่าจะเป็น Web Developer Front-end/Back-end Tester QA หรือกระทั่ง Hobbyist ที่สนใจเกี่ยวกับการพัฒนา Web-App คงไม่มีใครไม่รู้จักเครื่องมือที่ชื่อว่า Postman แต่มีน้อยคนนักที่จะรู้จัก Postman Interceptor ก่อนอื่น
ถ้าหากใครที่ไม่รู้จัก ก็คงกำลังไป Search หาใน Google แล้วก็กลับมาอ่านตรงนี้พอดี หรือถ้าใครยังไม่ไปไหนก็ลองดูรูปข้างล่างที่สรุปเกี่ยวกับ Postman (แค่ 959 ตัวอักษร ไม่รวม “Load More”)
Postman Interceptor ที่จะพูดถึงต่อไปนี้เป็น extension สำหรับ Google Chrome Browser ซึ่งทำหน้าที่ในหลักๆ 2 อย่างด้วยกัน คือ
1. Sync cookies จาก Browser ไปยัง App Postman
2. Capture network request โดยตรงจาก Browser ไปยัง History ใน App Postman
เป็นยังไง ต้องร้อง Wow! กันเลยใช่ไหม ถ้าใคร Get กับความเจ๋งของเจ้า Interceptor นี้ข้ามไปขั้นตอนติดตั้งกันเลย ส่วนที่เหลือก็ให้กด Clap Follow แล้วค่อยๆเลื่อนลงมา
ลองจินตนาการว่าเมื่อคุณ Login เข้าใช้บริการใน Website ใด้ก็ตาม นอกจาหน้าเว็บสวยๆ อันเป็นผลแห่งความพยายามทำงานร่วมกันระหว่าง Owner Designer Developer แล้ว สิ่งที่ซ่อนอยู่เบื้องหลังที่ไม่ค่อยมี user คนไหนสนใจก็คือสิ่งที่เรียกว่า “cookies”
ภายในชุดข้อมูลเล็กๆ ที่ซ่อนอยู่ในส่วนที่ลึกที่สุดของ Website นั้นทำให้ Web Server ใดๆ สามารถระบุตัวตนผู้ที่กำลังใช้งานอยู่ รวมถึงข้อมูลเล็กๆ น้อยๆ ที่จะสะท้อนพฤดิกรรมการใช้งานของ user คนนั้น ลองดูเพิ่มเติมใน link ข้างล่าง (แต่อย่าลืมกลับมาอ่านต่อหละ)
How cookies can track you จาก Channel Simply Explained — Savjee
ในการออกแบบ Web-Application เป็นเรื่องปกดิสำหรับออกแบบให้ Front-end เรียก Web API อะไรซักอย่างหนึ่งเพื่อเอาข้อมูลที่ต้องการจาก Back-end มาแสดงผลบนหน้า Browser ทั้งนี้เพื่อให้ง่ายในการแยกกันทำงานเป็นส่วนๆ
ถ้าหากอยากรู้ว่ามี API อะไรซ่อนอยู่ใน Web ใด้ก็แค่เข้าไปอ่านใน Page Source หรือเปิด Inspect เพื่อดู Network Traffic (เป็นที่รู้กันในหมู่ Dev และ Tester)
แต่…ถ้าคุณเป็นขี้เกียจ อยากจะหาเครื่องมืออะไรซักอย่างที่จะทำให้ชีวิตของคุณง่ายขึ้น ทำงานเร็วขึ้น smart ขึ้น ดูคลิปแมวได้มากขึ้น
ผมขอแนะนำ “Postman + Interceptor”
ด้วยเครื่องมือนี้…
- คุณจะไม่ต้อง Copy/Paste curl command จาก Network inspector ทีละอัน เพราะเรา(เขา) จะทำให้
- หมดห่วงเรื่อง cookies เดี๋ยวเรา(เขา) จะ download มาไว้ทุกอย่าง
- เราอาจจะสามารถช่วยงานคุณ ทำงานแทนคุณ แบ่งปันข้อมูลของคุณแทนคุณ เป็นตัวคุณแทนคุณ รวมถึงใช้เงินของคุณแทนคุณ(ถ้าคุณอณุญาต)
นี่ก็คือความสามารถคร่าวๆ ของ “Postman + Interceptor” ติดตั้งเดี๋ยวนี้ Click เลย
การติดตั้ง Postman และ Postman Interceptor
- ติดตั้ง Postman Native App (v7.2.1 or above)หรือ Postman Chrome App (ที่น่าจะ Deprecated ไปแล้ว)
- ติดตั้ง Postman Interceptor Extension (v0.2.26 or above) บน Google Chrome (เจ้าอื่นๆ ไม่แน่ใจว่ามีเหมือนกันหรือไม่)
- ติดตั้ง Interceptor Bridge (OSX,Windows,Linux) โดย Run script ที่ Download มา อาจจะมี Security Warning นิดหน่อยไม่ต้องตกใจอุปกรณ์ของคุณยังปลอดภัยอยู่
- เปิด App Postman บริเวรแถเครื่องมือด้านขวาบนจะเห็น button “Capture requests and cookies” อยู่ หากติดตั้งสมบูรณ์แล้วจะขึ้น สถานะสีเขียวที่ “INTERCEPTOR CONNECTED”
เริ่มต้นใช้งาน Capture network request
เรามาเริ่มต้นด้วย Capture network request จากการใช้งาน Website ทั่วไป
- Turn “On” Postman Interceptor
- ใส่ Filter requests แล้วกด Apply โดยในที่นี้ผมจะใส่เป็น “https://medium.com/*” เพื่อกรองเฉพาะ request ที่มาจาก Medium (แต่ถ้าคุณอยากมั่นใจในอุปกรณ์ของคุณว่าแรงเพียงพอที่จะรับและส่งต่อทุก request ไปที่ Postman ได้ ไม่ต้อง filter ก็ได้)
- กลับไปที่ App Postman ที่ button “Capture requests and cookies” ที่ Tab “Requests” ใต้หัวข้อ “Capture Requests” เลือกเป็น “On”
- ข้อมูลที่เป็น Network Request ทั้งหมดจาก https://medium.com จะหลั่งไหลเข้ามาใน History ของ Postman App
5. ที่เหลือคุณก็แค่ใช้ Postman อย่างที่คุณเคยใช้ จะ Test API หรือ Save Request เก็บไว้ก็สุดแล้วแต่ที่คุณต้องการ แต่อย่าลืมปิดหละ เดี๋ยวเครื่องจะหน่วงจนไม่ได้ทำงานกันพอดี
ตัวอย่าง Use case ที่น่าจะเป็นประโยชน์กับ Web Developer และตำแหน่งอื่นๆ ที่เกี่ยวข้อง (เท่าที่พอจะนึกได้)
- ในการพัฒนา Web-App ของคุณมี Request มากมายตอน Page load หากคุณอยากลอง Test API สำหรับ Page นั้นๆ ก็แค่ Capture Request ทั้งหมด แล้ว Save ใส่ Collections เอาไว้ Run เพื่อ Test ในอนาคต (Postman มี feature “Collection Runner” ช่วย Automate test API request ได้)
- Request ทั้งหมดที่ Save ใส่ Collections ไว้สามารถเอามา Export เป็น curl script หรือ source code ในภาษาต่างๆ ซื่อเป็นประโยชน์อย่างมากถ้าต้อง Porting Web App ไปที่ Platform อื่นๆ รวมถึงการ Export Collections เป็น file และ Report สำหรับ QA และ Pen-testing หรือ Partner ที่ต้องการ API
การใช้งานกับ Web-App ที่ต้องระบุตัวตนผู้ใช้งาน ด้วย Cookies Sync
การใช้งาน Cookies sync นั้นก็แสนง่ายดาย และสามารถใช้ร่วมกับ Capture network request
- Turn “On” Postman Interceptor
- ใส่ Filter requests แล้วกด Apply เพื่อกรองเฉพาะ request จาก Web ที่ต้องการ
- กลับไปที่ App Postman ที่ button “Capture requests and cookies” ที่ Tab “Cookies” ใต้หัวข้อ “Domains” ให้ใส่ Domain ที่จ้องการ Sync cookies แล้วกด “Add Domain”
- ใต้หัวข้อ “Capture Cookies” เลือกเป็น “On”
- หาเปิด “Capture Requests” ไว้ด้วย ข้อมูลที่เป็น Network Request เราก็ได้ทั้ง Cookies และ Requests จาก Web ที่ต้องการ
หากยังไม่หมด Session ทุกๆ Valid Request จาก Postman จะเหมือนเป็น Request ที่ได้จาก user ที่มี cookies เดียวกัน
ตัวอย่าง Use case ที่น่าจะเป็นประโยชน์ นอกจากที่เหมือนหัวข้อก่อนหน้าก็คือ เราสามารถใช้วิธีนี้ในการทดสอบการใช้งาน API ที่มีการจำกัดสิทธิ์ของ user ที่แตกต่างกันออกไป โดยเฉพาะการใช้เพื่อตรวจสอบช่องโหว่ของ Web-App ในเบื้องต้น
คราวนี้หละ ก็ได้ฤกษ์ไปแอบดู Web คนอื่น เพื่อมีอะไรน่าสนใจ … Oops! คงไม่ได้เรียกว่า Hack ใช่มั้ย
แต่ก็อย่าลืมเอาวิธีนี้มาใช่เพื่อช่วยในการพัฒนา Web-App ของคุณให้ปลอดภัย และมีประสิทธิภาพด้วยหละ
