Ionic 5/Capacitor ERR_CLEARTEXT_NOT_PERMITTED in Android

Question

I'm using Capacitor for building the Ionic app. These are the following commands run in order to open the android app in Android Studio.

npx cap add android
ionic build
npx cap copy
npx cap open android

In Android Studio, I ran the build and click on Run after which I see the error net::ERR_CLEARTEXT_NOT_PERMITTED in my device. I have seen various posts having the same error but those are with Cordova build. In my case, I'm not using Cordova for preparing the android app.

Here are few excerpts from my Ionic App.

capacitor.config.jsonfile

{
  "appId": "com.abc",
  "appName": "abc",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "cordova": {
    "preferences": {
      "ScrollEnabled": "false",
      "android-minSdkVersion": "19",
      "BackupWebStorage": "none",
      "SplashMaintainAspectRatio": "true",
      "FadeSplashScreenDuration": "0",
      "SplashShowOnlyFirstTime": "false",
      "SplashScreen": "none",
      "SplashScreenDelay": "0"
    }
  },
  "server": {
    "url": "http://192.168.1.208:8100"
  }
}

I also see this error in LogCat of Android Studio

W/cr_AwContents: Application attempted to call on a destroyed WebView
    java.lang.Throwable
        at org.chromium.android_webview.AwContents.a(PG:127)
        at org.chromium.android_webview.AwContents.a(PG:209)
        at com.android.webview.chromium.WebViewChromium.evaluateJavaScript(PG:8)
        at android.webkit.WebView.evaluateJavascript(WebView.java:1113)
        at com.getcapacitor.cordova.MockCordovaWebViewImpl$1.run(MockCordovaWebViewImpl.java:203)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:193)
        at android.app.ActivityThread.main(ActivityThread.java:6923)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:870)

score 15 · Answer 1 · answered Mar 29 '20 at 01:24

15

Add this to you AndroidManifest.xml in the application element

<application
    android:usesCleartextTraffic="true"

answered Mar 29 '20 at 01:24

Aaron Saunders

33,180
5
60
80

