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
Related
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 *">
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'.
My app is working just fine after cordova run browser, but it cannot connect to my backend server when deployed to iOS using cordova run ios (local resources load properly).
Debugger tells me the problem may be that it prefixes all XHR requests to backend server with file:///var, so that instead of http://my-backend.com/rest It tries to connect to file:///varhttp://my-backend.com/rest.
I have whitelist plugin installed, <access origin="*" /> in my config and this line in index.html when deploying to iOS:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; content-src *">
If it's important, on front end I use Angular with ngCordova and Restangular plugin for handling AJAX requests. I use Cordova 6.2.0.
So the question is, how do I get rid of this file:///var prefix?
EDIT:
As it turns out, there's a similar error on Android device, but the prefix is file:///android_asset
EDIT 2:
My AJAX calls are made with Restangular. I have default url set like this:
RestangularProvider.setBaseUrl("http://my-backend.com"), and example call looks like this: Restangular.one('session/check').get()
< meta http-equiv="Content-Security-Policy" content="default-src 'self' *.xyz.com data: gap: https://ssl.gstatic.com *.xyz.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;connect-src *">
Please check the above Error message that I am getting in visual studio 2015 when running in device is : FAILED TO LOAD RESOURCE XYZ.COM but the app works fine on ripple browser.
is the issue related to csp? if so how may I fix it?
Through the meta tag you posted. The Ajax call has been enabled in CSP (through directive "connect-src *").
Please first check if XYZ.COM is valid. And try adding the http/https schema to the meta tag directive if you are loading resource from a remote host. ex:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://*.xyz.com ";...>
If none of the above works, If you are having cordova-plugin-whitelist, I would suggest you adding the following codes to config.xml under root element:
<access origin="http://*.XYZ.com" />
<allow-intent href="http://*.XYZ.com" />
<allow-navigation href="http://*.XYZ.com"/>
If still nothing works, Could you share a basic demo that can reproduce this problem?
When I run an ionic app in Android Studio on a phone running android 5 no images are displayed and I get this message for each image:
Refused to connect to 'http://192.xxx.x.xxx:3000/promotions/0' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
On content-security-policy.com I found and tried the following:
Starter Policy
This policy allows images, scripts, AJAX, and CSS from the same origin, and does not allow any other resources to load (eg object, frame, media, etc). It is a good starting point for many sites.
default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';
But still no luck. In fact I have tried many permutations of the Content Security Policy all without success.
I get the same as using Android Studio when I use:
ionic build android
ionic run android
The images are stored on a JSON-server which runs ok and everything works fine on localhost on the computer.
Any pointers for solving this issue ? Thanks
try to add this meta in the head
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' ">