I am creating hybrid app for the first time and started following few tutorials. I get these errors on my browser console
Refused to load the script 'http://192.168.1.142:35729/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'".
XMLHttpRequest cannot load http://localhost:1337/auth/local. The request was redirected to 'http://localhost:1337/login', which is disallowed
for cross-origin requests that require preflight.
I am using sails in my server side and added following in the routes table
'get /' : {
cors: {
origin: '*'
},
controller: 'FlashController',
action: 'home'
},
'post /auth/local' : {
cors: {
origin: '*'
},
controller: 'AuthController',
action: 'callback'
},
'get /login' : {
cors: {
origin: '*'
},
controller: 'AuthController',
action: 'login'
},
While I am following devdactic.com/user-auth-angularjs-ionic/ tutorial and made following changes to the app to allow CORS
ionic plugin add cordova-plugin-whitelist
Following is my config.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.devdacticauth980013" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>devdactic-auth</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="hi#ionicframework" href="http://ionicframework.com/">
Ionic Framework Team
</author>
<allow-navigation href="*" />
<allow-intent href="*" />
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
</widget>
Following is my index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/constants.js"></script>
<script src="lib/angular-mocks/angular-mocks.js"></script>
</head>
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar class="bar-balanced">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
remove
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
add it back when compiling
Related
i crate an application with phonegap and it's contain iframe page
it's working perfectly with android and also in iOS Safari Browser
the responsive not working in application and show desktop version
i activate gap in Content-Security-Policy but also not working
this is my iframe.html page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline' *; script-src '*' 'unsafe-inline' 'unsafe-eval' *">
<title>Medica Mall</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/plugins.js"></script>
</head>
<body>
<div class="loader"></div>
<iframe id="iframe" src="http://www.medicamall.com"></iframe>
</body>
</html>
I have a simple phonegap app that only have iframe that load external url, but the iframe is not loading. it's blank
i have searched and tried every other possible solution lke whitelisting the url
my config.xml contains this:
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
and the loaded url contains this csp:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval';">
does anybody have an idea about this?
I am trying to build an Android phonegap/cordova application using AngularJS. I am trying to make a POST request but I keep getting a 404 Not Found (from cache).
My POST request
return $http({
method: 'POST',
url: myURL ,
data: {data: dataObj}
})
.then(function (res) {
return res.data;
});
I have the whitelist plugin installed in my config.xml
<plugin name="cordova-plugin-whitelist" spec="~1.2.1" />
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
And I have a Content-Security-Policy set in my index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
But I am still getting the 404 from cache error. Any ideas of what I am doing wrong?
Thanks
I am working on an simple Phonegap App with Cordova InAppBrowser. I am testing on my Android device.
In the config.xml I got the below code
....
<preference name="phonegap-version" value="cli-5.2.0" />
.....
<plugin name="cordova-plugin-whitelist" source="npm" />
<plugin name="org.apache.cordova.inappbrowser" source="pgb" />
.....
<access origin="*"/>
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
....
In Javascript I got the below code when a button is clicked
....
var ref = cordova.InAppBrowser.open('http://google.com', '_blank', 'location=yes','fullscreen=no');
....
index.html
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src * 'self' data:">
I use Phonegap Desktop App for testing purposes. In that when the button is touched a browser window got opened and I could see the google.
But when I build the same via http://build.phonegap.com and install on my device. Nothing opens after I touch the button. Something goes wrong here.
Looks strange for me. Any help is appreciated.
I posted the same question on Adobe Forums and got the solution for my problem.
https://forums.adobe.com/thread/2138992
After changing the below, it started working
<plugin name="org.apache.cordova.inappbrowser" source="pgb" />
to
<plugin name="cordova-plugin-inappbrowser" />
Something's wrong with the display of my app when I tried to build it in cordova. Here's the code:
<html>
<head>
<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 *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>Swaggity swag swag</title>
</head>
<body>
<form action="res/link2.html">
<input type="text" placeholder="Name" name="name">
<input type="text" placeholder="Text" name="comment">
<button type="submit">Leggo!</button>
</form>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
When I built it, text field displayed ended up displaying like this:
http://imgur.com/ReOa9vk
I hope you can help me out on this one, thanks!
I put your code in a fresh cordova application (CLI Version 5.1.1; Visual Studio 2015) and got some security errors in the output console, because you are referencing to http://code.jquery.com. Anyway your provided screenshot looks like, the styles loaded somehow, but giving strange results.
In my case I got the folowing errors in the JavaScript Console in Visual Studio:
Refused to load the stylesheet 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".
index.html (15,0)
Refused to load the script 'http://code.jquery.com/jquery-1.11.1.min.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
index.html (0,0)
Refused to load the script 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
index.html (0,0)
To avoid these errors, I changed the meta tag for Content-Security-Policy and added http://code.jquery.com:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com http://code.jquery.com; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *">
With these changes all looks fine in ripple:
The above solution won't work directly on the platforms iOS, Windows 8.1/10 and Android because of security policies.
There are two solutions I think:
I would recommend to download the scripts and style sheets and access them localy under the www folder.
Another way is to allow access to external resources. For that you need the whitelist plugin:
https://github.com/apache/cordova-plugin-whitelist
... and you have to edit the config.xml under Common->Domain Access->URI and add http://code.jquery.com
This will produce an XML entry in this file:
<!-- Allow images, xhrs, etc. to http://code.jquery.com -->
<access origin="http://code.jquery.com" />
After that all looks fine under Windows 10 for example:
Hope that helps!