Tackling 'Cleartext Not Permitted' error in Ionic v5

While developing/maintaining the WHID Mobile Injector app, it turns out that I received messages and issues on Github telling me that users were:

• Able to access the ESPloit interface through the browser
• but not through the app and the toggle in the side-menu was staying RED (meaning it is unable to connect to the ESPloit interface).

Weird.

After some investigations, I was able to reproduce the issue on some phones at home, and while looking at logcat, I saw some strange lines like this:

05-03 20:01:15.712 10252 10252 D SystemWebChromeClient: http://localhost/vendor.js: Line 51516 : ERROR Error: Uncaught (in promise): Object: {"status":-1,"error":"There was an error with the request: java.net.UnknownServiceException: CLEARTEXT communication to 192.168.1.1 not permitted by network security policy"}

So to give you more insights, the WHID app is basically discussing with a third-party gadget through HTTP. And regarding ESploit, here are few more insights:

ESploit is serving a web application only through port 80 (I guess to have the smallest firmware possible). After a bit of investigation, I discovered that “recent” Android versions are blocking apps which are transmitting data over cleartext protocol, and HTTP in our case. As it is stated in the error message, you can “tweak” the Android application to allow this kind of behavior by changing the network security policy and I will guide through the process.

Changes in config.xml

First, you will need to add some additionl settings within the config.xml file to reference a network_security_config.xml file that we will now specifiy.

File that I added in my config.xml is as follow:

    <platform name="android">
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
            <application android:usesCleartextTraffic="true" />
            <application android:networkSecurityConfig="@xml/network_security_config" />
        </edit-config>
        <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        [... truncated ...]

Changes in network_security_config.xml

This file will give you the ability to tweak the default Android configuration and allow cleartext traffic over {domains, ip addresses, …}.

File should be located at: {PROJECT_PATH}/resources/android/xml/network_security_config.xml

The content of the file file we added for the WHID Mobile Injector looks as follow:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">192.168.1.1</domain>
    </domain-config>
</network-security-config>

Just make sure you change the settions (in the tags) appropriately.

Thanks to those settings, we just had to build a new app and users were able to use the app to interact with their WHID gadget :)