قالب وردپرس درنا توس
Home / IOS Development / Charles Proxy Tutorial for iOS

Charles Proxy Tutorial for iOS



Update Note : Tom Elliott updated this tutorial to Xcode 10.2, Swift 5 and iOS 12. Aaron Douglas wrote the original.

Let's face it – we've all written code that doesn't work properly and troubleshooting can be difficult. It is even more difficult when talking to other systems over a network.

Fortunately, Charles Proxy can make network troubleshooting much easier.

Charles Proxy sits between your app and the internet. You configure the Simulator or IOS device to send all network requests and responses through Charles Proxy so you can inspect and even change data in the middle to test how your app responds.

Getting practical experience with

Getting Started

You must first download the latest version of Charles Proxy for Mac (v4.2.8 at the time of this writing). Double-click the DMG file and drag the Charles icon to the Applications folder to install it.

Charles Proxy is not free, but everyone gets a free 30-day trial. Charles will only run for 30 minutes in the trial mode, so you may have to restart it through this Charles Proxy tutorial.

Note : Charles is a Java-based app and supports macOS, Windows and Linux. This Charles Proxy tutorial is for macOS in particular, and some things may be different on other platforms.

Launch Charles . It should ask for permission to automatically configure the network settings. If not, press Command-Shift-P to manually get Charles asking this permission.

 Charles Proxy Tutorial

Click Grant Privileges and enter your password if prompted. Charles starts recording network events as soon as it starts. You should already see events that appear in the left pane.

Note : If you do not see any events, you may not have granted permissions or may have another proxy already installed. See the Charles & # 39; Troubleshooting Help FAQ page.

The user interface is simply understandable without too much experience. Many treats are hidden behind buttons and menus, and the toolbar has some things to know about:

 Charles Proxy Menu buttons

  • The first "Broom" button deletes the current session and all busy activity
  • The second The "Record / Pause" button turns red when Charles detects events, and gray when stopped.
  • The intermediate buttons from the "Turtle" to the "Marker Mark" provide access to common usage actions, including damper, break points and creation request. Mouse over each to see a brief description.
  • The last two buttons provide access to common tools and settings.

Currently, stop recording by clicking the red Record / Pause button.

Below the toolbar is a switch between Structure and Sequence . With Sequence selected, the top pane contains a summary of all registered network requests while the main route contains detailed information about the selected request.

When Structure is selected, the top route will be replaced by a left route with the same data, but this time grouped by site address. You can still see the individual requests by expanding each site.

Select Sequence to see all events in a continuous list sorted by time. You will probably spend most of your time on this screen when troubleshooting your own apps.

Charles combines the request and response to a single screen by default. However, I recommend sharing them in separate events for greater clarity.

Click Charles anser Preferences and select the Viewers tab. Clear the Combine Request and Answer check box and press OK . You need to restart Charles for the change to take effect.

Try pointing around the user interface and watching events. You notice a strange thing: You can't see most details for HTTPS events!

SSL / TLS encrypts sensitive request and response information. You might think this makes Charles meaningless for all HTTPS events, right? No! Charles

More about proxies

You may be wondering, "How does Charles make his magic?"

Charles is a proxy server, which means that Charles has a narrow way to get around encryption. it sits between your app and your computer's network connections. As Charles automatically configured the network settings, it changed the network configuration to drive all traffic through it. This allows Charles to inspect all network events to and from your computer.

Proxy servers are in great power, but this also involves the potential for abuse. This is why SSL is so important: Data encryption prevents proxy servers and other middleware from canceling sensitive information.

 Network Chart

In this case, Charles wants to snoop on your SSL messages to let you troubleshoot them.

SSL / TLS encrypts messages using certificates generated by trusted third parties called "certificate issuers."

Charles can also generate his own self-signed certificate, which you can install on your Mac and iOS SSL / TLS encryption devices. Since this certificate is not issued by a trusted certificate issuer, you must tell that your devices explicitly trust it. Once installed and trusted, Charles will be able to decrypt SSL events!

When hackers use middleware to snoop on network communication, it is called a "man-in-center" attack. In general, you will NOT rely solely on any random certificates or you can compromise your network security!

There are some cases where Charles' narrow man in the middle strategy will not work. For example, some apps use SSL pinning for added security. SSL pinning means the app has a copy of the web server's public key, and it uses this to verify network connections before communication. Since Charles & # 39; key would not fit, the app would reject the communication.

In addition to logging events, you can also use Charles to modify data in planes, record it for later review and even simulate bad network connections. Charles Proxy is powerful!

  Charles Proxy powerful image

Charles Proxy and your iOS device

