Guides/Monitoring network traffic from an Android app: Difference between revisions

From Rhythm Game Wiki
Jump to navigation Jump to search
m Add category
Line 30: Line 30:
# Save the settings.
# Save the settings.
# If everything was done correctly, a pop-up should appear in ''Charles'', informing of a new connection. Click on "Allow" to allow the proxy connection. If you click "Deny" on accident, you can simply restart ''Charles'' and try to connect to the proxy again.<br><br>[[File:Charles Proxy Screenshot New Connection Popup.png|600px|thumb|left|alt=A pop-up informing the user of a new connection to the proxy.|This pop-up window should appear on your computer after saving proxy settings on the mobile device.]]<br>
# If everything was done correctly, a pop-up should appear in ''Charles'', informing of a new connection. Click on "Allow" to allow the proxy connection. If you click "Deny" on accident, you can simply restart ''Charles'' and try to connect to the proxy again.<br><br>[[File:Charles Proxy Screenshot New Connection Popup.png|600px|thumb|left|alt=A pop-up informing the user of a new connection to the proxy.|This pop-up window should appear on your computer after saving proxy settings on the mobile device.]]<br>
# <div style="clear:both;"></div> After clicking allow, you can see some network traffic going through. You can try opening apps on your phone, and new entries will appear.<br><br>[[File:Charles Proxy Screenshot Structure View.png|600px|thumb|center|alt=A screenshot of Charles, showing some network traffic as a structured tree-like view.|Network traffic from your mobile device, shown on your computer.]]<br>You can also enable ''Sequence view'' by clicking the ''Sequence'' tab on the top. This will show all of the network traffic in chronological order, with the most recent requests on the bottom.<br><br>
# <div style="clear:both;"></div> After clicking allow, you can see some network traffic going through. You can try opening apps on your phone, and new entries will appear.<br><br>[[File:Charles Proxy Screenshot Structure View.png|800px|thumb|center|alt=A screenshot of Charles, showing some network traffic as a structured tree-like view.|Network traffic from your mobile device, shown on your computer.]]<br>You can also enable ''Sequence view'' by clicking the ''Sequence'' tab on the top. This will show all of the network traffic in chronological order, with the most recent requests on the bottom.<br><br>
[[File:Charles Proxy Screenshot Sequence View.png|600px|thumb|center|alt=A screenshot of Charles, showing some network traffic as a list of requests.|''Sequence view'' might be more helpful in some cases.]]
[[File:Charles Proxy Screenshot Sequence View.png|900px|thumb|center|alt=A screenshot of Charles, showing some network traffic as a list of requests.|''Sequence view'' might be more helpful in some cases.]]


Now we have set-up our proxy server. However, even though we can see some host names and parts of requests, we cannot actually see the contents of most of the requests. This is because all modern applications use the HTTPS protocol to communicate; this protocol encrypts the data to prevent man-in-the-middle attacks.
Now we have set-up our proxy server. However, even though we can see some host names and parts of requests, we cannot actually see the contents of most of the requests. This is because all modern applications use the HTTPS protocol to communicate; this protocol encrypts the data to prevent man-in-the-middle attacks.
Line 39: Line 39:
(Note: You may need to scroll down to see the newest requests in ''Sequence view''.)
(Note: You may need to scroll down to see the newest requests in ''Sequence view''.)


