Access local dev environment on a device and Charles Proxy and SSL?

Question

I need to access my local dev environment (MAMP Pro) on a device. I've got this working fine for my non-SSL site but I cant get it working for my site that requires SSL.

Both my local dev machine and my device are on the same wifi network. In the wifi settings on the device I've set the HTTP proxy to manual, the server is my dev environment IP and the port is the default 8888 (although it still works if I change this to 8080).

I've already set up a virtual host entry for local.site1.com in MAMP Pro. That url now works on both my local dev environment and the device.

If I try to go to my SSL site at https://local.site2.com this works on the dev environment but device gives this message:

Safari cannot open the page.

The error was: "There was a problem communicating with the secure web proxy server (HTTPS).".

Charles Proxy seems to be the standard way to access a local development environment on a device using the domain name specified in the hosts file, however I'm happy to use any solution that works.

Answer 1

Have you tried to refresh or restart it? You might want to recheck setting the HTTP Proxy to manual and recheck that your local dev machine and your device are on the same wifi network. Also, make sure your IP is right and the proxy is running.

---

NOTE that if you use SSL for your data requests:

-Go to Proxy -> Proxy Settings -> SSL -> Check “Enable SSL” and add the host and port for your requests

-You may also want to disable Desktop and web proxies from the Proxy dropdown so you can better isolate your app traffic

---

You might want to turn off cellular data to ensure all traffic is run through Wi-Fi/Charles Proxy

---

Then launch Charles and switch to the “sequence” tab in the top window to see each call and status as they are made in real-time, including response size and duration. Click on a request to view details in the bottom pane including: Overview, Request, Response & Summary.

Make sure you explore the options for the different data types. For example, if your response is an image, you can see the actual image and dimensions. If your app consumes JSON, you have a choice of a JSON Tree Navigator, or you can “copy response” by right-clicking the request in the top “Sequence” tab. Paste the results into something like http://www.uize.com/examples/json-prettifier.html for easy-to-read output.

---

DURING LAUNCH, CHECK THESE:

1.Is your app making a reasonable amount of data requests to balance startup time and pre-fetching, to speed up “next pages”?

2.Is any request fetching more data than necessary?

3.Are the response times high due to server configuration or a poorly performing backend

---

CHECK THESE DURING APP USAGE:

1.Is there a common navigation path that is slow and could benefit from pre-fetching at launch?

2.Is data actually coming from the cache rather than initiating a new data request?

3.Is any tracking data being sent (e.g. Omniture, Google Analytics, or other third-party services), and if so is it sent properly ? Are there any requests being made erroneously or repeatedly due to a coding error?

4.If you serve video, is the proper encoding/format selected? (Charles can throttle speeds to mimic wireless phone connections.) Are images appropriately sized for the device?

Answer 2

If using Charles, you will also need to install its certificate:

iOS 4 and later On the device, set your HTTP proxy to use Charles, and then browse to http://www.charlesproxy.com/getssl to install the certificate.

Answer 3

Charles Proxy

To use Charles Proxy for SSL you need to install the Charles Proxy Root CA. This is because Charles Proxy actually acts as a MITM so that you can actually look at the SSL traffic being generated between your app and the server (which can be useful when tracking down issues or when you want to know specifically how much traffic is being generated).

See: http://www.charlesproxy.com/documentation/proxying/ssl-proxying/

and

http://www.charlesproxy.com/documentation/using-charles/ssl-certificates/

Once the ROOT CA is installed your app and the built in Safari browser should be able to access the site.

Another Alternative

Another way that I've done this in the past is to actually use dnsmasq which is a pretty lightweight DNS server that will read your system's local /etc/hosts file and also forward to the nameserver in resolv.conf when it isn't in your hosts file.

You can install dnsmasq through macports on your Macbook/laptop, (cygwin on windows), or it's usually a pretty standard distribution package you are running *nix.

Once you have dnsmasq running then you can simply set your device through Settings/Wifi to point to your dnsmasq server for name resolution. As long as your site is in your /etc/hosts and you don't have your host based firewall blocking port 53 (DNS) then you should be good.

I find myself using dnsmasq most of the time but Charles Proxy came in useful when I was trying to REALLY track down how much data was being used from my App (a specific requirement for me was that the App which was a kind of kiosk that needed to stay under 3MB of usage per day so we didn't get huge cellular bills).

Answer 4

Surely OSX/iOS doesn't like the cert you inject because it doesn't come from a "trusted" source and it just straight up kills the connection.

You can define your cert as coming from a trusted source with Apple Configurator.

source

edit

1. Open the Apple Configurator app and create a new config file (prepare).
2. On the installation tab disable the "Update iOS" since we don't want to go all that. We just want to inject the cert.
3. You then go into the "Installation" tab and under "Settings" you select the certificate. (Since we can't include a .pem file in this mobileconf we have to convert our root cert into a .cert file and since it already is in the keychain app just go and export it as an .cert file somewhere where you can easily find it.
4. Back in the Apple Configurator app you select the just exported .cert root certificate and push the mobileconfig onto your phone/device via USB cable. (You will be prompted to accept that this is being installed since it is an "untrusted" root cert and afterwards you go through the steps explained by the creator here in order to install the .pem certificate onto the device.
5. Once there you can setup the proxy just like you would do for a http proxy in the networking settings and see all the TLS encrypted traffic flow in on iOS 8