Develop Reference

Absolute path reference for files on Android with Cordova

I have an external Web based app using PhoneGap and Cordova. On iOS, I have no problem referencing local files, such as image files in the package. I include the Cordova cordova-plugin-file and on the external web server I reference the local image files with the path cdvfile://localhost/bundle/www/img/ such as the img syntax below:
<img src="cdvfile://localhost/bundle/www/img/news.jpg">
But, I cannot seem to make it work for an Android. I have tried the following methods and other similar paths, but no success.
<img src="file://localhost/assets/www/img/news.jpg">
<img src="cdvfile://localhost/assets/www/img/news.jpg">
<img src="file:///localhost/assets/www/img/news.jpg">
<img src="file:///android_assets/www/img/news.jpg">
Key items in my config.xml file include:
<plugin name="cordova-plugin-whitelist" source="npm"/>
<plugin name="cordova-plugin-file" source="npm"/>
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
In the index.html file - my Content Security Policy is:
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-inline' 'unsafe-eval'">
Relative file path references on the html pages on the local system work fine, but when I go to the external web site and WebView app I can't reference the localhost absolute path correctly for an Android. I can do it on iOS, but can't figure it out for Android.
Any suggestions on how to access local files in the app package on an Android with an absolute path?

Try using relative paths in the following format,
<img src="assets/www/img/news.jpg">
I had a similar issue with locale json's and it resolved like this.
Put the assets once again with this format in the www directory and try doing another clean Android build. (Removing the android directory, adding the Cordova Android platform again, and rebuilding)

Href not working despite CSP and <allow-intent>