Until recently, the only way to proxy traffic from a physical iOS device through Charles Proxy was to tell your iOS device to send all network traffic to your computer. This is still a common practice and you will go through the next, but first check out the new Charles Proxy for the iOS app!

Open the App Store on your iOS device and search for Charles Proxy . Unfortunately, there is no free version of their iOS app, so you will need to purchase it if you want to follow this section.

Note : Don't want to buy the iOS app? Don't worry! You can simply skip this section to the next, learning how to route the app's network traffic to your Mac.

 Charles Proxy on the App Store

Install the app on your device and open it up. The first screen shows that the proxy is inactive with a switch, as well as an overview of some key figures for any ongoing session. Turn on the proxy.

When you have requested permission to install VPN configurations, press Allow .

 Charles asks for permission for VPN Configurations

The status changes to Active .

 Charles Proxy Home Screen

Touch Current Session The Info Indicator Arrow and the app navigate to show comparable to the top pane of the desktop app. If you don't see any requests, you can switch to Safari and load a website.

 Requests in the current session

Touch any of the individual requests and you will drill down to a detail view for that request. As with the desktop application, some SLS / TLS encrypted traffic is still confused. Time to fix it:]

 Unknown SSL traffic

Continue within the Charles Proxy app, navigate back to the home screen by pressing the back arrow at the top left of the screen twice. When the proxy is still active, press Setting Equipment at the top left of the screen. Select SSL Proxying .

 SSL Proxy Settings

At the bottom of this screen you'll find detailed instructions for installing and trusting the Charles Proxy CA certificate. First, install the certificate using the button in the app. The device app will switch to Safari and request permission to install the profile.

Note : If you have an Apple Watch pair with your device, it will ask if you want to install the profile on your device or watch. Select iPhone .

When the profile is installed, open Settings app. You should see a new profile downloaded option. Press it and select the Install option in the upper right.

 Installing the certificate

You will be prompted for your device password, if you have one, followed by a confirmation screen, notifying you that this certificate is unverified. Press Install again. Finally, an action screen is displayed from the bottom of the screen with a final confirmation. Apple will really make sure you want to install this:]

Again, don't just install a random certificate or you might include your network security! At the end of this Charles Proxy tutorial, you also remove this certificate.

 Verifying the certificate

You should get a confirmation screen that the profile is installed. Then you have to rely on the certificate. Continue in Settings app, navigate to General ▸ About ▸ Certificate Company Settings . Find the Charles Proxy certificate and change the switch. A warning dialog appears. Select Continue .

Switch back to the Charles Proxy app, and the certificate status is now marked as Trusted . Switch Enabled switch at the top of the screen until further notice.

 Charles Proxy with a trusted certificate

In Charles, navigate back to the main settings page and save your Changes. Open the current session and remove all traffic using the cost icon at the bottom left of the screen. Navigate to Safari and load a website. Then navigate back to Charles Proxy. Press one of the requests and press Enable SSL Proxy .

 Enabled SSL proxy for a particular domain

Return to the current session and delete the session again. Open Safari again and reload the page one last time. Now, if you navigate back to Charles Proxy, the URL you enabled SSL Proxying will be marked with a blue network icon rather than a lock icon.

 Request with SSL proxy enabled

Tap the URL and you can now see the detailed details of each request. Request a request for more details.

 Requests for a URL with SSL proxy enabled

 Body Request

Press See Body to see the full body response . Hurray! :]

 Response body

Although this example used Safari, the following process will work when you open an app on your device, including your own, to troubleshoot the app's network. [19659003] Touch back to the request page and disable SSL Proxying. Press back to the start view and set the Charles Proxy status to Inactive to stop proxy traffic.

Proxying iOS traffic using Charles Proxy for MacOS

What happens if you want to inspect traffic on a simulator or don't have the Charles Proxy iOS app? No problem! It's easy to set up Charles for proxy traffic from any computer or device on your network, including your iOS devices.

Open Charles Proxy on your Mac and turn off MacOS proxy by clicking Proxy (drop-down menu) ▸ MacOS Proxy to clear the it. That way, you only see traffic from your iOS device.

Then click Proxy ▸ Proxy Settings click on the Proxies tab and note the port number which should by default be 8888 .

Then click Help ▸ Local IP Address and note the computer's IP address. If there is more than one IP address, select en0 .

Now take your iOS device. Open Settings press Wi-Fi and confirm that you are connected to the same network as the computer. Then, press the button next to your Wi-Fi network. Scroll down to HTTP Proxy section, select Configure Proxy and then click Manual .

Enter the Mac's IP address for Server and the Charles HTTP Proxy port number for Port . Press Save .

