I am trying to get started with Phonegap and Phonegap Build to create a html/jquery based Android app. Currently my app consists of one single html page that allows you to enter two numbers, those numbers are sent out to my server, and the response is displayed on screen. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>PoC</title>
<script src="JS/jquery.min.js"></script>
<script src="JS/jquery-ui.min.js"></script>
<script language="javascript" src="JS/date.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css">
<script>
function doCalc() {
$.ajax({
url: "http://nightscapecreations.com/test.cfc?method=multNums&thisNum=" + $('#thisNum').val() + "&multBy=" + $('#multBy').val()
}).done(function( data ) {
data = data.trim();
if ($.isNumeric(data)) {
$('#resultDiv').html(data);
} else {
$('#resultDiv').html(data);
}
})
}
</script>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
This is a test. Here, multiply some numbers:
<input id="thisNum" placeholder="5" onChange="doCalc();"> x
<input id="multBy" placeholder="3" onChange="doCalc();">
=
<div id="resultDiv">
</div>
<input type="button" value="Calculate" onClick="doCalc();" style="width:150px;">
</body>
</html>
Just a very messy test to see how this whole thing works. This functions when opened on a browser, or when run through the Phonegap app. However, when I upload this to Phonegap Build, download the apk, copy it to the device, and install it there, the div fails to populate.
I looked at my app and was surprised to see it listed with no permissions. I suspect this is the cause of the failure; the app cannot access the internet and so cannot get a response back from its ajax call. This would also explain why PB's Weinre debugging shows no targets. However, no matter what I do I cannot figure out how to get PB to assign permissions.
This is my current config:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.nightscapecreations.test"
version="1.0.0"
xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0">
<name>Test</name>
<description>
A PoC app
</description>
<author email="xxxxxxxxxxxx#hotmail.com" href="http://phonegap.com">
My Name
</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>
<preference name="orientation" value="portrait"/>
<preference name="fullscreen" value="false"/>
<preference name="permissions" value="none"/>
<feature name="http://api.phonegap.com/1.0/network"/>
<plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />
</widget>
There's a lot in there because I've been going through countless iterations of trial and error with stuff pulled from all over SO and various blogs. I have tried with and without the preference tags, the feature tag, the plugin tag, and much more, but no permissions are ever requested by the app.
I also tried adding a security policy as suggested in another post, but without success:
<meta http-equiv="Content-Security-Policy"
content="default-src *;
style-src 'self' 'unsafe-inline' 'unsafe-eval';
script-src 'self' 'unsafe-inline' 'unsafe-eval';">
How do I insure that my app has sufficient privileges to get data from my server?
Related
I have an app written in Keno UI (Telerik). I'm using build.phonegap.com to build runtime for my app, using cordova and Kendo. I'm stuck on getting the speechrecognition plugin to initialize. I'm sure it's something stupid but I'm not sure what it is.
Below is a copy of my config.xml file:
<?xml version='1.0' encoding='utf-8'?>
<widget id="ca.xyz.mmb" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>mmb</name>
<description>
Integrated Mobile Billing for XYZ Customers
</description>
<author email="support#xyz.ca" href="http://xyz.ca">
Go Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-compat" spec="^1.2.0" />
<plugin name="cordova-plugin-file" spec="^4.3.3" />
<plugin name="cordova-plugin-speechrecognition" spec="1.2.0" />
<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>
<engine name="ios" spec="^4.3.1" />
</widget>
Below is a copy of the relevant portion of the build:
Build Date: 2018-10-16 05:38:36 +0000
--------------------------------------------------------------------------------
PLUGIN OUTPUT
--------------------------------------------------------------------------------
Fetching plugin "cordova-plugin-compat#^1.2.0" via npm
Installing "cordova-plugin-compat" at "1.2.0" for android
Fetching plugin "cordova-plugin-file#^4.3.3" via npm
Installing "cordova-plugin-file" at "4.3.3" for android
Plugin dependency "cordova-plugin-compat#1.2.0" already fetched, using that version.
Dependent plugin "cordova-plugin-compat" already installed on android.
The Android Persistent storage location now defaults to "Internal".
Please check this plugin's README to see if your application needs any changes in its config.xml.
If this is a new application no changes are required.
If this is an update to an existing application that did not specify an "AndroidPersistentFileLocation" you may need to add:
"<preference name="AndroidPersistentFileLocation" value="Compatibility" />"
to config.xml in order for the application to find previously stored files.
Fetching plugin "cordova-plugin-speechrecognition#1.2.0" via npm
Installing "cordova-plugin-speechrecognition" at "1.1.2" for android
--------------------------------------------------------------------------------
PROJECT PROPERTIES
Below is the initalization code for the program.
(function () {
var bootstrap = function () {
$(function () {
alert("running bootstrap");
app.mobileApp = new kendo.mobile.Application(document.body, {
transition: 'slide',
skin: 'flat',
initial: 'components/home/view.html',
statusBarStyle: 'black-translucent',
layout: 'main'
});
alert("speech init "); //this is the last alert that pops up
window.plugins.speechRecognition.isRecognitionAvailable(
function(result) {
useSpeech = result ; alert("speech");
},
function(err) {
useSpeech = false; alert(err);
}
);
alert("done speech init");
});
};
bootstrap();
The place where I try to run isRecognitionAvailable is where it fails. I'm not sure why. I've tried putting in an alert for window.plugins just to see what it says but that always comes back undefined. A search on google implies that that is normal, so that doesn't help me much.
I'm having trouble getting my images to work in my phonegap build.
I've read that the absolute paths might not work so i've tried both absolute and relative paths, still no luck.
I'm including the images like this:
<Col key={1} xs={3}>
<Image src='/tire_selected.png' responsive />
</Col>
or relative
<Col key={1} xs={3}>
<Image src='tire_selected.png' responsive />
</Col>
equals
<img class="img-responsive" src="tire_deselected.png" data-reactid=".0.0.1.0.0.0.0.1.1.0.0.$4.0">
Col & Image is bootstrap helper components using bootstrap-react. And this all works fine in the web view, but not when built with phonegap. It should though, the source is already compiled and without errors in both cases.
Following is my config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.app.exampleapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>App</name>
<description>
App
</description>
<author email="support#example.com" href="http://www.example.com">
Author
</author>
<content src="index.html" />
<preference name="permissions" value="none" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-installLocation" value="auto" />
<gap:plugin name="org.apache.cordova.geolocation" />
<icon src="icon.png" />
<access origin="*" />
<plugin name="cordova-plugin-whitelist" version="1" />
<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>
Git repository:
app.js
vendor.js
config.xml
favicon.ico
humans.txt
index.html
robots.txt
tire_deselected.png
tire_selected.png
Icon.png works fine though. I have no idea whats causing the other images to not work. Any help would be appreciated!
Edit
I've tried setting content-security-policy, if that was the issue that i weren't able to set img-src and display images via javascript.
<meta http-equiv="Content-Security-Policy" content="
default-src http://10.3.10.104/ 'self' * 'unsafe-inline';
style-src http://10.3.10.104/ 'self' * 'unsafe-inline';
img-src http://10.3.10.104/ 'self' * 'unsafe-inline';
script-src http://10.3.10.104/ 'self' * 'unsafe-inline';">
But still no luck
file:///tire_deselected.png net::ERR_FILE_NOT_FOUND
There file is there, because when inserting an img-element into index.html it's displayed.
I even tried accessing it by the path that's displayed in the source folder running developer tools.
file:///data/user/0/com.oas.exampleapp/files/downloads/app_dir/tire_deselected.png
Doesn't work either, i'm starting to think that phonegap is broken, atleast works very poorly in combination with react.
After compilation the build.phonegap.com put your source files into "www" directory.
You can access your local image file using the following path "/android_asset/www/"
<image src='/android_asset/www/tire_selected.png' responsive />
If your image is placed in a subdirectory inside the root direcctory then you can use the following:
<image src='/android_asset/www/sub-direcctory/tire_selected.png' responsive />
Note: replace the "sub-direcctory" with your own if there is any in which the local image file is contained.
I added an img tag to index.html and set the src attribute to "images/logo.png" and it loads without issue.
...
<body>
<div id="root"></div>
<img id="footer-logo" src="images/logo.png" style="background-color: black; width: 200px;" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/vendor.bundle.js"></script>
<script src="js/app.bundle.js?v=2"></script>
</body>
</html>
I have a react component with an img tag and the same src value "images/logo.png"
...
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0px; padding-top: 0px; letter-spacing: 0px; font-size: 24px; font-weight: 400; color: rgb(48, 48, 48); height: 64px; line-height: 64px; flex: 1 1 0px; text-align: center;">
<img id="header-logo" src="images/logo.png" style="width: 105px; margin-top: 16px;">
</div>
...
The img in the react component doesn't load; 404. Yet this equates to true
document.getElementById('footer-logo').src === document.getElementById('header-logo').src
How is it that one of the images loads and the other doesn't? Does it have something to do with the react component being loaded into the DOM dynamically or react's virtual DOM?
The src attributes equate to file:///images/logo.png. IF I set the src attribute on the #header-logo like this, it loads:
document.getElementById('header-logo').src = cordova.file.applicationDirectory + "www/images/logo.png"
Hope this provides more info to this very bizarre behaviour.
Hope this helps. So I also had the problem.
What I did was, was to create a another folder /images/ (duplicate) and still use my images I imported via react via my /static/components/images folder. You can take it a bit further by adding conditionals for staging or live.
So the answer is here.:
import Logo from '../images/logo.png';
<img src={`./${Logo}`} alt="Logo" />
Full example.:
import React, { Component } from 'react';
import Logo from '../images/logo.png';
class Header extends Component {
render() {
return(
<div className="logo mt-3">
<img src={`./${Logo}`} alt="Logo" />
</div>
);
}
}
export default Header;
Got the idea from this post.: Images not showing in PhoneGap Build application
I am trying to implement push notification using PhoneGap Build.
I am receiving a Device Token on my iOS Device but not receiving a Notification in the tray. Here my success call back is getting called but then the callback function is not getting called.
I have included the latest version of push plugin in config.xml.
Few Points about App:
This is my first app
I am implementing it using Phonegap Build
iOS device : Iphone 6s : iOS 9
Android Device: Samsung: Android 4.1.2
I am receiving the tray notification using below code in Android (though Android is delayed) but not in my iOS device.
Do Let me know if you need more information.
Here is the javascript code snippet.
onDeviceReady: function() {
//alert('Inside onDeviceReady');
var pushNotification = window.plugins.pushNotification;
//var device = window.plugins.
//alert ('Value of Variable Pushnotification : ' + pushNotification);
//alert ('Device Platform : ' + device.platform);
if (device.platform === 'android' || device.platform === 'Android')
{
//alert('Inside Register Call for Android');
pushNotification.register(app.successHandler, app.errorHandler,{"senderID":"935585158292","ecb":"app.onNotificationGCM"});
}
else
{
//alert('Inside Register Call for iOS');
pushNotification.register(app.pg_token_handler, app.pg_error_handler, {"badge": "true","sound":"true","alert":"true","ecb":"app.on_pg_apn_notification"});
}
},
on_pg_apn_notification: function(event)
{
if ( event.alert )
{
alert('Inside Alert call of APN Notification');
navigator.notification.alert(event.alert);
}
if ( event.sound )
{
alert('Inside sound call of APN Notification');
var snd = new Media(event.sound);
snd.play();
}
if ( event.badge )
{
alert('Inside Badge call of APN Notification');
pushNotification.setApplicationIconBadgeNumber(app.successHandler, app.errorHandler, event.badge);
}
}
}
Pasting Config.xml relevant code.
<?xml version="1.0" encoding="UTF-8"?>
<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.helloworld"
version = "1.0.0">
<name>CalendarSync</name>
<description>
This is my first application using PhoneGap
</description>
<author href="http://phonegap.com" email="support#phonegap.com">
Aditya Lele
</author>
<platform name="ios|winphone|wp8|android" />
<!--
If you do not want any permissions to be added to your app, add the
following tag to your config.xml; you will still have the INTERNET
permission on your app, which PhoneGap requires.
-->
<preference name="permissions" value="none"/>
<!-- Customize your app and platform with the preference element. -->
<preference name="orientation" value="default" /> <!-- all: default means both landscape and portrait are enabled -->
<preference name="target-device" value="universal" /> <!-- all: possible values handset, tablet, or universal -->
<preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen -->
<preference name="webviewbounce" value="true" /> <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->
<preference name="prerendered-icon" value="true" /> <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
<preference name="stay-in-webview" value="false" /> <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in -->
<preference name="ios-statusbarstyle" value="black-opaque" /> <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
<preference name="detect-data-types" value="true" /> <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
<preference name="exit-on-suspend" value="false" /> <!-- ios: if set to true, app will terminate when home button is pressed -->
<preference name="show-splash-screen-spinner" value="true" /> <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading -->
<preference name="auto-hide-splash-screen" value="true" /> <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
<preference name="disable-cursor" value="false" /> <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
<preference name="android-installLocation" value="auto" /> <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->
<preference name="android-build-tool" value="gradle" />
<!--
Define a specific version of PhoneGap to build into your app.
-->
<preference name="phonegap-version"/>
<!-- Plugins -->
<!-- Core plugins -->
<gap:plugin name="com.phonegap.plugins.pushplugin" version="2.5.0"/>
<gap:plugin name="org.apache.cordova.device" spec="0.3.0" source="pgb" />
<!-- Third party plugins -->
<!-- A list of available plugins are available at https://build.phonegap.com/plugins -->
<!--
<gap:plugin name="com.phonegap.plugins.barcodescanner" />
-->
<!-- Define app icon for each platform. -->
<icon src="icon.png" />
<icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi" />
<icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:qualifier="mdpi" />
<icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:qualifier="hdpi" />
<icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi" />
<icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" />
<icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>
<icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57" />
<icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114" />
<icon src="res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144" />
<icon src="res/icon/webos/icon-64.png" gap:platform="webos" />
<icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone" />
<icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background" />
<!-- Define app splash screen for each platform. -->
<gap:splash src="res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:qualifier="port-ldpi" />
<gap:splash src="res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:qualifier="port-mdpi" />
<gap:splash src="res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:qualifier="port-hdpi" />
<gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:qualifier="port-xhdpi" />
<gap:splash src="res/screen/blackberry/screen-225.png" gap:platform="blackberry" />
<gap:splash src="res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136" />
<gap:splash src="res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768" />
<gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />
<gap:config-file platform="ios" parent="CFBundleShortVersionString">
<string>100</string>
</gap:config-file>
<!--
Define access to external domains.
<access /> - a blank access tag denies access to all external resources.
<access origin="*" /> - a wildcard access tag allows access to all external resource.
Otherwise, you can specify specific domains:
<access origin="http://phonegap.com" /> - allow any secure requests to http://phonegap.com/
<access origin="http://phonegap.com" subdomains="true" /> - same as above, but including subdomains, such as http://build.phonegap.com/
<access origin="http://phonegap.com" browserOnly="true" /> - only allows http://phonegap.com to be opened by the child browser.
-->
<access origin="*"/>
<!-- Added the following intents to support the removal of whitelist code from base cordova to a plugin -->
<!-- Whitelist configuration. Refer to https://cordova.apache.org/docs/en/edge/guide_appdev_whitelist_index.md.html -->
<plugin name="cordova-plugin-whitelist" version="1" />
<!-- <plugin name="Device" value="org.apache.cordova.Device" spec="1.0.0" source="npm" />
<feature name="Device">
<param name="android-package" value="org.apache.cordova.device.Device" />
</feature>
<feature name="Device">
<param name="ios-package" value="CDVDevice" />
</feature> -->
<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>
IOS does not show a notification if the app is open, so I'm betting your code is correct.
From Apple Developer documents:
If your app is already in the foreground, iOS does not show the notification.
Source: Handling an Actionable Notification
I would recommend you write some custom notification like a popup to trigger when the app is open and a notification is received.
Using :
PGB cli-5.2.0
cordova-plugin-whitelist (i've tried both https://build.phonegap.com/plugins/4178 and plugins/3401 )
Refering to ( https://github.com/lukesmith123/whitelist-2/blob/18a8ce4/README.md ) i added <allow-navigation href="*" /> , <allow-intent href="*" />, <access origin="*" />
My app is using an ajax request to get data from http that has "Access-Control-Allow-Origin", "*".
But still get: Error Failed to load resource: the server responded with a status of 404, yet on localhost it works just fine.
What could i be missing?
Finally got it working.
I put this CSR metta tag in the html <head>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline'; media-src *">
And put this cordova-plugin-whitelist in the config.xml
<gap:plugin name="cordova-plugin-whitelist" source="npm" />
<allow-navigation href="http://*/*" />
<allow-intent href="https://*/*" />
Phew!!!
I've been trying to make a ajax request
$.ajax({
type: "GET",
dataType: "json",
url: "http://testing.com/ws/check?" + outputData,
success: onSuccess,
error: onError
});
But it fails with a 404 error, after a long search I found that I was missing the whitelist plugin but from what I've search Whitelist is only for Android 4+ and IOS 4+, will windows work? and blackberry?
is there a way to do this without adding whitelist?
If white list is really required why does it give me this error?
Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self' https:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
My html:
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
<!-- Setting environment up -->
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name='viewport' content='width=device-width, maximum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi'>
<!-- -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
<!-- Enable all requests, inline styles, and eval() -->
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<!-- Allow XHRs via https only -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:">
<!-- Allow iframe to https://cordova.apache.org/ -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://cordova.apache.org">
<!-- JS dependencies (order matters!) -->
<script src="scripts/platformOverrides.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/jquery/jquery-1.11.3.min.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<!-- -->
<!-- CSS dependencies -->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
<!-- -->
<!-- CSP support mode (required for Windows Universal apps) -->
<link rel="stylesheet" href="lib/angular/angular-csp.css" />
<!-- -->
<!-- --------------- App init --------------- -->
<script src="js/app.js"></script>
<script src="js/Pages/SplashScreen.js"></script>
<script src="js/utils.js"></script>
<link rel="stylesheet" href="css/app.css" />
<!-- -->
<!-- Application Title -->
<title>Testing</title>
<!-- -->
</head>
<body ng-controller="AppController">
<!-- Cordova reference -->
<script src="scripts/index.js"></script>
<!-- -->
<!-- Navigator! Everything runs inside it! -->
<ons-navigator var="navi">
</ons-navigator>
<!-- -->
<!-- Templates -->
<!-- Splashscreen -->
<ons-template id="splashScreen.html" style="background:none">
<ons-page id="splashScreen" ng-controller="SplashScreenController">
<div id="splashScreen2" class="background_image">
<img id="background-image" width="100%" height="100%">
</div>
</ons-page>
</ons-template>
<!-- -->
<div id="result"/>
</body>
</html>
Thank you,
Joao
First You should install Cordova whitelist plugin(I think you have already it).
And after that add the following to config.xml file which is found in platforms/<platform name>/res/xml directory.
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />