we've got an issue while trying to reach our back-end server from a Windows-10 cordova app with XHR (AngularJS $http call).
The back-end server is available (test with a RESTclient plugin in a browser).
The application is installed on a windows-10 desktop pc with VisualStudio 2015 enables (to view logs).
Here's the error in log (sorry in french):
SCRIPT7002: XMLHttpRequest: Erreur réseau 0x2efd, Impossible d’effectuer l’opération à cause de l’erreur suivante 00002efd.
We added the following meta-tag in our index.html file (we also tried the wildcard *):
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: http://10.148.118.68/* gap: http://10.148.118.68/* 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
And here's the config.xml settings:
<access origin="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
For information, we've built and deployed successfully the application on an Android Device and the app reached the back-end.
Thanks for any help.
we've got an issue while trying to reach our back-end server from a Windows-10 cordova app with XHR (AngularJS $http call).
This is by design as extensions don’t support loopback. Please refer to Edge Extension cannot request to localnets.
default project settings in config.xml created with cordova CLI doesn't include capabilities for PrivateNetwork XHR.
We have to add it "manually":
<Capabilities>
<Capability Name="privateNetworkClientServer" />
</Capabilities>
Related
Now I'm trying to make login call to express rest API with passport Basic Strategy, and on browser everything working fine but from device from Phonegap it's not working. I tried to remove and add cordova-plugin-whitelist plugin. Added following tag to config.xml <allow-navigation href="http://*/*" />. And added to index.html <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> I made cors setup. But it didn't help. Also I found out that my requests contains "/proxy/" inside of call.
Here is example: http://192.168.1.189:3000/proxy/http%3A%2F%2F127.0.0.1%3A8080%2Fapi%2Fauth%2Flogin
is it ok? And here is what I'm getting from server:
Thanks in advance.
I spent some time for search and I found a solution:
In my ionic app.js file I just changed the following line:
const BASE_URL = 'http://127.0.0.1:8080/api';
to:
const BASE_URL = 'http://192.168.1.102:8080/api';
and it works for me.
We have an app using Phonegap 3.6.3 and built with Phonegap build.
As part of this app, we need to download a file onto the device of the user. The file might be a .pdf, an image or any binary file.
We hope to download the file with a blob:file link in the app, and not use a plugin such as file-transfer.
The file is converted from Base64 data and a Blob object is created.
An objectURL is generated through window.URL.createObjectURL() and this is added to the href attribute of an a element.
The DOM contains the following
On desktop, this works without problems, but in the app packaged with cordova 3.6.3 it just fails silently.
I suspect it's related to whitelist functionality in cordova.
In the question https://stackoverflow.com/a/31945728/250787 others have solved the same problem with the cordova-plugin-whitelist.
Unfortunately, this plugin is only for cordova 4.0+
I've tried using the access origin element, but none of the statements appears to have an effect
<access origin="blob:*" launch-external="yes" />
<access origin="blob:*"/>
I already have a access origin to limit traffic to the main backend system of the app
<access origin="https://mobilbackend.mycompany.com/*"/>
How can this be solved?
Okay. blob: requires special additions to the whitelist system, of which you seem to have an incomplete understanding _OR_ are using outdated documentation. I can tell because launch-external="yes" has been removed from use.
You will need to use both the whitelist plugin and add a <meta (...) /> entry into the header of our .html pages.
You need to implement the cordova-plugin-whitelist.
This whitelist worksheet should help.
HOW TO apply the Cordova/Phonegap the whitelist system
NOTE DOING THIS WILL MAKE YOUR APP INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
Add this to your config.xml
<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->
NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
Add the following to your index.html and every .html page.
<meta http-equiv="Content-Security-Policy"
content="default-src * blob:;
style-src * 'self' 'unsafe-inline' 'unsafe-eval';
script-src * 'self' 'unsafe-inline' 'unsafe-eval';">
I have added blob: into the CSP definition. However, this just opens up the app to allow the blob: URL. It is still not clear to me what you mean when you say "download the file", as blob: is not transport protocol. It is only intended to define a type of file.
I also recommend reading this whitelist worksheet, make sure to read 9. CSP (Content Security Policy)
Lastly, if you want to continue this discussion, please continue on Google Groups
So I created a solution that saves the blob and then opens it with the system viewer.
If you want it to be saved in a different location see: here.
By choosing this location you can have it download straight to the desired location.
If you open the file with the system viewer then there is often an option for the user to save the file.
// previously blob is defined as file,
//and file name is saved in data.FileName
var savedFile;
window.resolveLocalFileSystemURL( cordova.file.cacheDirectory, function( dir ) {
dir.getFile( data.FileName, { create:true }, function( file_ ) {
savedFile = file_;
saveFile();
});
});
function saveFile(str) {
if( !savedFile ) return;
savedFile.createWriter(function(fileWriter) {
fileWriter.write( file );
cordova.plugins.disusered.open( savedFile.nativeURL );
console.log( "file " + savedFile.nativeURL + " opened" );
}, function( e ){
throw( 'createWriter Error error' + JSON.stringify( e ) );
});
}
This uses the plugins of:
cordova plugin add cordova-plugin-file --save
cordova plugin add cordova-open --save
I have an app using cordova and angularjs. Some features on the app require access to the Google Maps API and Yahoo Weather API.
When I compile to Android and iOS platforms everything works fine, but not on windows platform (windows phone 8.1). I get these errors on both calls (google and yahoo):
"**APPHOST9601** An app can't load remote web content in the local context".
I think I have the cordova-plugin-whitelist correctly configured with the proper intent, navigation and network tags on config.xml (I also have the meta tag on index.html).
Strangely if I add wp8 cordova platform and run it, I have no errors. Only on the windows platform running the windows phone 8.1 project inside the solution.
This is what I have in the config.XML
<!--Controls which URLs the WebView itself can be navigated to. Applies to top-level navigations only.-->
<allow-navigation href="*" />
<!-- Controls which URLs the app is allowed to ask the system to open. By default, no external URLs are allowed. -->
<allow-intent href="comgooglemaps:*" />
<allow-intent href="sms:*" />
<allow-intent href="tel:*" />
<allow-intent href="geo:*" />
<allow-intent href="*" />
<!-- Controls which network requests (images, XHRs, etc) are allowed to be made (via cordova native hooks). -->
<access origin="https://tel:*" launch-external="yes" />
<access origin="https://mailto:*" launch-external="yes" />
<access origin="https://geo:*" launch-external="yes" />
<access origin="https://comgooglemaps:*" launch-external="yes" />
<access origin="https://*" />
<access origin="http://maps.google.com/*" />
<access origin="content:///*" />
<access origin="*"/> and I also have this in the HTML page <!-- Enable all requests, inline styles, and eval() -->
And in the HTML I have the following metadata
<meta http-equiv="Content-Security-Policy" content="default-src *; media-src *; style-src 'self' * 'unsafe-inline' * 'unsafe-eval' *; script-src 'self' * 'unsafe-inline' * 'unsafe-eval' *" />
I have this code.
<ion-item ng-repeat='item in videos' class="item-thumbnail-left item-text-wrap">
<img scr="http://placehold.it/80x80">
</ion-item>
I am trying to load an image from placehost.it but it is not loading the image.
I have added
<access origin="*" />
the above code to my config.xml file. But it is still not loading when I open it on chrome. I have also enabled COR. What shall I do?
Whitelisting the domains using cordova-plugin-whitelist solves the issue.
Add the plugin via CLI:
cordova plugin add cordova-plugin-whitelist
and then add the following line of code to your app's config.xml:
<allow-navigation href="http://*/*" />
and
this meta tag in your index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
EDIT: The reason for this issue:
From Cordova 4.0.0 for Android's update:
Whitelist functionality is revamped
You will need to add the new cordova-plugin-whitelist plugin to continue using a whitelist
Setting a Content-Security-Policy (CSP) is now supported and is the recommended way to whitelist (see details in plugin readme)
Network requests are blocked by default without the plugin, so install this plugin even to allow all requests, and even if you are
using CSP.
This new whitelist is enhanced to be more secure and configurable, but the Legacy whitelist behaviour is still available via a separate
plugin (not recommended).
Note: while not strictly part of this release, the latest default app
created by cordova-cli will include this plugin by default.
try to use ng-src becaue you are importing from website, not locally.
Cheers
Everything were going well last week and while i was running the application on device or emulating with Genymotion, all the calls to the api were working (Either returning the data or failing but at least showing something).
I was using
ionic run android
I add to update the global cordova ionic:
npm install -g cordova ionic
Since that all the $http requests are not even processing. I can't get any responses while the Api is still working fine and the CORS are perfectly set.
The only way i found is to use the option --livereload or -l :
ionic run -l android
I want to avoid using the livereload at any cost.
I started to create a project from scratch using ionic 1.0.0 and cordova lib 4.3.0.
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $http) {
alert('calling api');
// Create an anonymous access_token
$http
.get(domain+'/oauth/v2/token?client_id='+public_id+'&client_secret='+secret+'&grant_type=client_credentials')
.then(function(response){
alert(response.data.access_token);
});
})
So while using :
ionic serve
It is correctly alerting 'calling api' then the response (An OAuth access token for that example).
But while using :
ionic run android
It is only alerting 'calling api' but doesn't seem to process the http request.
Did anyone experience something similar? I'm getting big headaches on that.
With the update of Cordova 4.0.0, you will face an issue of not being able to make HTTP calls to RESTful APIs and load external resources, which include other HTMLs/video/audio/images.
Whitelisting the domains using cordova-plugin-whitelist solves the issue.
remove whitelist plugin if already installed:
cordova plugin remove cordova-plugin-whitelist
Add the whitelist plugin via CLI:
cordova plugin add cordova-plugin-whitelist
and then add the following line of code to your app's config.xml which is located in your application's root directory:
Reccomended in the documentation:
<allow-navigation href="http://example.com/*" />
or:
<allow-navigation href="http://*/*" />
and
this meta tag in your index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>
The reason for this issue:
From Cordova 4.0.0 for Android's update:
Whitelist functionality is revamped
You will need to add the new cordova-plugin-whitelist plugin to continue using a whitelist
Setting a Content-Security-Policy (CSP) is now supported and is the recommended way to whitelist (see details in plugin readme)
Network requests are blocked by default without the plugin, so install this plugin even to allow all requests, and even if you are
using CSP.
This new whitelist is enhanced to be more secure and configurable, but the Legacy whitelist behaviour is still available via a separate
plugin (not recommended).
Note: while not strictly part of this release, the latest default app
created by cordova-cli will include this plugin by default.
It worked for me, when I tried the following…
In Config.xml, allow access & navigations to your domains:
<access origin="http://yourdomain1.com" />
<allow-navigation href="http://yourdomain1.com"/>
Then in index.html, add the Content-Security-Policy as below:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://yourdomain1.com data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *; script-src 'self' 'unsafe-eval' 'unsafe-inline';">
I faced the same issue with ionic app. In my case, the android app was running fine on my mobile but it was not making the http calls on other team members mobile.
After debugging the device using chrome://inspect#devices. I came to know the exact error.
During the HTTP call, the app was giving ERR_CLEARTEXT_NOT_PERMITTED error.
I used below link to allow sending the data in clear text format in AndroidManifest.xml file in my playpen.
https://forum.ionicframework.com/t/err-cleartext-not-permitted-in-debug-app-on-android/164101
If you are sending http request to a non https url, Then Make sure you have added
android:usesCleartextTraffic="true"
in AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
<uses-permission android:name="android.permission.INTERNET" />
<application
...
android:usesCleartextTraffic="true"
...>
...
</application>
</manifest>
For alternative options check this answer
This is a network security related issue. To fix this, replace resource/android/xml/network_security_config.xml
With,
<?xml version="1.0" encoding="utf-8" ?>
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
</trust-anchors>
</base-config>
<domain-config cleartextTrafficPermitted="true">
<domain>api.mydomain.in</domain>
</domain-config>
</network-security-config>