Return to the Charles MacOS app. Press Record / Pause button if you are not already recording traffic.

You should get a pop-up warning from Charles on your Mac and ask to allow the iOS device to connect. Click Allow . If you don't see this immediately, it's okay. It may take a minute or two to appear.

 Accept connection from your device

You should now start seeing activity from your device in Charles! But you can't see SSL traffic yet. As with the iOS app, you must install a certificate from Charles.

Continue on your iOS device, open Safari and navigate to http://www.charlesproxy.com/getssl. On the pop-up window, click Allow .

 Install certificate from the Charles website

Note: : Again, if you have an Apple Watch paired with your device, iOS will ask you to choose between your device and look for you have installed the profile. Select iPhone .

In what will now be a familiar journey for you, switch to Settings and install the profile. Press Install type your password (if configured), then press Install again after the warning appears, and then press Install again . Finally, press Done .

As before, open the app Settings and navigate to General ▸ About ▸ Certificate License Settings . Trust the certificate you just installed.

Then select Proxy ▸ SSL Proxying Settings in the MacOS app. Make sure Enable SSL Proxying is marked and add a value to the traffic you want to inspect.

 Enable SSL Proxying

Note: : If you do not know the values ​​to be placed here, you can select a request in the app with the secondary (right) click and select Enable SSL Proxying from there. 19659003]  Enable SSL Proxying

You should now be able to see the complete query and response means for that connection.

Snooping on Someone Else's App

If you're like most developers, curious about how things work. Charles activates this curiosity by giving you tools to inspect any app's communication – even if it's not your app.

Go to the App Store App Store on your device and find and download Be Underground . This free app is available in most countries. If it's not available or you want to try something else, please use another app.

You will notice a flurry of activity in Charles while downloading Weather Underground. The app store is quite chatty!

When the app is installed, the app launches and clicks the broom icon in Charles to remove recent activity.

Tap Search and enter the postcode 90210 and select Beverley Hills as your location in the app. Press See . If you were to use your current location, the URL that the app retrieves may change if your location changes, which may make some later steps in this Charles Proxy tutorial more difficult to follow.

There are tons of sites listed in the Structure category! This is a list of all activity from your iOS device, not just the Weather Underground app.

 Charles Proxy Tutorial

Switch to the Sequence tab and enter wund in the filter box to display only weather traffic.

You should now see a few requests for api.wunderground.com . Click on one of them.

Overview shows some request details, but not much, since you have not yet enabled SSL proxying for api.wunderground.com yet.

] Click Proxy ▸ SSL Proxying Settings and click Add . Enter api.wunderground.com for host la Port clear and click OK to reject the window.

Back in the Weather Underground app, pull down to update and restore data. If the app is not updated, you may need to kill it from the multitasking view and try again.

Huzzah! Charles shows unencrypted requests! Look for one of the requests with a URL containing forecast10day . This includes the payload used to fill the weather screen.

 Charles Proxy Tutorial

Change the answer

Time to have fun and change the data before the app gets it. Right-click the request in the Sequence list and click Switch Points in the popup list. Now, every time you make a request with this URL, Charles will pause and let you edit both the request and the reply.

Again on your device, pull down to update the app.

A new tab Breakpoints will appear with the outbound request. Just click Perform without changing anything. A moment later, the Breakpoints tab should appear again with the answer.

Click the tab Edit answer near the top. At the bottom, select JSON text . Scroll down and find temperature and change the value to something angry as 9800 . Click Perform .

Note : If you take too long to edit the request or answer, the program may go silent and never show anything. If the edited temperature does not appear, try again a little faster.

 Charles Proxy Tutorial

9800 ° F is crazy, hot! Seems like the app can't show temperatures above 1000 °. I guess we never get forecasts for the sun's surface. It's a particular one-star rating. ;]

Back in Charles, delete the pause point you specified by going to Proxy ▸ Breakpoint Settings .

Clear the api.wunderground.com check box to temporarily disable it, or select the row and click Remove to delete it. Pull down to update and the temperature will return to normal.

Simulate Slow Networks

Click the Tortoise icon to launch the throttle and simulate a slow network. Click Proxy ▸ Gas Settings to see available options. The default setting is 56 kbps, which is quite darn slow. You can also adjust the settings here to simulate data loss, reliability and high latency.

Try to refresh the app, zoom the map and / or search for another place. Painfully slow, right?

It's a good idea to test your own app under poor networking conditions. Imagine the users on a subway or going into a lift. You don't want your app to lose data, or worse, crash under these circumstances.

Apple's Network Link Conditioner provides similar throttle, but Charles allows much finer control over network settings. For example, you can search only specific URLs to simulate only your servers respond slowly instead of the entire connection.

