Capacitor/Android - usesCleartextTraffic attribute is always true in the AndroidManifest.xml file

[TaTo30]

What happened?

My team has developed a web app using Quasar + Capacitor and when the app is built for Android target its produce an AndroidManifext.xml file with this property:

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

For security reasons, we are not allowed to deliver an application with this flag set true, so we try to set it to false directly in the AndroidManifest.xml but we noticed during the building that this property is always overrided to true, after some research I found this code from Quasar codebase:

quasar/app-webpack/lib/utils/fix-android-cleartext.js

Lines 1 to 23 in 30c836a

	const fs = require('node:fs')
	module.exports.fixAndroidCleartext = function fixAndroidCleartext (appPaths, mode) {
	const androidManifestPath = appPaths.resolve[ mode ](
	mode === 'cordova'
	? 'platforms/android/app/src/main/AndroidManifest.xml'
	: 'android/app/src/main/AndroidManifest.xml'
	)
	if (fs.existsSync(androidManifestPath)) {
	// Enable cleartext support in manifest
	let androidManifest = fs.readFileSync(androidManifestPath, 'utf8')
	if (androidManifest.indexOf('android:usesCleartextTraffic="true"') === -1) {
	androidManifest = androidManifest.replace(
	'<application',
	'<application\n android:usesCleartextTraffic="true"'
	)
	fs.writeFileSync(androidManifestPath, androidManifest, 'utf-8')
	}
	}
	}

By the moment, we commented this code directly in the node_modules package, but I would like to know the reason of this flag is always set true, I think this option should be configured somewhere in the quasar.config.js so in case like ours we could disable it easily.

PD: Sorry if we don't share a valid reproduction URL, but since capacitor requires AndroidStudio installed in the machine we can't share a Codepen or similar.

What did you expect to happen?

To have an option or configuration where we could config that CleartextTraffic attribute.

Reproduction URL

https://stackblitz.com/edit/quasarframework-dqtgyx

How to reproduce?

1. Create a Quasar project using Capacitor and Webpack: https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/preparation
2. Build the project using this command quasar build -m capacitor -T android
3. Notice that the AndroidManifest.xml generated has the usesCleartextTraffic=true attribute

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), Capacitor Mode

Platforms/Browsers

No response

Quasar info output

Operating System - Windows_NT(10.0.22631) - win32/x64
NodeJs - 18.19.0

Global packages
  NPM - 10.2.3
  yarn - 1.22.21
  @quasar/cli - 2.3.0
  @quasar/icongenie - 4.0.0
  cordova - Not installed

Important local packages
  quasar - 2.11.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.11.3 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.15.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.45 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - Not installed
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.20.12 -- Babel compiler core.
  webpack - 5.82.1 -- Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.11.1 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 6.6.0 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.9.4 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - 4.6.1 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/cli - 4.6.1 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - 4.6.1 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - ALDO-HERNANDEZ
  Wi-Fi - 192.168.1.25
  vEthernet (Default Switch) - 172.25.128.1
  vEthernet (WSL (Hyper-V firewall)) - 172.24.240.1

Relevant log output

No response

Additional context

No response

[yusufkandemir]

It was introduced ~4.5 years ago in this commit: 3d894c7
I think it stems from this issue: ionic-team/capacitor#2118

If the app is working fine with it set to false(or left unspecified), both when the dev server is using HTTP and HTTPS, then we can remove that fix. Please let us know the behavior under different scenarios. If it's still needed most of the time, we will provide a way to disable this fix, instead of removing it.

[TaTo30]

During development this attribute must be true, so the web server can be requested by the client, otherwise, ERR_CLEARTEXT_NOT_PERMITTED error will throw out.

But in production environment there are not a web server been requested, so the attribute could be perfectly false. What about do something like this:

• usesCleartextTraffic="true", when the project is in development (quasar dev)
• usesCleartextTraffic="false", when building (quasar build)
• It would be better if this value could be set in quasar.config though

[TaTo30]

Any updated of this? @yusufkandemir

[yusufkandemir]

To avoid introducing potential breaking changes, usesCleartextTraffic should still be true in production unless specified otherwise. So, we can add an option to quasar.config file > capacitor to be able to turn it off in production when needed.

Although it should not be too hard, I don't have any bandwidth to design, implement, and test this API. If you want to contribute this, that would be great.

[rstoenescu]

Fix will be available in:

• q/app-vite v2.0.0-beta.22
• q/app-vite v1.10.0
• q/app-webpack v4.0.0-beta.23
• q/app-webpack v3.14.0

Cleartext should have never been left activated for production builds.

[rstoenescu]

The releases are now available.