[[File:Charles Proxy Screenshot HTTP Response.png|600px|thumb|center|alt=A screenshot showing response data in Charles.|Response to a GET request to http://example.com/ shown in ''Charles''.]]
[[File:Charles Proxy Screenshot HTTP Response.png|900px|thumb|center|alt=A screenshot showing response data in Charles.|Response to a GET request to http://example.com/ shown in ''Charles''.]]


In the next steps, we will install a custom certificate and modify an application, which will allow us to intercept HTTPS requests as well.
In the next steps, we will install a custom certificate and modify an application, which will allow us to intercept HTTPS requests as well.

Revision as of 20:27, 27 January 2025

To monitor and view network traffic in an Android application, you can use a proxy server. This guide will help set up your device and view network traffic from a specific Android app.

Prerequisites

To follow this guide, you have to have:

  • an Android device (you do not need root access),
  • a computer (with any operating system),
  • a USB cable to connect your mobile device to the computer.
  • access to a Wi-Fi network that you can connect to with the computer and the mobile device.

Step 1. Install a proxy server

In this guide, we will use the Charles proxy server. There may be other, better alternatives that I have not tried using. Feel free to edit this guide if you feel like you have a better proxy server.

Note: The free trial version of Charles only allows for 30-minute sessions. After that time passes, you can reopen Charles to continue using it.

  1. Go to https://www.charlesproxy.com/download/ on your computer, and download the version of Charles for your operating system.
  2. Launch Charles.
  3. At the top bar, select the option Help > SSL Proxying > Install Charles Root Certificate on a Mobile Device or Remote Browser.

    Screenshot of Charles Proxy, selecting the option Help > SSL Proxying > Install Charles Root Certificate on a Mobile Device or Remote Browser.

    This will show a message box with your computer's local IP address and a port. In the next step, we will use this information to connect the mobile device to the proxy server.

    Pop-up window, showing the local IP address and port of the proxy server. In this case: 192.168.3.57:8888.
    In this example, the IP shown on the pop-up is: 192.168.3.57, and the port is: 8888.

Step 2. Set up proxy settings on the mobile device

A screenshot showing proxy settings on Android.
In this example, we set the Host Name to 192.168.3.57, and the port to 8888 - the same values as shown in the Charles pop-up earlier.

To make network traffic go from the device to your proxy server, you have to set proxy settings on your mobile device.

  1. On your mobile device, go to Settings > Wi-Fi and select your Wi-Fi network.
  2. Under Advanced settings, change Proxy to Manual
  3. Set the Host Name and Port settings to the IP address and port displayed in the Charles pop-up window in step 1.
  4. Save the settings.
  5. If everything was done correctly, a pop-up should appear in Charles, informing of a new connection. Click on "Allow" to allow the proxy connection. If you click "Deny" on accident, you can simply restart Charles and try to connect to the proxy again.

    A pop-up informing the user of a new connection to the proxy.
    This pop-up window should appear on your computer after saving proxy settings on the mobile device.

  6. After clicking allow, you can see some network traffic going through. You can try opening apps on your phone, and new entries will appear.

    A screenshot of Charles, showing some network traffic as a structured tree-like view.
    Network traffic from your mobile device, shown on your computer.

    You can also enable Sequence view by clicking the Sequence tab on the top. This will show all of the network traffic in chronological order, with the most recent requests on the bottom.

A screenshot of Charles, showing some network traffic as a list of requests.
Sequence view might be more helpful in some cases.

Now we have set-up our proxy server. However, even though we can see some host names and parts of requests, we cannot actually see the contents of most of the requests. This is because all modern applications use the HTTPS protocol to communicate; this protocol encrypts the data to prevent man-in-the-middle attacks.

This current setup will still work for HTTP requests. If you try to access a website via HTTP on the mobile device, you will be able to see the contents of the request, as well as the response in Charles. This is because, unlike HTTPS, HTTP is not encrypted, and the proxy server can read requests and responses sent via HTTP. You can try this yourself by opening an HTTP website (such as http://example.com/) in a web browser on your mobile device. You should see something similar to this:

(Note: You may need to scroll down to see the newest requests in Sequence view.)

A screenshot showing response data in Charles.
Response to a GET request to http://example.com/ shown in Charles.

In the next steps, we will install a custom certificate and modify an application, which will allow us to intercept HTTPS requests as well.

Step 3. Install a certificate to the mobile device

This page has some work to do. Help the wiki by editing this page!
This guide is unfinished, I will finish it in a bit.