Leveraging Charles Proxy as a Developer

Presentation about some tools available in Charles Proxy to help developers.

Transcript

1. Leveraging Charles Proxy as a Developer Krista Horn @krista_ln
2. What is Charles Proxy? • “Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).”
3. What is Charles Proxy? • “Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).” • “I’m pretty sure I handled that case properly”
4. What is Charles Proxy? • “I KNOW I handled that case properly” • “Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).”
5. What is Charles Proxy?
6. Man in the Middle
7. Man in the Middle
8. Setting Up the Code
9. xml/network_security_config.xml <?xml version="1.0" encoding="utf-8"?> <network-security-config> <debug-overrides> <trust-anchors> <certificates src="user"/> </trust-anchors> </debug-overrides> </network-security-config>
10. xml/network_security_config.xml <?xml version="1.0" encoding="utf-8"?> <network-security-config> <debug-overrides> <trust-anchors> <certificates src="user"/> </trust-anchors> </debug-overrides> </network-security-config>
11. AndroidManifest.xml <manifest ...> ... <application android:networkSecurityConfig="@xml/network_security_config" ...> ... </application> </manifest>
12. Setting Up the Device
13. Setting up device (Help -> Local IP Address)
14. WiFi Settings -> expand Advanced Options -> “Manual” under proxy -> local IP in Proxy hostname -> “8888” in Proxy port -> save and close Setting up device Open browser and download certificate - chls.pro/ssl
15. Initial Hiccups • Need to enable SSL Proxying for wanted endpoint • Red ‘X’ usually means that certificate wasn’t downloaded properly or forgot to declare networkSecurityConfig in the manifest
16. Map local What is it? - Reroutes response to local file on machine Why use it? - Want to change data in response over and over
17. Map local
18. Map local { "url": "https://anapioficeandfire.com/api/books/1", "name": "A Game of Thrones", "isbn": "978-0553103540", "authors": [ "George R. R. Martin" ], ... }
19. Map local { "url": "https://anapioficeandfire.com/api/books/1", "name": "A Game of Thrones", "isbn": "978-0553103540", "authors": [ "George R. R. Martin" ], ... }
20. Map local { "url": "https://anapioficeandfire.com/api/books/1", "name": "A Game of Thrones", "isbn": "978-0553103540", "authors": [ "George R. R. Martin", "Grace Hopper", "Ada Lovelace" ], ... }
21. Map local (Right Click request -> Map Local)
22. Map local
23. Map local (Tools -> Map Local)
24. Map local
25. Map remote What is it? - Reroutes response to remote host Why use it? - Need to double check if endpoint change will affect app - Have an api with static/snapshot data to test specific scenario
26. Map remote (Right Click -> Map Remote)
27. Map remote
28. Map remote (Tools -> Map Remote)
29. Map remote
30. Rewrite What is it? - Rewrites response code, response/request body, modifying headers, modifying queries, and so much more! Why use it? - Response code affects app behaviors - Want to always modify a query
31. Rewrite
32. Rewrite (Tools -> Rewrite)
33. Rewrite (Tools -> Rewrite -> Add)
34. Rewrite
35. Rewrite
36. Rewrite
37. Rewrite
38. Rewrite
39. Rewrite
40. Throttling What is it? - Changes (slows down) your network response time Why use it? - Office space networks != “normal” networks - Makes a difference with things like video buffering
41. Throttling (Tools -> Throttle Settings)
42. Throttling
43. Blacklist What is it? - Blocks your network request Why use it? - Quick way to error check - “What will happen to this view if one part fails?”
44. Blacklist (Right click request -> Blacklist)
45. Blacklist (Tools -> Blacklist)
46. Breakpoints What is it? - Similar to code breakpoints, but within Charles Why use it? - POST/GET on same endpoint can get weird with map local - Only need a quick validation change
47. Breakpoints
48. Breakpoints
49. Breakpoints
50. Thank You! Credits: Charles: https://www.charlesproxy.com/ API: “An API of Ice And Fire” https://anapioficeandfire.com/ More learning: Mark Murphy backport: https://commonsware.com/blog/2016/07/11/backporting-android-n-n etwork-security-configuration.html “Learn you a Network Security Config for Great Good!” https://possiblemobile.com/2017/05/learn-network-security-config/