How to solve Cordova In App Browser Plugin Error: net::ERR_CLEARTEXT_NOT_PERMITTED

After 2 years of working with different technologies, I started using Cordova once again for a tiny side project. As usual with everything I work with, when trying something quite simple, there errors of any kind, this time the error seemed to be related to the network configuration.

Cause of this issue

This problem will always be triggered in your project if you haven't enabled the cleartext support i nyour application. In my case with the Cordova In App Browser, the following code triggers the exception:

let ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');

The apache website works normally in my browser, so what's the real problem? In this case, when you trigger a request to http://apache.org, the server will make a redirect because the https connection is missing as well as the www that is forced when you create the request. Your application blocks the first redirect as it has been done through HTTP (insecure). If you trigger the request using https, then it works perfectly:

let ref = cordova.InAppBrowser.open('https://apache.org', '_blank', 'location=yes');

Thats the reason of this problem. Clear Text traffic is basically text that has not been subjected to encryption and is not meant to be encrypted.

Possible solution #1

The most obvious solution is to simply add the correct protocol to the website that you're trying to open (HTTPS) as long as the server from which the information is requested supports said protocol.

Possible solution #2

The first solution isn't that useful when you are working with websites that don't offer a secure connection or with local files.

As mentioned, the cleartext traffic support is disabled by default Starting with Android 9 (API level 28), so you can enable it if you need to. Simply add the following attribute to the application node in your AndroidManifest.xml file:

android:usesCleartextTraffic="true"

Your file will look like this:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yourcompany.packagename">

    <application
        ...
        android:usesCleartextTraffic="true"
        ...
        >

This will allow the clear text traffic from any source which depending on your needs may be the best solution. Try building your application and launch the In App Browser with the URL that was throwing the exception and it should work now.

Possible solution #3

Alternatively if you need to allow the clear text traffic from certain sources only, you may specify it using the network security configuration file of your android application (res/xml/network_security_config.xml):

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config>
        <domain 
            includeSubdomains="true"
            cleartextTrafficPermitted="true"
        >example.com</domain>
    </domain-config>

    <base-config cleartextTrafficPermitted="false"/>
</network-security-config>

Change the example.com domain with the one you need and be sure to use the mentioned configuration file in your AndroidManifest.xml file like this:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yourcompany.packagename">

    <application
        android:networkSecurityConfig="@xml/network_security_config"
        >

Happy coding ❤️!