I am damn tired by googling & searching in stackoverflow but none of the solutions are working for me.
I have a static app that i developed. now upon executing in android now in android simulator and real device images are not loading from external url.
any help in this regard will be much appreciated.
Note:
I have already installed whitelist plugin
I have already have this below meta tag in my html file
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">
I have added :
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
in my res/xml/config.xml
let me know anything else i am missing in order to show an image from http://website/image.png
Thanks,
Ahsan Ali
ok the issue is resolved.
In order to load external url you have to put https:// protocol. now from api level 28, you must put https:// for the images
WARNING: Don't put a lot of high quality images because it will crash your app too.
Related
ajax.post works great in the browser but doesn't work on the real android device(and I don't know how I can see the error because I have left browser environment).
I think I have a problem with Internet permission or origin restriction. I have read about ManifestAndroid.xml but I can't find it in my project.(no such file)
How can I fix this? Thanks in advance
Here is my config.xml:
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
Here is index.html restrictions:
<access origin="http://example.com" />
<meta http-equiv="Content-Security-Policy"
content="default-src * 'self' 'unsafe-inline' data: gap: 'unsafe-eval';
style-src * 'self' 'unsafe-inline';
connect-src * ;
script-src * 'self' 'unsafe-inline';
media-src *">
I had this problem with my Angular 2 App, the things I did are follows:
1) When you load Android Studio, you can select File->Profile APK to debug/run you APK, then you can look at the logcat to see any error messages.
2) Add the allow-navigation tag in config.xml
You need to add the Whitelist plugin to the plugin section of the config
3) What is the URL that you are making the request to? My big problem was that I was using relative URLs and because my Web App is on the device not the server, my relative path was pointing to file protocol file:// not http://.
So I would recommend making sure the URLs are absolute, ie http://, overwise your app could be doing a post to the file system not that's why it's failing
I've looked through a lot of similar issues, but none have seemed to work for me. Our app makes 2 API requests - the first to fetch an OAuth code to our API (works fine) and the other posts that code to the Rails API (which is failing).
I am posting to http://localhost:3000/api/v1/users/auth/openid_connect/callback
But getting net::ERR_CONNECTION_REFUSED. However, this works fine when running on iOS.
My config currently has:
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
I've tried adding <allow-intent href="http://localhost:3000/api/v1/*" /> and <allow-intent href="http://127.0.0.1:3000/api/v1/*" /> and even the full openid_connect/callback URL but none seem to work.
In my index.html, I have
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src * 'unsafe-inline'">
Does the issue lie with how I am handling access origin in the config or do I have the Content-Security-Policy wrong?
To close the issue, the error was that Android didn't seem to know how to handle localhost. Changing the domain to http://10.0.2.2 solved the problem.
I have referred https://github.com/apache/cordova-plugin-whitelist and added below to my config.xml:
<plugin name="cordova-plugin-whitelist" spec="~1.3.0"/>
<access origin="*" subdomains="true"/>
<!-- A wildcard can be used to whitelist the entire network,
over HTTP and HTTPS.
*NOT RECOMMENDED* -->
<allow-navigation href="*"/>
<allow-intent href="*"/>
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
I also have the below permission in my AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET" />
And below is the CSP declaration in the index.html:
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *;script-src 'self' localhost:35729 84.254.133.91:8080 'unsafe-inline' 'unsafe-eval';connect-src *">
And the server is running # 84.254.133.91:8080
Here is the code with http post call:
var req = {
method: 'POST',
url: $rootScope.labels.IP + $rootScope.labels.USER_ID_CREATE_URL,
data: {
userId: $scope.newUserIdCreate.username,
password: $scope.newUserIdCreate.password,
}
};
var res = $http(req);
res.success(function (data, status, headers, config) {
alert("request success:" + JSON.stringify({ data: data }));
});
res.error(function (data, status, headers, config) {
alert("request failed:" + JSON.stringify({ data: data }));
});
None of the $http requests are going through. I have spent nearly 2 days and referred 'n' number of articles but still can't crack this issue.
Further, I added a href link to 'google/facebook', and I am able to access these websites from the App.
Using the web app by running 'ionic serve' works perfectly fine. From the Android apk, none of the requests are hitting the server.
What is the missing configuration?
After much investigation over several days, the issue was same as that CORS issue with Tomcat and Android Webview
Adding the CordovaOriginWrapper as mentioned in one of the answers in the above question resolved the issue.
This is tricky and the ionic documentation never talks about this behavior. Ionic documentation needs to be updated with this behavior.
I have created an Android-app with Cordova and on an emulator it works like a charm. When I tried to run it on a device I didn't get past the login-screen because I got an error saying: "Origin is not allowed by Access-Control-Allow-Origin". Is this a CSP issue within Cordova or is it something wrong with my server?
Some of Config.xml:
<access origin="*" />
<access origin="baseUrlToServer.com" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
And my CSP metatag in Index.html:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' *UrlToServer.com;
style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>
Have anyone stumbled across something similar and have an idea? Help would be much appreciated :)
The issue is server-side.
Your server has to respond with some HTTP RESPONSE HEADERS among which :
Access-Control-Allow-Origin: *
On apache2, for example
<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
</IfModule>
I have been testing my app using ionic serve while developing and everything is working fine. I am now trying to export the apk using ionic build android, then storing the file 'android-debug.apk' on my web server and downloading it via a phone's browser and installing it to test it in the real world.
The app installs OK, but won't let me make any $http requests. I have installed the plugin cordova-plugin-whitelist, and also added the following to my config.xml file:
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
As well as that, I have added this into my main index.html file:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
Can someone tell me why the requests are still failing please?
I have tested on 2 different servers, both have CORS enabled and this has been verified using Postman.
Thanks for any help
Edit:
My $http request looks like this:
$http.get('http://url.com/request').then(function(res) {
console.log('success');
console.log(res);
}, function(res) {
console.log('error');
console.log(res);
});
After enabling remote chrome debugging, I get an error alert, following by an object which has:
data: null,
status: 0,
statusText: ""
Looks like I needed to add:
<uses-permission android:name="android.permission.INTERNET" />
into platforms/android/AndroidManifest.xml. Working OK now!