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>
Related
Please could I ask for help with the following:
I have cloned the Electron starter app like so:
git clone https://github.com/electron/electron-quick-start
And have it running.
I have added one line:
<button id="doitButton" onclick="alert('t')">DoIt</button>
Here it is in the context of the main.js file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<link href="./styles.css" rel="stylesheet">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<button id="doitButton" onclick="alert('t')">DoIt</button>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
I am working in VSCode. I am sure to save the file and then I run "npm start".
I see the button, but no alert when I click it. What have I done wrong?
Thanks for any help.
I have found a solution.
If I comment out the line:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
Then I see the alert appearing.
I am trying to load in the necessary libraries from firebase into an electron project, currently the header looks like this:
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://cdnjs.cloudflare.com ">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
<link rel='stylesheet' type='text/css' href="./css/index-style.css">
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-analytics.js"></script>
<!--Analytics-->
<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-auth.js"></script>
<!--Authentication-->
<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-firestore.js"></script>
<!--Firestore-->
<!--<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-performance.js"></script>
<!--Performance Monitoring-->-->
<!--<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-messaging.js"></script>
<!--Cloud Messaging-->-->
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyASwpwU4gScouDb52SgtITzJGlhVlUaAeM",
authDomain: "bindr-b1182.firebaseapp.com",
projectId: "bindr-b1182",
storageBucket: "bindr-b1182.appspot.com",
messagingSenderId: "834172641970",
appId: "1:834172641970:web:9ff63deccdc2ac41b7dfab",
measurementId: "G-26JDS2433R"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="../../src/model/database/dbManager.js"></script>
</head>
However, when I try and run and test if they're working, I get the following error messages:
I'm quite new to Electron, JavaScript, and Firebase, so I'm not sure where I'm going wrong here. Thank you in advance for your help.
You have two content-security-policy meta tags. Initially you should remove one of them unless you have some specific reason for having a duplicate content-security-policy, as any content must pass all CSPs. Then you need to add www.gstatic.com into the script-src directive.
Also watch out for content-security-policy inserted as a response header as some frameworks may insert CSP as a header. You may also want to move your meta tag to response headers as meta tags don't support all directives of CSP.
When I upload an image into my web application, it is showing the below error
Refused to load the image ' <URL> because it violates the following Content Security Policy directive: "default-src * data: 'unsafe-eval' 'unsafe-inline'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
I try to solve this error by using the following code
<meta http-equiv="Content-Security-Policy" content="default-src *; img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
But it is not working. How can I fix this problem?
I am not sure why you are using an "*". I am using a similar kind of stuff, but my meta tag looks something like this and it works fine for me:
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'">
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!
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