I'm bulding an app with cordova. I'm using phonegap serve to load the app with phonegap developer app.
In index.html:
<meta http-equiv="Content-Security-Policy" content="default-src gap: file: tel: *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
(I've also tried without file: tel:, result is the same)
I can verify that this is prepared correctly in platforms/browser/www/index.html
Then I open phonegap app in iPad, I run phonegap serve, I open Safari development tools, press connect and there it is:
Refused to load gap://ready because it appears in neither the child-src directive nor the default-src directive of the Content Security Policy.
In index.html I can see that the directive has been transformed to:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
Is there a way to make ipad to load the directive correctly?
EDIT
I've also tried to compile phonegap app developer with CSP directive in index.html, result is the same
EDIT - 1
I've also downloaded the zip file from http://192.168.1.130:3200/__api__/appzip (this is where I have my phonegap serve server) and index.html is already transformed!
The strange here is that platforms/browser/www/index.html is not transformed, so there is some process in-between that is transforming the CSP.
In my config.xml I've this directives:
<content src="index.html" />
<access origin="*" />
<access origin="cdvfile://*" />
<access launch-external="yes" origin="tel:*" />
<!-- Allowed WebView navigations -->
<allow-navigation href="http://*"/>
<allow-navigation href="https://*"/>
<allow-navigation href="http://*/*"/>
<allow-navigation href="https://*/*"/>
<allow-navigation href="data:*"/>
<allow-navigation href="about:*"/>
<allow-navigation href="tel:*"/>
<allow-navigation href="gap:*" />
<!-- Allowed URLs to be opened from the app -->
<allow-intent href="http://*"/>
<allow-intent href="https://*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="geo:*"/>
<allow-intent href="cdvfile://*" />
It was related to this issue: https://github.com/creationix/nvm/issues/1361
Mainly, bash was detecting that v6.4.2 and pointing to it (which phonegap was pointing to correct version) but when executing phonegap from command line, it was executing v6.0.2, which probably was not setting up the correct CSP.
Related
We have an Ionic 1 app using Cordova that we are trying to get to work with Cordova 6.2.0. We have not updated this app for a few of years and apple emailed us telling us the app needs to be re-signed to work with iOS 14.5. I have updated Cordova to 6.2.0 and updated the plugins but can not get it to navigate pages using $state.go or any of the links to work. I get a popup saying "Failed to load the webpage with error: unsupported URL" and the error below in the console.
ProcessAssertion: Failed to acquire RBS Background assertion 'WebProcess Background Assertion' for process with PID 8681, error: Error Domain=RBSAssertionErrorDomain Code=3 "Target is not running or required target entitlement is missing" UserInfo={RBSAssertionAttribute=<RBSDomainAttribute| domain:"com.apple.webkit" name:"Background" sourceEnvironment:"(null)">, NSLocalizedFailureReason=Target is not running or required target entitlement is missing}
The cordova-plugin-ionic-webview plugin is installed and the lines below are in the config.xml
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-intent href="fb:*" />
<allow-intent href="twitter:*" />
<allow-navigation href="twitter:*" />
<allow-navigation href="fb:*" />
<allow-navigation href="*" />
<allow-navigation href="*://*" />
The Content Security Policy is
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
We are planing on rewriting the app over the next few months but we need to get this working for iOS 14.5 before we can finish the rewrite because it will probably come out in a few weeks.
I'm trying to run a HelloWorld application in Angular + Cordova, but it does not work well when I run it with the ios emulator (iPhone 12 Pro Max - iOS 14.4). I'm getting a blank page (screenshot below).
I have already changed the href="/" in my index.html to href="./" but it doesn't work. I added ios platform with "cordova platform add ios" command line and I have installed all the requirements as: XCode, ios-deploy and CocoaPods tools.
I created the Angular project with Angular CLI and did not modify anything. After, I created the Cordova project inside and linked the dist folder to the www folder.
Versions:
Cordova version 10.0.0 - Angular version 11.2.9 - Angular CLI version 11.2.8 - Node version 15.14.0
Blank Page Screenshot
this is the config.xml file:
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
this is the index.html file in www folder:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HelloWorldAngularCordova</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.3ff695c00d717f2d2a11.css"></head>
<body>
<app-root></app-root>
<script src="runtime.7b63b9fd40098a2e8207.js" defer></script><script src="polyfills.00096ed7d93ed26ee6df.js" defer></script><script src="main.80cad638da592e13f2e3.js" defer></script></body>
</html>
Where is my error(s)? Thanks
You need to add
<script type=”text/javascript” src=”cordova.js”></script>
in your index.html file.
Then in main.ts:
let onDeviceReady = () => {
platformBrowserDynamic().bootstrapModule(AppModule);
};document.addEventListener('deviceready', onDeviceReady, false);
like here:
binding angular with cordova
I added this to config.xml
<access origin="*"/>
<access origin="tel:*" launch-external="yes"/>
<access origin="mailto:*" launch-external="yes"/>
<allow-intent href="*"/>
<allow-navigation href="*"/>
<allow-navigation href="tel:*"/>
<allow-navigation href="mailto:*"/>
<allow-navigation href="data:*"/>
<plugin name="cordova-plugin-whitelist" version="1" />
And this to index.html:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
When I'm clicking to a link like that: Call! nothing happens on the ios (on the android it works well).
If I change my config.xml to:
<access origin="//*"/>
<access origin="tel:*" launch-external="yes"/>
<access origin="mailto:*" launch-external="yes"/>
<allow-intent href="//*"/>
<allow-navigation href="//*"/>
<allow-navigation href="tel:*"/>
<allow-navigation href="mailto:*"/>
<allow-navigation href="data:*"/>
<plugin name="cordova-plugin-whitelist" version="1" />
It calls, but ajax requests to server stop working.
just remove allow-navigation
<allow-navigation href="tel:*"/>
<allow-navigation href="mailto:*"/>
I don't why ,but it work!
cordova-ios#4+wkwebview will get the navigation filter first to respond for the url,and do nothing!!
https://github.com/apache/cordova-plugin-wkwebview-engine/pull/20
Until I recently built, my cordova app was able to embed an iframe of a website just fine; now, presumably after an update I forgot about, building the app results in the iframe being blank on iOS but works in Android.
I have added the following settings to config.xml:
<access origin="*"/>
<access origin="*.pushwoosh.com" />
<access origin="*.hoby.org" />
<allow-navigation href="*" />
<allow-intent href="*" />
As well as the following Content Security Policy:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
Which should allow basically everything. I have the cordova-whitelist plugin added, using cordova 6.1.0 and Ionic 1.7.14
Edit: it actually works on iOS emulator but not when I run it on the device.
Edit 2: it seems like it may be a mobile safari issue; I am viewing the files over my network and even outside of Cordova they're not loading properly. I can confirm though that this was working as of a few days ago at least.
your application of the whitelist plugin is close, but likely is failing because you have javascript in your index.html. CSP has stopped many developers. The easiest thing to do is move all the Javascript and CSS to their own separate files.
Short of that, here is a widely applied solution:
As a side note, the whitelist system is required as of Cordova Tools 5.0.0 (April 21, 2015). For Phonegap Build, that means since cli-5.1.1 (16 Jun 2015)
Add this to your config.xml
<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->
NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
Add the following to your index.html
<meta http-equiv="Content-Security-Policy"
content="default-src *;
style-src * 'self' 'unsafe-inline' 'unsafe-eval';
script-src * 'self' 'unsafe-inline' 'unsafe-eval';">
NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
This whitelist worksheet should help.
HOW TO apply the Cordova/Phonegap the whitelist system
I'm using Cordova 5.3.1, and I seem to be totally unable to make any network requests without errors. If I add
$.ajax( "http://foo.bar.com/getfeed" )
.done(function() {
alert( "success" );
})
.fail(function(jqXHR, textStatus, errorThrown) {
alert( errorThrown );
})
.always(function() {
alert( "complete" );
});
to index.js it fails and alerts Error: SecurityError: DOM Exception 18 in iOS and SecurityError: Failed to execute 'open on 'XMLHttpRequest': Refused to connect to 'http://foo.bar.com/getfeed' because it violates the document's Content Security Policy., so it look like CORS is being blocked.
Currently the whitelist plugin doesn't install properly when you install it as per this SO post and this JIRA issue, basically it requires the iOS platform >=4.0.0-dev. I can still force it to install an older version with:
cordova plugin add cordova-plugin-whitelist#1.0.0
as per the suggestions in the SO post and JIRA issue.
However I am still unable to make any http requests to external domains. I still get the same 'DOM Exception 18' error. My config.xml file is currently
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.company.pearstest" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>CORS test</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" version="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
The tag for allowing different origins seems to have changed over different versions lately and as a result I've tried every conceivable combination of various different tags in this file.
I've also checked $.support.cors to make sure that jQuery allows CORS and it does (jQuery is working properly as the AJAX requests are running the fail callback rather than silently failing).
I also have the meta tag
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:">
in index.html. I suspect this isn't an issue with my emulator blocking http requests as it's a problem in both Android and iOS emulators and on an Android device.
Does anyone have any idea why I'm still having CORS issues? Thanks.
Have you tried configuring your Content-Security-Policy to look like:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
Note the * in default-src and use of ; - I've also included some other instructions in the example above to allow common JS libraries to work... this is what I use in JQuery / Handlebars Cordova 5 apps I am building for Android and iOS.
For iOS, if you're building for iOS9 and you want to be able to hit unsecured endpoints, you will have to edit your plist file. This gist has instructions.
I'm personally still having issues with Cordova 5.3.1 and Android cross-domain ajax requests. This stuff all worked fine on the older version of Cordova.
[EDIT] Android required the whitelist plugin in order for ajax requests to work. Janky IMO, but happy to have ajax working again on android.
What worked for me :
<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 *; connect-src *">