I am creating a chat system within my mobile app, but I am running into a problem. I have defined jQuery and the signalR within my index. I also have defined the script path to my server.
Code (index.html)
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!-- Cordova whitelist plugin -->
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<!-- Base libs -->
<script src="libs/ionic/js/ionic.bundle.js"></script>
<script src="libs/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- Third party libs -->
<script src='libs/jquery/dist/jquery.min.js'></script>
<script src='libs/signalR/jquery.signalR.min.js'></script>
<!-- Location for SignalR lib to open a connection with -->
<script src="http://www.mytestserver.nl/chathub/signalr/hubs"></script>
<!-- Application Javascript files | put the routing files after the controllers! -->
<script src="app/app.js"></script>
</head>
I have a working version on my localhost, so I do think my code is right.
When I try to use the code in my controller I get a 404 not found error.
I think this is because I do not define a port in my script to the server. Then signalR defaults to the current host (localhost:8100).
Code (chatController.js)
.controller('ChatController', ['$scope', '$state', function ($scope, $state) {
$.connection.hub.url = "http://www.mytestserver.nl/chathub/signalr";
$.connection.hub.start().done(function () {
console.log("hello world");
});
}]);
Not the DNS comes in. I cannot define a port number, because the DNS is removing the port numbers. Defining any port number results in a 404 not found or a Connection timed out error.
What can I do to make a connection to the server?
Ive had this situation before which worked fine on devexpress localhost but when transferred to IIS the path would not map correctly.
Its possible that the path you specify to signalr/hubs is not correct so the server does not pick it up correctly.
Try adding a wildcard to your signalr/hubs reference like this
<script src="~/signalr/hubs"></script>
After this open the javascript console and ensure that there are no errors.
Related
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.
I use inspect to check and it shows as below:
lottie.js:3 Failed to load file:///Users/Downloads/ani/js/data.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I dont know how to read Json from a .json file from my local sever?
can anyone help me to solve it?
var animation = bodymovin.loadAnimation({
container: document.getElementById('Ani'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'js/data.json'
})
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bodymovin Demo</title>
<!-- Styles -->
<style>
#Ani{max-width: 800px; margin:0 auto;}
</style>
</head>
<body>
<div id="Ani"> </div>
<!-- Scripts -->
<script src="js/lottie.js"></script>
<script src="js/script.js"></script>
</body>
</html>
You are opening the file with the file protocol and you try an Ajax request. That wont work. You better open the file over a server. You can use apache or any webserver? By example if you are familiar with Node you can use http-server
or use lite-server.
npm install http-server -g
http-server 'path/to/your/project' -o
That should open the browser window at: localhost:8080 or other port if 8080 is not free
I created a cordova project, added the iOS platform and built the project. After that I opened the .xcodeproj in Xcode, built it and the homepage showed the sample app homescreen. I then created another js file with the following content in the Staging/js folder
function testLoad(){
alert("Loaded!");
}
In index.html, I added
<script type="text/javascript" src="js/myScript.js"></script>
and called the function
<body onload="testLoad()">
However no alert appears! How to fix? I am using xCode 7.2.1 and Cordova 5.4.1.
The issue is due to the Content Security Policy set in index.html. As told on https://issues.apache.org/jira/browse/CB-10598, the tag should be set to
<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
If your js is in Staging/js, then your script should be
<script type="text/javascript" src="Staging/js/myScript.js"></script>
Anyway, you can debug with safari to look for errors, check this.
https://developer.apple.com/safari/tools/
I have run your project and found error. After solving error, I can able get alert.
Please chage your below code
<script type="text/javascript" src="Staging/js/myScipt.js"></script>
with
<script type="text/javascript" src="js/myScript.js"></script>
And if still error/problem is there, let me know.
I wrote some html/js codes for db management in apache cordova/android.
Firstly i wanted to copy a sqlite db to my project.
i used a plugin for this. dbcopy.
I read docs.
And i wrote some codes. But it is not working. in some functions, i wrote some alerts. But they are not working.
I am using jquery mobile in apache cordova.
My codes;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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" type="text/css" href="css/jquery.mobile.structure-1.4.5.min.css">
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/sqlDB.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function dbcopy()
{
//Database filename to be copied is demo.db
alert('copy is starting');
//location = 0, will copy the db to default SQLite Database Directory
window.plugins.sqlDB.copy("ogrenci.sqlite", 0, copysuccess,copyerror);
}
function copysuccess()
{
//open db and run your queries
alert("copysuccess");
db = window.sqlitePlugin.openDatabase({name: "ogrenci.sqlite"});.
}
function copyerror(e)
{
//db already exists or problem in copying the db file. Check the Log.
console.log("Error Code = "+JSON.stringify(e));
//e.code = 516 => if db exists
}
dbcopy();
})
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Arif's App</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Copyright 2016</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Did you install the plugin? you can install to your project by running the following command on your cordova project directory:
cordova plugin add cordova-plugin-dbcopy
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!