Replace HTTP Responses Through Charles

A default browser’s developer tools do not support a replacement of requests or responses, but third-party HTTP proxies, like Charles, do. Unfortunately, Charles’ interface is not obvious to users who need this operation a couple of times a year.

Testing page

Disclaimers:

  • There are a few different approaches to change response in Charles. I will cover only Rewrite Tool;
  • Your client (site) should have open backend requests. If your web application has a server side rendering, than most of the requests will be hidden;
  • As an example, the page of a city on OpenWeather was selected, because all requests are inspectable in browser’s developer tools (Network tab);
  • I use Charles 4.5.6 on macOS Catalina 10.15.7.

Set up Charles

Fortunately, a free version of Charles is enough to complete our discovery.

  1. At the first boot you will be prompted with a message for automatically configuring network settings. Do not hesitate to click [Grant privileges].
Automatic macOS Proxy Proxy Configuration
Automatic macOS Proxy Proxy Configuration

2. Then go to Help → SSL Proxying → Install Charles Root Certificate and add the certificate to Keychain Access.

Install Charles Root Certificate
Install Charles Root Certificate

3. Then go to Keychain Access, find recently added Charles’ certificate, double click to open the certificate window and make it trusted — change the Trust settings to Always Trust.

Always Trust to Charles Proxy CA
Always Trust to Charles Proxy CA

4. Then go to Proxy → SSL Proxying Settings… and check the box Enable SSL Proxying in the «SSL Proxying Setting» window.

SSL Proxying Settings
SSL Proxying Settings

5. Restart Charles.

6. Finally, turn on Proxy → macOS Proxy.

macOS Proxy
macOS Proxy

Inspect Traffic

  1. Reload the website in a browser. You will see multiple requests in Charles.
  2. Choose the required domain and select Enable SSL Proxying in the menu.
Enable SSL Proxying
Enable SSL Proxying

3. Reload the website in a browser. Now you will see fully inspectable requests in this domain.

Request overview
Request overview

Replace Responses

Replace Status Code

Let’s try to break the web page by an error code in response.

  1. Choose an inspectable request and select Tools → Rewrite…
Rewrite…
Rewrite…

2. Click [Add] in the «Rewrite Setting» window and click [Add] again to fill the location — it is a pattern of the request:

Protocol = https
Host = openweathermap.org
Port = *
Path = /data/2.5/onecall
Query = *
Edit Location
Edit Location

3. Now click the last [Add] to fill the rewrite rule and choose type = Response Status. Specify which value should be replaced (Match Value = 200) with a new one (Replace Value = 500). Click [OK] and close the window.

Rewrite rule
Rewrite rule

4. Reload the website. The web page crashed, because the endpoint with data responded 500 — this is what we expected.

Status Code: 500

Replace Body

Let’s change the temperature as an arbitrary part of the response body.

  1. In the «Rewrite Rule» window choose type = Body and mark the checkbox Response. Specify which value should be replaced (Match Value = 24.) with a new one (Replace Value = 35.). Click [OK] and close the window.
Rewrite rule
Rewrite rule

2. Reload the website. The temperature has changed to a substitute value, because the endpoint with data responded with an artificial body — this is what we expected.

Dev Tools → Network → request Preview
Dev Tools → Network → request Preview

For more examples of how to use Charles in this case you can follow this links:

--

--

--

Quality assurance engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What happens when you type ls -l in the shell?

Getting started with Auditbeat

Issues with accessing the Azure Portal?

How brutalist design is taking over the internet

A Brief Guide to the Achievers Open API

Reactive Microservices — 5

TacoBell: Serving Its Menu

Setup Heroku + Custom Domain + HTTPS (Cloudflare)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrey Enin

Andrey Enin

Quality assurance engineer

More from Medium

Component lifecycle. Relations with Owner. Free Notifications Mechanism.

How to parse JSON after cURL

Response headers are included in the cURL output

Keeping Dependencies Up To Date with Maven-Centralized Dependency Management

MongoDB — CRUD Operations