When we do front-end Web development, especially when we do mobile H5 development, we often use Charles to do packet capture for some debugging, which is basically no problem for conventional browsers or Webviews. As long as the HTTP proxy and related certificates of Wifi are set up, basically the requests of front-end pages can be caught. However, if you want to capture some requests in some apps, you will find that there is not much to capture, and you think that there is a problem with your own match 😂, for example, 🌰. We can try to capture video-related data in the video App in a conventional way (HTTP proxy). You’ll notice that Charles basically just shows some text API related requests and doesn’t find the data you want 😭, which can sometimes be bad for local debugging.

The basic reason for this is that browsers generally follow the HTTP/Socks proxy set by the system by default, but other apps, including mobile and PC, can be determined by the developer’s preference or the network library used by the developer. They may not want to let the request go through the HTTP proxy by default. So we often find a lot of software will let you choose the proxy function, as shown in the following picture is the Intellij series to set the IDE to use the various proxy configuration:

Curl –proxy http://127.0.0.1:8888 url you can use curl –proxy http://127.0.0.1:8888 to manually delegate a url to a request. For example, we write a script with Node.js, and send some requests in the script. When running, these requests will not go through the Agent, but directly connected, unless you manually set the Agent in Node to do the Agent, or after the Agent is enabled globally, it will go through the Agent you set, which is similar in the mobile App. Either use a third party library, and then these default do not use proxy, so your Charles will not show, and some can detect whether the system has set up HTTP proxy, and then it can choose whether to use proxy or direct connection.

Wireshark: Wireshark: Wireshark: Wireshark: Wireshark: Wireshark: Wireshark: Wireshark: Wireshark: Wireshark: Wireshark: Wireshark: Wireshark: Wireshark: Wireshark It is too low level and Hardcore. It is all at the TCP level, so it is difficult to find the HTTP data we want. Our purpose is to use Charles to capture the data that cannot be obtained by default.

The basic idea of our solution here is to make the App unable to detect. We added proxy. Taking iOS as an example, the only way to achieve this is to enable the local VPN, and then let all the traffic pass through VPN. I’m not sure if this is due to the way the VPN is enabled, but there are some apps in the app store that capture packets directly on the phone, but many of them don’t actually capture the data we mentioned above). How to do that, I also do not do native APP development, they certainly can not do, so the only way out is to find a ready-made APP, to achieve such a VPN function.

After searching around, I found that there are such apps for debugging in the app store. The following are the two apps that can realize the functions we want: Potatso Lite and Brook. The above two apps can realize the functions we want, and it seems that Potatso Lite is more convenient to use. So let’s use Potatso Lite to achieve the packet capture capability we want. Our process is as follows:

Network request in app –> traffic passes through local VPN enabled by app –> traffic is forwarded through external HTTP/SOCKS proxy (Charles) configured in Potatso Lite –> packet caught in Charles

We can configure the address of the external proxy in the APP, that is, the HTTP/SOCKS proxy of Charles of our own Mac. Here, we can configure multiple proxies to switch, and the protocol can also be HTTP, socks or even Shadowsocks. After the configuration, click on the lower right corner of the open button to open VPN.

conclusion

The above is the package that we can’t catch through the HTTP proxy of conventional Wifi by adding a layer. I hope this article will be helpful to the development and debug process of front-end and mobile terminal students 🥳🥳🥳.