How to fix net::ERR_CLEARTEXT_NOT_PERMITTED

How to fix net::ERR_CLEARTEXT_NOT_PERMITTED error

Android WebView is a system component powered by Chrome that allows Android apps to display web content. In other words, WebView is an embeddable browser that a native application can use to display web content.

One of the most common uses for a WebView is to display the contents of a link inside an app without leaving it. In recent Android versions, you might sometimes see ERR_CLEARTEXT_NOT_PERMITTED error if you try to open an unsecured URL (usually a HTTP URL).

Below is a screenshot of the error.

ERR_CLEARTEXT_NOT_PERMITTED in the wild

The very same unsecured URLs can be opened in Chrome, Edge or any dedicated browser just fine, which could cause confusion across new developers.

This article will explain why ERR_CLEARTEXT_NOT_PERMITTED happens, and what you can do to fix it.

Why does ERR_CLEARTEXT_NOT_PERMITTED happens?

Cleartext is any transmitted or stored information that is not encrypted or meant to be encrypted.
Anything that is transferred in unsecured URL can be categorized as cleartext information. Those information can be eavesdropped or tampered by a malicious third party. In rare cases, they can launch an attack directed towards your device or leaking your personal information.

Starting from Android 9.0 (API level 28), Google has decided to phase out support for cleartext network protocols in the WebView. Any attempt to access a non-HTTPS URL will raise ERR_CLEARTEXT_NOT_PERMITTED error.

Fix ERR_CLEARTEXT_NOT_PERMITTED

The proper solution for this error is to simply use HTTPS URLs for all of your endpoints and remove all unsecured URLs from your codebase.

Workaround to avoid ERR_CLEARTEXT_NOT_PERMITTED

If you don't have access to the infrastructure to force every connection to use HTTPS, you can try the adding the flag android:usesCleartextTraffic="true" into AndroidManifest.xml.

First you need to edit the Android Manifest file at android/app/src/main/AndroidManifest.xml and add the following line into the application tag.

android:usesCleartextTraffic="true"

The file after the changes would look something like this :
BEFORE

<application
        android:name="io.flutter.app.Test"
        android:label="bell_ui"
        android:icon="@mapmap/ic_launcher">

AFTER

<application
        android:name="io.flutter.app.Test"
        android:label="bell_ui"
        android:icon="@mapmap/ic_launcher"
       android:usesCleartextTraffic="true">

The workaround might be good for testing and debugging. However, it leaves a big security hole and opens a threat to data integrity.

Android 7+ ERR_CLEARTEXT_NOT_PERMITTED solution

Another better solution introduced from Android 7.0 is to configure the network_security_config.xml file. You can read more about it in Google's Network security configuration page.

Basically, network_security_config.xml allows you to whitelist a domain from the global security rules. Therefore, the traffic comes to and from that domain would not be raise ERR_CLEARTEXT_NOT_PERMITTED.

First, you need to create a file in res/xml/ and name it network_security_config.xml.

edit network_security_config.xml to fix ERR_CLEARTEXT_NOT_PERMITTED

Then you need to add a domain configuration block and set cleartextTrafficPermitted flag to true so it would look like this.

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

After that, you need to spcify the path to your network security config file under your AndroidManifest so it would look like below :

<application
    android:name=".DemoApp"
    android:networkSecurityConfig="@xml/network_security_config"
...

We hope that the solutions above help you solve your problem. Please note that the proper way to fix the error is using a secure network traffic protocol rather than a cleartext one.

Click to rate this post!
[Total: 33 Average: 5]

Leave a Comment