I have made an app using PhoneGap (so I am writing in HTML, JavaScript and CSS) and in this app I've written multiple "href" functions such as these:
<a href="mailto:marcel.loman#apt-alu-products.com">
marcel.loman#apt-alu-products.com </a><br />
Website: www.apt-alu-products.com</p>
I have added some "Content-security-policy lines in the "head" part of all of my HTML documents to ensure the fact it would work if I run the apk on android. This CSP looks lik this:
<meta http-equiv="Content-Security-Policy"
content="default-src *;
style-src * 'self' 'unsafe-inline' 'unsafe-eval';
script-src * 'self' 'unsafe-inline' 'unsafe-eval';">
On top of that I've added the following lines in my config.xml file in between the "widget" part:
<allow-intent href="http://*/" />
<allow-intent href="https://*/*" />
<allow-intent href="mailto:*" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" />
(I know these lines aren't recommended due to security reasons, but these were my last resort)
Despite of al these lines the links still don't work when I build an APK out of it and run it on my Android phone.
There are lots of articles on the internet about this subject, but none of the ones i read were able to tackle my problem.

Adding these links directly into the app's HTML without the inappbrowser plugin will not work. The http link will actually load the content into your Webview, replacing your app code.
I assume you want the mailto link to launch the default mail client and the http link to open in the system browser? Assuming this, do the following:
First, add the inappbrowser plugin to your project:
cordova plugin add cordova-plugin-inappbrowser
Then add some code to use the inappbrowser plugin to open the link with window.open rather than the default behaviour of opening the link within the Webview.(The following uses jQuery):
$(document).on('click', 'a[href^=http], a[href^=mailto]', function(e){
e.preventDefault(); // prevent Webview from following link
window.open($(this).attr('href'), '_system'); // Open with inappbrowser
});

Apache Cordova: Failed to load resource: the server responded with a status of 404 (Not Found)

When I run my application either in the Android emulator or on my Android device, I get he following error on all AJAX requests:
Failed to load resource: the server responded with a status of 404 (Not Found)
I have tried all the following steps to solve this problem, but it persists.
Installed the whitelist plugin to the project using npm.
Added <plugin name="cordova-plugin-whitelist" version="1" /> to
config.xml.
Added <uses-permission android:name="android.permission.INTERNET" />
to platforms\android\AndroidManifest.xml.
Added <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline';"> and <meta http-equiv="X-XSS-Protection" content="0"> to the <head> of www/index.html file.
Added <access origin="*" />, <allow-navigation href="*" /> and
<allow-intent href="*" /> to the config.xml file.
Regardless I still get the same errors. Any ideas?
The project compiles fine. I'm on Windows 7, using Cordova 5.4.0, Android 5.1.1

Removing the whole Android part of the application with:
cordova platform remove android
and adding it again with:
cordova platform add android
solved the problem, which is still a mystery to me.
Perhaps there was something wrong left from the earlier versions of Cordova that wasn't getting on well with the current Cordova version.

I think the problem's with your Content Security Policy meta tag - try adding * to the default-src to open up Ajax requests to anywhere. You could also add a connect-src clause specifically for Ajax requests and list the hosts and protocols you want to be able to access. For example:
<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 http://myhost.mydomain.com">
Would allow Ajax requests to http://myhost.mydomain.com
I wrote a blog post addressing this topic that you may find helpful, it can be read here.

Update Android
cordova platform update android#5.1.1
I had the problem for me connect to a php page on my server and I made an update to android

mailto: links not opening mail app on Android in cordova app

This is driving me crazy. I'm working on a Ionic app (Cordova, Angular etc). I have a contact us link which contains a mailto: href
href="mailto:info#somedomain.net?subject=my%20App"
I've read countless posts on SO that say you have to remove
<access origin="*"/>
from the config.xml in the project root and replace it with:
<access origin="mailto:*" launch-external="true" />
Which I've done. When I run ionic build it gets added to the config.xml in platforms/android/res/xml. But no matter what I do the link doesn't open the mail app on any Android simulator (even when email is configured in the simulator).
Sadly I don't have a device to test on - so is this just a emulator thing or am I missing something?

You must install the cordova plugin whitelist:
cordova plugin add cordova-plugin-whitelist
or if you want to save the reference to your config.xml file:
cordova plugin add cordova-plugin-whitelist --save
and that you have to add the intent to your config.xml file:
<allow-intent href="mailto:*" />
You can find more info here.

Try this:
window.location.href = "mailto:your#ema.il?subject=Works on iOS too";

I just solved this thanks to the responses & articles above. I'm not sure what has or hasn't changed since the above postings, but for the reference of others; I now have http://, https://, tel:, & mailto: working with only the inappbrowser plugin installed and no manual edits to config.xml needed. I did everything mentioned above & it still wasn't working, so I started fiddling and found that I the window.open() call requires the second parameter of "_system" to work correctly (it tried to use the browser and "navigate" to http://mailto:xxx... without the "_system" flag).
However, for curiousity's sake, I uninstalled the whitelist plugin and removed the manual edits in config.xml and it still works.
Notes:
-I don't remember all the variations I tried, but onclick couldn't access the Ionic/Angular/Cordova scope(s), so I stuck with ng-click.
-I did not / have not tried using href="..." with any of the options.
(If I remember, I'll test them and update this to reflec my results.)
So, with only the cordova-plugin-inappbrowser installed and no config.xml edits, here are my working / tested solutions:
ng-click="window.open('http://somesite.com', '_system')"
ng-click="window.open('https://google.com', '_system')"
ng-click="window.open('tel:(123) 345-4567')"
ng-click="window.open('mailto:email#example.com', '_system')"
Tested 9/20/2016 Using:
HTC One M8, android 6 ,cordova v6.3.1, cordova-plugin-inappbrowser v1.5.0, ionic v2.0.0, jdk1.8.0_101, android SDKs 21, 23, & 24 installed

what if you replace "true" with "yes"... I use this in my app and it works.
<access origin="tel:*" launch-external="yes"/>

Ran into this today and noticed something that affected mailto, but not tel, links:
In addition to adding the intent to the cordova config as described by dave's answer
<allow-intent href="mailto:*" />
I also had to allow mailto links in the csp header of my page
<meta http-equiv="Content-Security-Policy" content="default-src 'self' mailto:*">
Didn't see any documentation around this behaviour of CSP headers.

Just in addition to use Cordova's WhiteListPlugin ;
It worked for me in this way:
in config.xml
<access origin="*"/>
<access origin="mailto:*" launch-external="true" />
<allow-intent href="mailto:*" launch-external="yes"/>
And specially for ios add :
<platform name="ios">
<allow-navigation href="mailto:*" launch-external="yes"/>
...
<platform name="ios">

Altering Cordova's WhiteListPlugin in config.xml did not work for me -- <access >,`. I tried many combinations, including those above. Doesn't mean these won't work necessarily, just for my setup it doesn't. (Building for Browser, Android, and iOS)
However, using the Cordova InAppBrowser Plugin worked:
As mentioned above, use the inAppBrowser plugin and set the target to _system.
This by passes the issues I was seeing in iOS with unsupported url, and launches the native systems web browser (i.e., Does not rely on WhiteListPlugin to allow the URL call).
Hope this helps.
Cordova version 6.3.1.

Ajax requests fail after upgrading to Cordova 5.0 + cordova-android#4.0

I recently upgraded to Cordova 5.0 (and Cordova Android 4.0) and, since then, my app can no longer access external resources.
I still have <access origin="*" /> in config.xml (as before), and I still have <uses-permission android:name="android.permission.INTERNET" /> in AndroidManifest.xml (as before), but ajax calls are rejected with no explanation (the "textStatus" param is "error", the "errorThrown" param is null, and xhr.state() returns "rejected").
I've verified that no request is hitting the server, so it appears it is being stopped by Android, but the log doesn't give any explanation as to why...
I can access the URL in question fine from the Android browser, just not from the app.
The ajax request is made via a call to Backbone.sync() of Backbone.js, which ultimately calls jquery's $.ajax(). I haven't changed anything about how the call is made... just upgraded cordova.
Are there new requirements/setup for network requests, in Cordova 5.0, or anything I need to do differently from previous Cordova versions?
Does anyone know of a way I can get more information as to why Android and/or Cordova is rejecting the request?

I tracked the culprit down to the android#4.0.0 cordova platform. It now requires the new cordova-plugin-whitelist plugin.
It can be installed with
cordova plugin add cordova-plugin-whitelist
or by adding
<plugin name="cordova-plugin-whitelist" spec="1" />
to config.xml, and then it is configured with
<allow-navigation href="*" />
in place of the old, <access origin="*" /> tag.
It's a little annoying that the log doesn't spit out the "whitelist rejection" error messages anymore when a problem like this comes up (that would have saved me a ton a time), but maybe that'll come later.

In Cordova 6.X you need to remove the builtin whitelist plugin and reinstall the new version of plugin.
cordova plugin remove cordova-plugin-whitelist
and re install the plugin
cordova plugin add cordova-plugin-whitelist
and then replace <allow-navigation href="*" /> to config.xml file instead of <access origin="*" />
in my case this trick worked.

Two things
Ensure the ajax url you are using allows cross origin requests
Are you passing relevant headers while making cross origin requests
To Read
http://enable-cors.org/
How to enable CORS in AngularJs
http://backbonetutorials.com/cross-domain-sessions/

if you are using cordova 6.x.x u need to uninstall builtin cordova-plugin-whitelist using
cordova plugin remove cordova-plugin-whitelist
and reinstall it by using
cordova plugin add cordova-plugin-whitelist
even if the issue persists relaunch command prompt and try it.

For me it started working after I removed from html file mata tag:
<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 *">