We have a PhoneGap application using Ionic framework. In this app we can have an iframe containing links with any target: _parent, _top, _self, ...
We capture the clicks with target _parent, _top and _blank to open them in a browser. We don't capture links with target _self or no target because we want them to be opened inside the iframe.
This worked fine when we were using version 3.9.1 for platform-ios, but when we updated to 4.1.0 the links with _self or no target stopped working for some reason. We click them and nothing happens. Nothing is written in the console either.
We have the following in the config.xml:
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*"/>
And the CSP in index.html:
<meta http-equiv="Content-Security-Policy" content="default-src * filesystem: gap: https://ssl.gstatic.com; img-src * filesystem: gap: data: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline' filesystem: cdvfile: file:; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:* filesystem: cdvfile: file:">
Are we missing something in order to make it work?
Related
When I ran the project on Chrome browser the ajax requests worked fine but when I installed the app on Android the requests are not working anymore.
This is the code:
var xhr=new XMLHttpRequest()
xhr.onerror=function(){
var message=alert(txt('Please turn on mobile data or Wi-Fi','Ligue os dados moveis ou Wi-Fi'))
}
xhr.onreadystatechange=function (){
if (this.status== 200 && this.readyState == 4){
alert("trye")
eval(xhr.responseText)
}
}
xhr.open("POST",`http://dpreaction.ml?i=js`)
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
xhr.send()
the config.xml file
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.teste.teste" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>DP Reaction</name>
<description>Inrease your things</description>
<author email="gilluisfrancisco70#gmail.com" href="http://dpreaction.ml">
DP Reaction
</author>
<content src="index.html" />
<allow-intent href="*" />
<access origin="*" />
<allow-naviation href="*" />
</widget>
And this is my tag:
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
According to https://github.com/apache/cordova-android/issues/1354:
Content-Security-Policy is a different security mechanism than CORS (Cross-Origin Resource Sharing).
In cordova-android#10, they implemented a WebAssetLoader, which proxies requests through the https://localhost protocol. The WebAssetLoader acts like a private web server only accessible to your app. This was done because some web view features require you to be in a "secure context" (e.g. HTTPS) for the features to be enabled. In doing so, it does enable CORS enforcement.
Cordova android 9.x uses the plain old file system (file://), which didn't enforce CORs. This is why you see the XHR request work in 9. x but not in 10. x. You can make 10. x behave like 9. x by enabling the AndroidInsecureFileModeEnabled
So if you are using cordova-android#10 just add the following preference at config.xml:
<preference name="AndroidInsecureFileModeEnabled" value="true" />
I had the same problem and it solved it for me. :)
Ihave a phonegap app, i have put all measeures
<access origin="*://*.mysite/*" subdomains="true" />
<access origin="*://*.gstatic.com/*" subdomains="true" />
<access origin="*://*.google.com/*" subdomains="true" />
<access origin="*://*.googleusercontent.com/*" subdomains="true" />
when my data credit expires, i get a redirect to ISP remote page, which i don't want.
how can i modify my config file or my index page to avoid redirect or redirect to internal source if credit expires.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://*.myweb http://myweb/tribes/shopmobile.php data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline';style-src 'self'https://fonts.googleapis.com/icon?family=Material+Icons;img-src https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css 'self' http://myweb/ data:;script-src * 'unsafe-inline' 'unsafe-eval'; media-src *;style-src 'self' 'unsafe-inline'; img-src 'self' http://myweb data:;child-src 'self' https://www.youtube.com data:;frame-src *;">
I used the above csp on my app
To allow internal links
style-src 'self' 'unsafe-inline'-allow external and internal styles
script-src * 'unsafe-inline' 'unsafe-eval'-to allow all js scripts
img-src 'self' http://myweb data: allow images from my server
content="default-src 'self' http://*.myweb http://myweb/tribes/shopmobile.php data: gap: https://ssl.gstatic.com allow data from my server only
the above code worked
I've got a problem with the inline scripts on android emulator, they don't want to work.
I've already solved with the addeventlistener but now I need to add some old code and I don't want to rewrite every inline event.
Is it possible to adapt inline events for android too?
I've solved with this metatag:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline' ; style-src 'self' 'unsafe-inline'; media-src *">
I am building an app with Meteor for a couple of weeks now, without any problems. Yesterday I didn't had any problems either.
Today I wanted to continue building my app, and the terminal gives me this error every 10 seconds:
I20151208-11:19:04.463(1) (android:file:///android_asset/www/plugins/cordova-plugin-whitelist/whitelist.js:25) No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.
So I tried running another Meteor project, and got the same error.
I have googled this error, and it says I have to change the config.xml in my project. I dont know where config.xml is located in a Meteor project, but since the error is showing to ALL projects I'm trying to run, I dont think that's the solution.
Can anyone help me solve this problem?
EDIT:
I added this line in the <head> tag of my Meteor project, and in the <head> tag of my .meteor/local/cordova-build/www/index.html file:
<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 *">
Also, I added this to my .meteor/local/cordova-build/config.xml:
<allow-navigation href="*" />
And this to my mobile-config.js file:
App.accessRule('*');
Without success :(
Please add this code to your index.html header
<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 *">
Solved! Restarted my phone, and that solved the problem!
Is anyone able to get this to work in their PhoneGap build? :
$(function(){
$.getJSON("http://reddit.com/.json", function(data){
alert("Success!");
})
})
It works fine in browsers but when I build the app it doesn't run.
I've added these to my config.xml already to whitelist all domains
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
<allow-navigation href="*" />
<access origin="*" />
<allow-intent href="*" />
Also tried building it with this CSP and without
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
which I got from here: https://github.com/apache/cordova-plugin-whitelist
I took a look at this and replicated your Ajax request in my own PhoneGap Build project.
What I noticed was that the URL you are using http://reddit.com/.json seems to get redirected on Android devices at least to https://www.reddit.com/.json
I discovered this by doing a PhoneGap Build build with debug turned on, running the .apk on a Nexus 7 with Chrome remote debugger tools attached, and seeing this in the JS Console:
"Refused to connect to 'https://www.reddit.com/.json' because it violates the following Content Security Policy..."
I fixed this by amending the Content Security Policy meta tag in index.html to include both https://www.reddit.com and http://reddit.com in the connect-src clause. Rebuilt on PhoneGap Build using this CSP and it works fine on the Nexus 7 now:
<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://reddit.com https://www.reddit.com">
So my PhoneGap application now looks like this and works:
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
var parentElement = document.getElementById('deviceready');
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
$.getJSON('http://reddit.com/.json', function(data){
alert('Success - got ' + data.data.children.length + ' children in JSON');
});
}
};
app.initialize();
For your convenience I put the complete app ready for PhoneGap Build in a Github repo here. Feel free to use this as you need.