Running cordova app webview with http instead of https
Asked Answered
D

3

5

How to run cordova app webview on http://localhost instead of https://localhost ?

I have been compiling my app with API Level (targetSdkVersion) 30 and as far as I know my app was running internally over http, since all CORS requests to http urls were working fine. Now as required by playstore I'm using targetSdkVersion 31 and I see my app is running over https, therefore the webview is blocking CORS requests to http.

Mixed Content: The page at 'https://localhost/index.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www...com/ajax/get_domain.json.php'. This request has been blocked; the content must be served over HTTPS.
Durazzo answered 16/11, 2022 at 17:14 Comment(4)
Update your calls to https? What is the issue here?Madaras
Not all CORS requests are pointing to domains that support https, that is the issueDurazzo
Well, I don't want to be that guy but the world has moved on to https... Let's Encrypt is free...Madaras
<preference name="Scheme" value="https" />Umbilicus
C
8

Possible solutions:

  1. Change all your web content to http. This way, there is no mixed content. You can do this by adding <content src="http://localhost/index.html" /> inside the widget tag in global config.xml (in project root). A good place to put it is after the <autor> tag and before the <access origin tag.

  2. Build your own plugin (Android Only). If you are using cordova, then you want to code in HTML, JavaScript and CSS. I know. But the Java code to build a simple plugin isn't so terrible hard to write. The only thing your plugin has to do is to run this block of code:

    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) { WebSettings settings = ((WebView)this.webView()).getSettings(); settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW); }

You will use more time in learning the interface plugins need to implement, that copying and pasting that block of code.

Now... before somebody says "correct thing is to use HTTPS".

Look, if we are looking for a solution for this is because we are in a situation you cannot predict, and that clearly contradict your experience. But that doesn't make it less legit.

My own use case

Not everything that matters happen at the play store.

We have a NAS server with custom web interface that we are coding and evolving as we have new needs for features.

For example, if you want to upload without connect using samba shares we have an http file upload page at http://192.168.1.61/upload. And, before somebody says "why...", because you may be uploading from an untrusted machine, and you don't want to input your credentials into a machine that may be recording them. The upload page doesn't require credentials, and put files in a temp directory where a human being will look at them before deciding its final destination.

We also have a Cordova App that allow to record audio and upload them in the background to the NAS, that then converts them to text and save them to the database.

Why an app and not simple another page in the NAS interface? Because implement audio recording as an app is better. So, the app can do a lot of things that the web interface does, but it has advantage when coming to use things present in a mobile device, like camera, sensors, etc. Access to those using only standard web apis, when a cordova plugin isn't helping, is less efficient and takes more effort. In some cases, it's not possible at all.

The NAS is only accessible to machines connected to the same LAN. No need for https. Security is in LAN isolation. If LAN is compromised... but this is a calculated risk.

For example, the first time I tried to fetch http://192.168.1.61/login.php I got the "mixed content" error. Because Cordova index.html page was loaded using https and we were trying to fetch from http.

Solution: make app's index.html page to load using http, so no mixed content. This is achieved by adding <content src="http://localhost/index.html" /> inside the widget tag in global config.xml (in project root).

This app isn't in the store, and won't be in the future. It is loaded to devices by manual APK installing. You have to temporarily enable "Allow apps from alternative sources" in each device when updating/installing.

Again, don't assume that if something isn't in the store, or isn't developed for a massive audience, then it doesn't exist or doesn't matter at all. There are plenty of legit use cases out there.

Cantatrice answered 23/2, 2023 at 21:20 Comment(0)
H
1

Add this on the config.xml

<preference name="scheme" value="http" />
Hereat answered 11/7 at 18:33 Comment(0)
H
0

I solved this in my project Android add on <platform/> this:

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
    <application android:usesCleartextTraffic="true" />
</edit-config>

And on <widget> add xmlns:android="http://schemas.android.com/apk/res/android" Example:

<widget id="com.your.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Add on after of <content src="index.html" />:

<preference name="scheme" value="http" />

Read this: https://docs.flutter.dev/release/breaking-changes/network-policy-ios-android

Hereat answered 12/9 at 16:51 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.