Fix Error ERR_CLEARTEXT_NOT_PERMITTED di IONIC

Cara mudah membetulkan ERR_CLEARTEXT_NOT_PERMITTED.

Masalah

Tantangan membuat aplikasi Android menggunakan IONIC salah satunya wajib berjalan mulus disemua versi API dari terjadul sampai terbaru. Sering ditemukan aplikasi berjalan mulus di Android 5 tapi crash di versi 8.

Hal itu terjadi karena ada perbedaan API. Jadi kita perlu menyesuaikan kodingan disetiap versi API.

Misalnya masalah koneksi ke webservice backend (REST API). Saya menemukan perbedaan konfigurasi config.xml dan network_security_config.xml. Pada versi 5 REST API terkoneksi dengan baik namun pada versi 8 muncul error ERR_CLEARTEXT_NOT_PERMITTED.

Dalam tutorial ini saya anggap pembaca sudah mengerti bagaimana cara menginstall dan menjalankan aplikasi Android menggunakan IONIC. Jika belum silahkan baca dokumentasinya.

Solusi

Cara termudah adalah merubah konfigurasi pada file:

  1. config.xml (lokasinya di root folder aplikasi IONIC, misalnya aplikasi-saya/config.xml).
  2. network_security_config.xml (lokasinya masih di root folder, misalnya aplikasi-saya/resources/android/xml/network_security_config.xml)

Buka file config.xml dengan editor favorit kemudian pada section <edit-config…> tambahkan;

<application android:usesCleartextTraffic="true" />

Sebelum ditambahkan;

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:networkSecurityConfig="@xml/network_security_config" />
</edit-config>

Setelah ditambahkan;

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:networkSecurityConfig="@xml/network_security_config" />
    <application android:usesCleartextTraffic="true" />
</edit-config>

Jangan lupa simpan perubahan.


Selanjutnya buka file network_security_config.xml lalu tambahkan domain REST API;

<domain includeSubdomains="true">domain/ip server api (misal: api.google.com)</domain>

Jangan tambahkan HTTP/HTTPS, cukup nama domain atau alamat IP.

Sebelum ditambahkan;

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

Setelah ditambahkan;

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

Jangan lupa simpan perubahan.


Setelah semua perubahan diatas selesai jalankan perintah di command line dilokasi folder IONIC;

cordova clean android

Kemudian build/run ulang;

ionic cordova run android

Jika semua benar maka ERR_CLEARTEXT_NOT_PERMITTED berhasil diatasi.


Penjelasan

Pada dokumentasi Android: https://developer.android.com/guide/topics/manifest/application-element?hl=id#usesCleartextTraffic dijelaskan ada perbedaan nilai default android:usesCleartextTraffic

Menunjukkan apakah aplikasi akan menggunakan traffic jaringan, seperti HTTP cleartext. Nilai default untuk aplikasi yang menargetkan API level 27 atau lebih rendah adalah "true". Aplikasi yang menargetkan API level 28 atau lebih tinggi nilainya secara default ditetapkan ke "false".

Jika atribut ditetapkan ke "false", komponen platform (misalnya, tumpukan HTTP dan FTP, DownloadManager, dan MediaPlayer) akan menolak permintaan aplikasi untuk menggunakan traffic cleartext. Library pihak ketiga dianjurkan untuk menerima setelan ini. Alasan utama untuk menghindari traffic cleartext adalah karena kurang terjaganya kerahasiaan, keaslian, dan perlindungan terhadap sabotase; penyerang jaringan dapat memproses data yang ditransmisikan serta memodifikasinya secara diam-diam.

Karenanya pada tutorial diatas kita merubahnya menjadi “true”.

Semoga bermanfaat.