Remember to turn off the throttle when you finish it. There is nothing worse than spending an hour debugging just to find that you never turned off throttling!

Troubleshooting Your Own Apps

Charles Proxy is especially great for troubleshooting and testing your own apps. For example, you can check server responses to make sure you have defined JSON keys correctly, and expected data types are returned for all fields. You can even use throttling to simulate bad networks and verify the app's timeout and troubleshooting logic.

You will try this out with an app called ModeratorsExplorer from Lorenzo Boaro's excellent tutorial on UITableView Infinite Scrolling. Download the launcher with Download Materials button at the top and bottom of this tutorial. Make sure Charles registers, opens the project in Xcode and builds and runs it on device or simulator.

 ModeratorsExplorer app

This app is called the name of a Stack Exchange website and lists all the moderators of this site. Type stackoverflow in the input box and press Find moderators! .

 Download error

Oh no! What happened? It looks like it was a mistake to decode the data from the service. Let's see if Charles can help us get to the bottom of the problem.

Switch to Charles Proxy (on your Mac) and in the sequence switch the filter to api.stackexchange.com . Look at the answer to one of the requests, you should see something like this:

  {
"elements": [{
"badge_counts": {
"bronze": 2559,
"silver": 2155,
"gold": 195
}
"account_id": 11975,
"is_employee": true,
"last_modified_date": 1553115014,
"last_access_date": 1553333702,
"reputation_change_year": 14388,
"reputation_change_quarter": 14388,
"reputation_change_month": 3898,
"reputation_change_week": 1090,
"reputation_change_day": 20,
"reputation": 791280,
"creation_date": 1222667162,
"user_type": "moderator",
"user_id": 23354,
"accept_rate": 100,
"location": "Forest of Dean, UK",
"website_url": "http://blog.marcgravell.com",
"link": "https://stackoverflow.com/users/23354/marc-gravell",
"profile_image": "https://i.stack.imgur.com/3vbu5.jpg?s=128&g=1",
"display_name": "Marc Gravell"
}, {
"badge_counts": {
"bronze": 2333,
"silver": 2524,
"gold": 141
}
...

The answer contains a group called items whose elements contain all the details of each moderator. Interesting.

In Xcode, open PagedModeratorResponse.swift in the group Networking . Notice any fishing? PagedModeratorsResponse expects a number of moderators. But notice how there is no CodingKey set up for the group. This means that the app expects the list of moderators to be called the default name – moderators in this case.

Replace the following:

  case moderators

Med:

  case moderators = "items"

Build and run the app again. Type stackoverflow into the input and press the button.

 View moderators

Success! This is a trivial but good demonstration of how Charles Proxy's network traffic display can help you detect network code errors.

Remove Charles & # 39; Certificate

Earlier, Charles created a shared certificate over everyone's entities who used it. Fortunately, Charles now creates unique certificates. This reduces the chance of a man-in-center attack based on this certificate, but it is still technically feasible. Therefore, always remember to remove the Charles certificate when you finish it.

First remove the certificate (s) from macOS. Open the application Keychain Access located in the folder Programs øy Tools . Enter Charles Proxy and into the search field, and delete all the certificates that the search finds. It's probably just one to delete. Close the program when you are done.

Then remove the certificates from your iOS device. Open the Settings app and navigate to General ▸ Profiles . Under Configuration Profiles, you should see one or more entries for Charles Proxy. Press a and then press Remove profile . Enter your password (if necessary) and confirm the removal. Repeat for each Charles Proxy certificate.

Profiles and Device Management are not available in the iOS simulator. To remove the Charles Proxy certificates, reset the simulator by clicking the Hardware menu and then Deleting All Content and Settings … .

You should also turn off the Wi-Fi connection proxy on iPhone by opening Settings and going to Wi-Fi tap button, scroll down to The HTTP Proxy section, select Configure Proxy and then tap Off .

Where to go from here?

We hope you enjoyed this Charles Proxy tutorial! Charles Proxy has lots of features not covered in this tutorial, and there are many more details for those you have learned today. Take a look at Charles & # 39; website for more documentation. The more you use Charles, the more features you will discover.

You can download the fixed version of the project using the Download Materials button at the top or bottom of this tutorial.

You can also read more about SSL / TLS on Wikipedia at https://en.wikipedia.org/wiki/Transport_Layer_Security. Apple will probably eventually require all apps to use secure network connections, so you should adopt it soon if you don't already have one.

Do you know of other useful debug networking apps? Or do you have any troubleshooting stories? Join the discussion below to share them!


Source link