Enabling Proxy in React Native apps

In simple terms, HTTP Proxy is an middle man between client and backend server. When a client makes request to backend server, the proxy server intercepts and analyses the requests and then communicates with the backend server.

Image for post
Image for post

Tools like Charles, ProxyMan and Fiddler are local proxy servers which allows to view HTTP/S network traffic between the client and the backend server.

Lets understand this with an real life example, Amazon acts as a broker or proxy between the shoppers and the sellers. Amazon allows shoppers to place an order and if the order is confirmed it communicates the same to the seller. Seller then will let amazon know when the order is ready and amazon will ship the order to the customer. So in this case shopper is placing order to seller through amazon.

Image for post
Image for post

One might argue that in React Native debugging tools like RNDebugger, Reactotron, Flipper etc offers out of the box network inspect option. But enabling proxy offers just more than just inspecting a API call made from client.

  1. Black box testing
  • Manipulating/Overriding the API calls by modifying the query params, headers etc to mimic API failure or different backend behaviour and also analyse how our mobile app reacts to it.
  • Testing all possible network conditions that your app users may face. Throttle the network to mimic mobile network and analyse its impact on app launch time, navigating between the screens etc.

2. DSAT — Dynamic analysis as part of mobile application security testing

DSAT has a broader scope, but for this article we will limit to network monitoring

  • DSAT can identify sensitive unencrypted data in transit
  • Vulnerabilities introduced by third-party libraries
  • Man-in-The-Middle attack [MiTM]: A security analyst can use Burp Suite proxy to eavesdrops and manipulates network calls to the backend servers from the client application. These tests are performed to identify flaws that could lead to sensitive information disclosure or unauthorised access.

Let’s see how to enable HTTP proxy for mobile app

Make sure proxy is not enabled in the release builds

Android app [OS version ≥ N]

To enable proxy for debug variant in android. Modify the AndroidManifest.xml under “debug” variant folder. (Create AndroidManifest.xml with following configuration if it does not exists )

Image for post
Image for post

Add below code to AndroidManifest.xml file under “debug” folder

AndroidManifest.xml

Create “xml” folder under “res” folder and place network_security_config.xml

res/xml/network_security_config.xml

And you are done!
Follow the instructions to connect to proxy

https://docs.proxyman.io/debug-devices/android-device

If you are using Windows system, you can use Charles and follow instructions for it . But rest of the code changes remains the same irrespective of the tool used for network monitoring.
https://www.charlesproxy.com/documentation/configuration/browser-and-system-configuration/

Creating New App Variant

Alternatively, you can create a new android app variant. This works like a charm if we want to create a build without a local metro server that can be shared with QA/Security analysts or across the teams.

Now, Create a new variant folder as shown and add the following AndroidManifest.xml

Image for post
Image for post

Add the network security configuration to newly created AndroidManifest.xml or update an existing manifest if you already have one.

AndroidManifest.xml

Create “xml” folder under “res” and place variant_proxy_security_config.xml file.

res/xml/variant_proxy_security_config.xml

Register a new variant in Gradle build file as shown below.
Setting “bundleInProxy: true” makes sure to bundle JS and assets in the new variant that we have added instead of using local metro server.

Android run commands

Update “package.json” by adding a new command to run proxy variant as follows

Or directly run the android variant from terminal

IOS

No code changes are required to enable proxy on iphone or ipads.

Please follow the steps for setting up proxy

https://docs.proxyman.io/debug-devices/ios-device

Troubleshoot

If you couldn’t access to Charles/Proxyman local server for installing the SSL certificate from mobile

  1. Make sure device and laptop is on the same network.
  2. Make sure your laptop’s firewall is configured to allow incoming traffic.
    On mac go to
    System Preferences → Security & Privacy → Firewall → Advanced
    and make sure the follow options are checked
Image for post
Image for post

Code

Source code can be found here

References :

https://www.flaticon.com/

Written by

Android | React Native Developer

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