This did not work for me. Once I added this statement, it gave `ERR_CONNECTION_REFUSED` error in the device. – coderpc Mar 29 '20 at 19:40
I think this is the correct way if doing it, because it fits with capacitor's philosophy of _Code once, configure everywhere_ – Alejandro Barone Apr 28 '21 at 22:36
I was told to come here and find the solution for my issue (https://stackoverflow.com/questions/67602933/ionic-login-button-not-working-on-android-emulator) but it didn't help me either. – Ani May 19 '21 at 13:43
Thanks for this. Is there a way to only enable this for local development cases? – Dmitry Minkovsky Jun 17 '21 at 15:27

palsch · Answer 2 · 2023-02-02T11:23:11.407

12

When you specify the server in your Capacitor config, you should set server.cleartext to true to prevent this issue from happening. Example:

{
  "appId": "com.abc",
  "appName": "abc",
  "npmClient": "npm",
  "server": {
    "url": "http://192.168.1.208:8100", 
    "cleartext": true
  }
}

From the config documentation:

    /**
     * Allow cleartext traffic in the Web View.
     *
     * On Android, all cleartext traffic is disabled by default as of API 28.
     *
     * This is intended for use with live-reload servers where unencrypted HTTP
     * traffic is often used.
     *
     * **This is not intended for use in production.**
     *
     * @since 1.5.0
     * @default false
     */

edited Feb 02 '23 at 11:23

answered Nov 29 '20 at 22:33

palsch

5,528
4
21
32

didn't help! now it takes a long time with a white screen and then it throws `ERR_CONNECTION_TIMED_OUT` – Saba Ahang Dec 15 '20 at 12:34
I don't understand how this could help, and this definitely did not fix the problem for me. The ERR_CLEARTEXT_NOT_PERMITTED message looks like it is coming from the WebView client. This solution only seems to add cleartext support to the internal server. Am I misunderstanding? – deltamind106 Feb 01 '23 at 22:29
@deltamind106 From the [config documentation](https://capacitorjs.com/docs/config) (which I believe did not exist when this answer was written initially), it seems like this boolean should configure the WebView client in a way that it allows cleartext communication. – palsch Feb 02 '23 at 11:24

score 12 · Answer 3 · answered Jul 02 '21 at 09:38

12

You can allow cleartext traffic in the Web View by enabling it on the capacitor.config file, by adding the below code

server: {
  cleartext: true
}

Build your project to see the changes

ionic capacitor build android

answered Jul 02 '21 at 09:38

Mario Shtika

1,436
19
31

Show show, Thank You – Wellington Alves Nov 25 '21 at 19:22

score 7 · Accepted Answer · answered Mar 28 '20 at 21:50

7

This post helped me find the solution to my problem.

I removed the field server in the capacitor.config.json file to make it work.

"server": {
    "url": "http://localhost:8100"
}

Now my capacitor.config.json looks like

{
  "appId": "com.abc",
  "appName": "abc",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "cordova": {
    "preferences": {
      "ScrollEnabled": "false",
      "android-minSdkVersion": "19",
      "BackupWebStorage": "none",
      "SplashMaintainAspectRatio": "true",
      "FadeSplashScreenDuration": "0",
      "SplashShowOnlyFirstTime": "false",
      "SplashScreen": "none",
      "SplashScreenDelay": "0"
    }
  }
}

answered Mar 28 '20 at 21:50

coderpc

4,119
6
51
93

all that did was turn off live reload, and that is why your app started working – Aaron Saunders Mar 29 '20 at 01:22
1

I did not use livereload at all for my app to run. Somehow, that `server` line got added in the `capacitor.config.json` file and when i removed that field, my app started working in the device and emulator both. I did not have to use any of `android:usesCleartextTraffic` attributes in the manifest.xml – coderpc Mar 29 '20 at 19:41
1

@coderpc is right. happend for me to. From one second to another without changes by myself this line got added too and nothing worked anymore. Removed it and everything works normal now. Thanks – Lukas R. Jun 02 '20 at 13:28

score 5 · Answer 5 · answered Jul 23 '21 at 21:46

5

Add this code into capacitor.config: server: { cleartext: true }

answered Jul 23 '21 at 21:46

Alan Tavares

51
1
1

1

Show show, Thank You – Wellington Alves Nov 25 '21 at 19:22

Lucas Ferrarezi · Answer 6 · 2022-02-08T18:32:24.797

3

Go into capacitor.config.json and add the cleartext: true prop:

"server": {
  "cleartext": true
}

then, run npx cap copy, start the server, re-compile and run the project from your IDE (Xcode/AndroidStudio) again.

edited Feb 08 '22 at 18:32

answered Feb 08 '22 at 15:59

Lucas Ferrarezi

94
2
4

score 1 · Answer 7 · edited Apr 04 '20 at 03:01

1

just run this command :

ionic capacitor run android -l --ssl

edited Apr 04 '20 at 03:01

Sukhi

13,261
7
36
53

answered Apr 04 '20 at 02:35

Yns Dev

11
3

score 0 · Answer 8 · answered Apr 18 '21 at 10:43

While solutions above might work, it is also worth checking if your web assets were correctly copied to the android/app/src/main directory as the same net::ERR_CLEARTEXT_NOT_PERMITTED error will be raised due to missing index.html.

In some cases, e.g. when cap sync cannot delete the previous assets directory, files are not copied correctly, but process does not exit with error.

score 0 · Answer 9 · answered May 25 '21 at 13:22

0

That works for me: https://www.basezap.com/fix-leartext-error-for-websites/

In app/manifests/AndroidManifest.xml edit application tag adding android:usesCleartextTraffic="true" property

answered May 25 '21 at 13:22

Pierre Michel

1

narayan sharma · Answer 10 · 2022-05-19T13:00:01.127

Create a file under android>src>main>res>xml>network_security_config.xml

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

then in your AndroidManifest.xml inside application tag add

android:networkSecurityConfig="@xml/network_security_config"

deltamind106 · Answer 11 · 2023-02-15T14:38:03.453

EDIT: After further testing, in particular the solution to my problem was to upgrade the @capacitor/android and @capacitor/core packages both to 4.6.2. If you have a version of these packages that is 4.6.1 or earlier, then the problem occurs.

After trying all the other answers here and elsewhere, all to no avail, the solution for me was to upgrade the entire project (including my custom Capacitor plugins) to use Capacitor 4.x. Depending on your project, this may be easier said than done. If you can use the built-in upgrade tools then great, but of course they failed for me and I had to upgrade manually.

It is not clear exactly why my Capacitor 3.x project suddenly started getting this error, but upgrading to 4.x solved the problem. This is probably not the first solution you should try, but if all else fails, it's something to try and it can't hurt to be on the latest version of Capacitor.

Ionic 5/Capacitor ERR_CLEARTEXT_NOT_PERMITTED in Android

11 Answers11

Linked