href not working when made into APK using Phonegap Build - android

I have created some very easy code in which I use multiple href function
like this.
<p> E-mailadres:<a href="mailto:frank.veelenturf#bwb-group.com">
frank.veelenturf#bwb-group.com</a><br/> />
Website: www.alucol.nl</p>
(The first one should draft a mail and the second one should just open the browser and go to their site)
These work just fine when I run the code directly in on my computer using PhoneGap. However when I build an APK using PhoneGap Build the function doesn't work on my phone. I was wondering if there was a fix to this.

You need to use the whitelist plugin for Cordova and use a Content Security Policy meta. This is a generic CSP to guide you.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap://ready file://* 'unsafe-inline' *; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; img-src *">

Related

Why configure Cordova config.xml if I already have a CSP in index.html

So I already have the following tag in my index.html:
content="base-uri *; object-src 'none'; script-src 'self' 'sha256-LOml7W8v08pQhD4vcNTjNY+cvcYQV/kKF3Zhx8Ht2gc=' 'sha256-F9BbcOryafEGOcifHtySkTo4WqryjpUUKUEFIg2xMQ4='; style-src 'unsafe-inline' 'self'; default-src 'none'; manifest-src 'self'; connect-src https://*.mywebsite.com ws://*.mywebsite.com wss://*.mywebsite.com https://api.mixpanel.com https://www.google-analytics.com; frame-src 'self' some.other.website; font-src 'self'; img-src *.mywebsite.com 'self' data: https:; media-src 'self' *.mywebsite.com">
which is already fairly strict.
We are now migrating to cordova. The questions are:
Since we already have a strict CSP in our index.html and cordova seems to be applying it correctly, do we need to do any configuration in the config.xml
If we do need to configure something in our config.xml, what should we configure given our CSP (Please note that we would like to allow our cordova app to redirect to any domain).
Thanks in advance
You do not need to configure anything in your config.xml unless you plan to show videos from streaming sites like YouTube.
In my config.xml I had to add this directly inside <widget>:
<access origin="*" />

Ionic 1 external HTTP request

I am trying to consume HTTP services from an external location but only get ERR_CONNECTION_TIMED_OUT because the request never gets to the server.
The app have been built with ionic 1 and angularjs, using angular-resource to consume services
After reading several SO questions I end up setting up my app as follows:
config.xml
<allow-navigation href="*" />
<access origin="*" />
index.html
<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://server_ip:8080 data: gap: *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
of course, service_ip is the real server ip address and it accepts HTTP requests as I have been able to consume them using REST clients.
Other considerations:
The app is built and launched using command ionic run android.
I am using plugin cordova-plugin-whitelist. (I removed and added it again following several SO answers... without success).
Also using plugin angular-resource for HTTP requests. Requests are correct as I have tested them using local machine ip and they work, problems came after changing that ip to the server ip.
It looks like a CORS problem, I expected to solve it via meta tag in index.html file but the behaviour is the same even when I set up:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
Any help will be appreciated.
Finally, the problem was on my device. I had to upgrade Google's WebView application in my device to get it work.
Solution was found here

How to set properly "content-security-policy" for Cordova Ios/Windows Phone/Android?

I am building an app for our company. We are having an iframe (don't ask why...) loading a responsive website. It is (should) be transparent for the user.
I added few js lines in order to manage offline pages.
It is running well on android simulator (cordova with Visual Studio) and android Device. However I am facing a content-security-policy that I suspect to be the source of this error:
deviceready has not fired after 5 seconds
From what I have read it could come from content security policy.
I got this error on run:
Refused to load frame 'gap://ready' because it violates the following
Content Security Policy directive: "default-src 'self'
https://www.mywebsite.fr
http://www.mywebsite.fr". Note that 'frame-src'
was not explicitly set, so 'default-src' is used as a fallback.
What do you think of this meta:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://www.mywebsite.fr http:///www.mywebsite.fr; child-src 'self' https:///www.mywebsite.fr http:///www.mywebsite.fr; script-src 'self' https:///www.mywebsite.fr http:///www.mywebsite.fr;
gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
And my config.xml:
<access origin="https:///www.mywebsite.fr" />
<access origin="http:///www.mywebsite.fr" />
Thanks for your time,
Stéf.
The CSP error gives you all of the details. You do not have a 'frame-src' directive specified so it is falling back to 'default-src' which does not whitelist the gap: protocol.
You have two choices:
1) Add gap: to your 'default-src'.
2) Add a 'frame-src' directive and add gap: to that.
If you go for 2, you may also want to add the 'child-src' directive for future compatibility with the same value as 'frame-src'.

http-equiv Content-Security-Policy works in browser but not on android device - IONIC

I'm developing an app with ionic and just inserted this Content-Security-Policy meta-tag.
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' fonts.googleapis.com 'unsafe-inline'; script-src 'self' code.jquery.com cdn.firebase.com www.gstatic.com maps.googleapis.com localhost:35729 apis.google.com 'unsafe-inline' 'unsafe-eval' https://domain.com">
I don't get any errors in the browser but alot on the android device.
I'm using crosswalk.
No errors in chrome locally but when i inspect the app with chrome://inspect and run it on the device I get these errors:
So the Content-Security-Policy isn't working on the device at all.
What's my mistake?
It appears you need an explicit URI scheme as described here:
content security policy error, but meta-tag includes URL
Thus, something like this should work:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; script-src 'self' https://code.jquery.com https://cdn.firebase.com https://www.gstatic.com https://maps.googleapis.com localhost:35729 https://apis.google.com 'unsafe-inline' 'unsafe-eval' https://domain.com">

Ionic Google Maps Not working in Android Device but works fine in Browser

I have integrated google maps in my app which works fine in the browser.
I have also installed cordova whitelist plugin and included the meta tag :
<meta http-equiv="Content-Security-Policy" content="default-src *;
script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
style-src 'self' 'unsafe-inline' *">
But nothing seems to work.
Please tell me what else should I do to get maps working on my android device.
I solved this problem by adding https:// to the google API url i.e.
from
<script src="//maps.googleapis.com/maps/api/js?key=[my key]"></script>
to
<script src="https://maps.googleapis.com/maps/api/js?key=[my key]"></script>

Categories

Resources