Rewrite – Modify elements in the Response body

The Rewrite feature lets you automatically change elements of a Request or Response each time they meet a predefined set of rules. In this tutorial, with a simple Regular expression, we will target specific properties in the Response and then use the Rewrite tool to automatically modify their values.

In this tutorial we are going to modify a sample JSON Response to generate 3 different Responses.

Append a new element to an array
Remove the first element in an array
Remove all elements in an array

NOTE: If you are following this tutorial and run issues with Github caching your Response, have a look at how Charles can bust cache with its’ No Caching feature

Prerequisites

Install Charles
Make sure you have setup the Charles Root certificate on your Mac before you proceed to the next step

View sample JSON response

Open Chrome and go to the sample JSON Response

Enable SSL Proxying

Return to Charles. Right-click the Github Request and select ‘Enable SSL Proxying’

The Request(s) you want to modify must be decrypted before you can use the Rewrite feature with it

Reload page on Chrome

Return to Charles. You should now see traffic in plain text

Open Rewrite Settings screen

Tools -> Rewrite -> tick the “Enable Rewrite” checkbox

Add URL to the Rewrite Location

Add -> Click Add (from the ‘Location’ section) -> Paste sample JSON URL into the “Host” field -> press the “tab” on your keyboard -> set the “Port” to 443

Append new element to array

Find the end of an array with Regex

I highly recommend using regex101.com or regexr.com to work out your Regex BEFORE copying it across to Charles

The Regex shown in the accompanying screenshot finds the end of the array (denoted by the ] character). We will then use the Rewrite feature to overwrite the ] character and add a new object to the array

Create rule

Configure the rule as follows:

Select “Body” from the “Type” dropdown
Tick the “Response” checkbox
Enter ] into the “Value” field of the “Match” section
Tick the “Regex” checkbox for the “Match” section
Enter ,{ “code”: “XXXXX”, “name”: “XXXXXX Account” }] into the “Value” field of the “Replace” section
Click OK to save
Click OK to close the settings screen

Verify new element was appended to the array

Click the ‘Repeat’ button to check the Rewrite works.

There should now be 4 elements in the array

Remove first element from array

Find first object in an array with Regex

I highly recommend using regex101.com or regexr.com to work out your Regex BEFORE copying it across to Charles

The Regex shown in the accompanying screenshot finds the first ‘code’ property in the Response and then matches everything between that and value of the second ‘code’ property. We will then use the Rewrite feature to overwrite the highlighted object

Create rule

Configure the rule as follows:

Select “Body” from the “Type” dropdown
Tick the “Response” checkbox
Enter code”:[\s\S]*”MTG into the “Value” field of the “Match” section
Tick the “Regex” checkbox for the “Match” section
Enter code”: “MTG into the “Value” field of the “Replace” section
Click OK to save
Click OK to close the settings screen

Verify element has been removed

Click the ‘Repeat’ button to check the Rewrite works.

The array should now only contain 2 elements

Remove all elements in an array

Find all objects in an array with Regex

I highly recommend using regex101.com or regexr.com to work out your Regex BEFORE copying it across to Charles

The Regex, shown in the accompanying screenshot, finds everything between the opening and closing array symbols i.e. [ and ]. We will then use the Rewrite feature to overwrite the highlighted data with an empty array