I have developed an app using
HTML, CSS, JAVASCRIPT
<preference name="phonegap-version" value="cli-12.0.0" />
<preference name="android-minSdkVersion" value="22" />
<preference name="android-maxSdkVersion" value="34" />
<preference name="android-targetSdkVersion" value="34" />
Remotely I have a Laravel application that is connected to a database and passes data from the Laravel application to the Cordova application.
the whole connection works when I test on a web browser and I can see the whole data passed into the app from the remote source.
When I compile, deploy and download the application from the Android Play Store, the remote data that showed earlier on the browser while testing does not show in the application.
This is what I am doing:
<script>
// Initialize the carousel
document.addEventListener('DOMContentLoaded', function () {
// Define a function to fetch the HTML
function fetchHTML() {
const container = document.getElementById('ajax-container');
// Hide the container with a fade-out effect
$(container).fadeOut(500, function () {
fetch('http://api.damekex.com/ajax-view')
.then(response => response.text())
.then(html => {
// Append the fetched HTML to the container element
container.innerHTML = html;
// Show the container with a fade-in effect
$(container).fadeIn(300, function () {
// Set up the progress bar animation after a delay
setTimeout(function () {
$('.hideonprogressbar').each(function () {
var thisEl = $(this);
var hidelment = "." + thisEl.attr('data-target');
var widthprogress = 1;
setInterval(function () {
widthprogress++;
if (widthprogress > 0 && widthprogress < 100) {
thisEl.find('.progress-bar').css('width', widthprogress + "%");
} else if (widthprogress === 100) {
$(hidelment).fadeOut();
}
}, 550);
});
}, 1000);
});
})
.catch(error => {
console.error('Error fetching view:', error);
});
});
}
// Fetch the HTML initially
fetchHTML();
// Set up an interval to fetch the HTML every 50 seconds
setInterval(fetchHTML, 30000);
});
</script>
<script>
function fetchmatch() {
fetch('http://api.damekex.com/live')
.then(response => response.text())
.then(htmlContent => {
const container = document.getElementById('matches-container');
container.innerHTML = htmlContent;
})
.catch(error => {
console.error('Error fetching view:', error);
});
}
// Fetch the HTML initially
fetchmatch();
// Set up an interval to fetch the HTML every 5 seconds
setInterval(fetchmatch, 10000);
</script>
in my config:
<allow-navigation href="*" />
<allow-navigation href="https://api.damekex.com/*" />
<allow-navigation href="https://code.jquery.com/*" />
<access origin="*" />
<access origin="https://api.damekex.com/*" />
<access origin="https://code.jquery.com/*" />
<allow-intent href="*" />
I also tried this
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; font-src * data:; img-src * data:; connect-src *;">
even after all these the data from remote sources doesn't show up on the application.
I have also tried displaying contents from an iframe using my remote source but it doesn't work.
The only thing that seems to work is when I use a hyperlink to access my remote source.
please help
Since Android 9 "clear text traffic" (traffic not encrypted by SSL/TLS) is disabled by default. If an app wants to use such connections you have to add a network security config file and allow it for the domain(s) you want to communicate with.
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">insecure.example.com</domain>
</domain-config>
</network-security-config>
Network security configuration
In general plain http requests should only be used for development, the release app should always use https URLs. Consider to configure HTTPS for the used server.