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
});
Related
create an app on cordova and I'm using Framework7. In this application, consult a web server that returns some data to me, including a link to download a pdf material, but I'm getting an error message because I don't have permission to download it includes the website address on the access source at config.xml.
I have the cordova-plugin-whitelist plugin installed and in config.xml I configured the following
<access origin = "https://www.mysite.com.br/download/" />
<allow-intent href = "https://www.mysite.com.br/download/" />
I have already followed several recommendations from other forums, but nothing works.
I always receive the following message: net :: ERR_FAILED (https://www.mysite.com.br/download/myname.pdf)
Could someone help me solve this problem that I have been facing for 2 months.
thanks
You can try to solve by creating a more general rule as:
<widget ...>
<access origin="www.mysite.com.br/" />
<access origin="www.mysite.com.br/" />
<allow-intent href="http://www.mysite.com.br/*/*" />
<allow-intent href="https://www.mysite.com.br/*/*" />
</widget>
and a Content Security Policy as
<meta http-equiv="Content-Security-Policy" content="default-src 'self' mysite.com.br">
Take care on the position of files (.htaccess rewrite rules could make you have a hard day ifyou don't check them). I'm quite sure you just check the presence of external class on your link in HTML, isn't it?
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)
Using phonegap version 6.5.2 I'm trying to whitelist domains for an Android application's data and media requests.
In config.xml I have:
<access origin="*" />
as well as a few specific domains:
<access origin="http://example.com" />
<access origin="http://fonts.googleapis.com" />
I've also tried putting this in my root index.html, which should allow all domains, right?:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
But I'm still getting nothing but 404 errors when my app tries to load content.
What gives?
The basic rule to follow in case of 404 errors in cordova android app are as follows:
Check whether cordova whitelist plugin is installed properly
Check whether allow access origin is set properly in config.xml
Check whether content security policy is set properly in your HTML
files
These steps should address almost all the problems related to 404 errors provided the requested URLs are up and running. Hope it helps. Cheers
Not sure where the problem was, but after uninstalling and re-installing the whitelist plugin, and restarting the simulator, everything seems to be working. Thanks #Gandhi for pointing me in that direction.
In my Ionic project I want to add in an iframe for a Vimeo video. This is working fine when I'm testing the app on my localhost as well as on my server, but on Android it doesn't seem to work. It says the webpage is unable to load because of the following error: 'net::ERR_FILE_NOT_FOUND'.
This is the iframe code:
<iframe src="//player.vimeo.com/video/VIDEO-ID-HERE" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
I have already added the whitelist plugin, which is working fine with Ajax requests to other sites, but the iframe still doesn't seem to work. Any suggestions?
Got it. Just adding http:// before the link was enough to get it to work. Now it looks like this:
<iframe src="http://player.vimeo.com/video/VIDEO-ID-HERE" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
You need to use a cordova plugin that allows you to implement a whitelist policy for navigating the application Webview on Cordova >= 4.0.
Install this plugin in your Ionic 1 project using
ionic plugin add cordova-plugin-whitelist
Then add the following lines to the config.xml file to allow loading external URL's:
<allow-intent href="http://*/*" launch-external="yes"/>
<allow-intent href="https://*/*" launch-external="yes"/>
You have to add that frame definition in Meta data tag
frame-src * 'self'
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://iframe url">
then add the following meta tag in your config.xml cordova file:
<access origin="*"/>
<allow-navigation href="*"/>
If you are using cordova 5.0 or above then add the white-list plugin.
ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git
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