Sentry is showing that certain Facebook users are receiving the error:
FBInstant is not defined
My HTML file includes scripts like so just after the opening <body> tag:
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/app.js"></script>
In app.js, FBInstant.initializeAsync is only called after the entire page has loaded:
window.onload = function() {
FBInstant.initializeAsync().then(function() {
//Load stuff, etc.
});
}
Is fbinstant.6.2.js not being loaded for some reason? This is working for the vast majority of people. It seems to be mostly Chrome users, with a smaller portion of Firefox users as well.
You should always check if it exists before using it, i had the same problem with the JS SDK of Facebook and found out that those people just installed a browser plugin like Ghostery to disable third party plugins.
Related
I am having some weird issues getting with javascript running on a friend's machine. I have a form wizard that perform certain checks and operations. I use external jquery and bootstrap libraries with a custom script also. The script works on all browsers I've test so far including old IE , however a friend reports the following errors when accessing the form url.
The strange thing to me is every error is on line 1 and haven't touched any of the libraries.
External Library linking
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/retina-1.1.0.min.js"></script>
<script src="assets/js/scripts.js"></script>
custom script.js overview
jQuery(document).ready(function() {
...
// javascript code
...
});
Anything I should try or do?
I'm trying to embed "Authentication via Google" to a simple web app I am working on. I used following code to do this.
<html>
<head>
<title> Home </title>
<script src = "https://apis.google.com/js/platform.js?onload=onLoadCallback" ></script>
<script>
function changePage() {
if (!gapi.auth2.getAuthInstance().isSignedIn.get()) {
window.location.href = "login.jsp";
}
}
</script>
<script>
gapi.load('auth2', function () {
gapi.auth2.init().then(changePage);
});
</script>
<script>
</script>
<script>
var user;
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
user = auth2.signOut().then(changePage);
}
;
</script>
<meta name="google-signin-client_id" content="xxxxxxxxxxxx">
</head>
<body style="background-color:azure;">
<div class="vertcal-center">
<div class="myclass">
<h1>Welcome to home page
</h1>
<button type="button" class="button" onclick="signOut()">Log Out</button>
</div>
</div>
</body>
</html>
However, when I ran ZAP analysis on my code, it gives me a Low Risk alert saying "The page includes one or more script files from a third-party domain" . It points to following line as the line with the issue.
<script src = "https://apis.google.com/js/platform.js?onload=onLoadCallback" ></script>
I refer OWASP tutorial which describes about this issue, and I understand that this can introduce the 3 risks they have mentioned which are
The loss of control over changes to the client application.
The execution of arbitrary code on client systems.
The disclosure or leakage of sensitive information to 3rd parties.
However, I also understand that if I am going to use Google authentication, I'll have to trust Google and assume that they won't do anything bad here.
Is there any better way to do this in my code so that ZAP will not warn me?
Is it okay to ignore this alert?
What ZAP looks at is the hostname of your web page and the hostname of the embedded javascripts.
Since your website hostname will not be google.com anyway, ZAP will always complain.
Only thing is we are trusting the external JS.
But you can download the external JS file and host it within your web app.
That way you are calling your own JS file and then ZAP will ignore it.
However, if google modifies the JS file after that, your local JS file won't get the new modifications. So my opinion is you can justify this and ignore the issue in ZAP report.
When you are using external javascripts, make sure to check if they have any reported known vulnerabilities. You can refer [1] to know more information for a similar topic.
[1] https://medium.com/#PrakhashS/using-retire-js-with-zap-to-identify-vulnerabilities-in-javascript-libraries-7baad56690aa#.cotei58mk
The way this rule works is described in the help that comes with ZAP, which is also available online: https://github.com/zaproxy/zap-core-help/wiki/HelpAddonsPscanrulesPscanrules#cross-domain-script-inclusion :
Cross Domain Script Inclusion
Validates whether or not scripts are included from domains other than the domain hosting the content. By looking at the "src" attributes of "script" tags in the response. Allowed Cross-Domain scripts:
Any script with a non-empty "integrity" attribute is ignored - the
integrity value is not checked as this will be checked by the browser
At MEDIUM and HIGH thresholds if a script URL falls within a context that also includes the URL of the base message no alerts will
be raised.
So you can either specify an 'integrity' attribute or create a context and include in it all of the domains you trust.
I've been working with PhoneGap for a while now, and since I really had to rush into it, with no real web development experience, I might be doing a couple of things incorrectly in terms of debugging and building.
First of all, I am using the PhoneGap CLI to create my projects.
I build my mobile apps using the PhoneGap Build service, where I upload a zipped version of my www folder.
To debug my apps, I use the phonegap serve command in the CLI, and then I basically just access the URL and use Chrome's Developer Tools to check my JS and HTML. I sometimes use a Chrome extension, called Ripple which usually does the job, but it seems a little buggy (other options?)
Recently, I added the PushBots plugin into one of my applications and I get reference errors in the console while debugging. How can I prevent these types of errors?
Another problem that I usually have is that I get a reference error for cordova.js or cordova_plugins.js. I understood, that the cordova javascript files are dinamically added to the project when building, but it's still annoying in the console. Any way to get around it?
I also added the Onsen UI framework on top of my PhoneGap app, and it gets a little hectic, regarding which instantiating functions to use, to handle the Android back button, for example. (I currently use the index.js from my scripts folder for that, that I've just created manually. PhoneGap didn't create it for me)
My usual folder structure looks like this:
www
> css - contains CSS for the onsen framework
> img - contains some images that are referenced in my code
> js - contains jquery, moment and other libraries that I use in my app
> lib -
> angular - contains angular.js
> onsen - contains the onsen framework
> bootstrap
> res - contains icons and splash screens
> scripts - recently added it myself, with an index.js file
> config.xml
> index.html
> main.html
> appController.js
> loginController.js
> .....
The errors with the plugins start to happen here.
This is my index.js in the scripts folder which i reference in my index.html just after referencing cordova.js that I have copied to the root (www) folder, so I don't get reference errors all the time (I don't get it anymore for cordova.js, now I get it for cordova_plugins.js, so I guess this method is not good)
(function () {
"use strict";
myApp.run(['$rootScope', function($rootScope) {
document.addEventListener('deviceready', function() {
// Handle the Cordova pause and resume events
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener( 'resume', onResume.bind( this ), false );
// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
document.addEventListener("backbutton", onBackKeyDown, false);
window.plugins.PushbotsPlugin.initialize("--------", {"android":{"sender_id":"-------"}});
// First time registration
// This will be called on token registration/refresh with Android and with every runtime with iOS
window.plugins.PushbotsPlugin.on("registered", function(token){
console.log("Registration Id:" + token);
});
window.plugins.PushbotsPlugin.getRegistrationId(function(token){
alert("Registration Id:" + token);
console.log("Registration Id:" + token);
});
// Should be called once app receive the notification
window.plugins.PushbotsPlugin.on("notification:received", function(data){
$rootScope.$emit('onNotificationWhileOpen', data);
console.log("received:" + JSON.stringify(data));
});
// Should be called once the notification is clicked
window.plugins.PushbotsPlugin.on("notification:clicked", function(data){
//alert("clicked:" + JSON.stringify(data));
$rootScope.$emit('onNotificationClick', data);
console.log("clicked:" + JSON.stringify(data));
});
window.plugins.PushbotsPlugin.resetBadge();
}, false);
}]);
...All the necessary functions for the callbacks go here...
} ) ();
The plugins are added by the PhoneGap Build framework, so I just have to specify them in the config.xml file. I guess this is why I have problems with it while debugging on the PC, but is there a way to get around this?
Did I make a total mess out of my project by adding the cordova.js reference manually? Is it needed actually, when I have the Onsen framework?
LE :
Just want to make sure that I give as much info as possible. This is how I load my Javascript files into my html files:
<script src="js/onsenui.js"></script>
<script src="js/angular/angular.js"></script>
<script src="js/angular-onsenui.js"></script>
<script src="js/jquery-3.1.0.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!--CONTROLLERS-->
<script src="app.js"></script>
<script src="appController.js"></script>
<script src="helpers.js"></script>
<script src="cordova.js"></script>
<script src="scripts/index.js"></script>
One thing I would recommend is move the reference to cordova.js further up before your code could potentially make a call to a Cordova API. Like so:
<!--CONTROLLERS-->
<script src="cordova.js"></script>
<script src="js/onsenui.js"></script>
<script src="js/angular/angular.js"></script>
<script src="js/angular-onsenui.js"></script>
<script src="js/jquery-3.1.0.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!--CONTROLLERS-->
<script src="app.js"></script>
<script src="appController.js"></script>
<script src="helpers.js"></script>
i have a web project which works find in web. I want to transfer it into phonegap windows phone project .
Everything works fine but in a search option whenever i click in the search option it shows nothing showing a message "We are having trouble to display this message". N:B: this search option works properly in the web.
here is my search code:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script>
var c=getCatalogue();
var bestNew=getBestNew();
$("#recherche").click(function(){
var v=$("#search").val();
window.localStorage.setItem("search",v);
if(v!="") routePage("recherche.html?search="+v);
});
</script>
I think problem is when i pass the value to another page that is "search="+v".
When i use if(v!="") routePage("recherche.html); instead of if(v!="") routePage("recherche.html?search="+v); then it works.
Try downloading and using JavaScript imports locally instead of fetching a remote version if not strictly necessary.
See:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Also phonegap.js should be included:
<script type="text/javascript" src="phonegap.js"></script>
You will need to move the JQuery source to a local file and update your script tag, like you have with materialize.min.js. Loading library JS from the network is not a good idea as it slows your app's startup down and also will cause it to fail when started in a situation where there is no network access.
Additionally Cordova/PhoneGap's Content Security Policy may be blocking remote script loads for security reasons - you don't state which PhoneGap/Cordova version you are using, but this may be a problem for you in Cordova 5. There's a tutorial on dealing with that here. You can configure around this by adjusting the Content Security Policy meta tag to allow script-src from other than "self" but I wouldn't recommend this.
When running in Cordova/PhoneGap you should also wait for the "deviceready" event before trying to do anything, to make sure that the framework is fully initialized and that you have access to call plugins.
Also instead of loading new pages you should architect your app so that it is a single page app and generates page fragments from templates as needed. Try looking at something like Handlebars for this unless you have another preferred solution. I have a complete demo app that uses this approach that you can look at the source for here.
I am using Google Maps API to display a map on a certain page.
Problem is that the file http://maps.google.com/maps?file=api..... sometimes happens to load very slow - decreasing the page's performance, because the rest of the JavaScript is first loaded on document ready, which its rarely reaches - because the browser locks up waiting for the file from Google.
I have tried to move the JavaScript file from the <head> tag to under my content. But the rest of the JavaScript is never fired because the browser waits for the file from Google.
Is there a way around this, or have anyone else experienced same problem? It began recently, and I have no idea why.
This is my code, if anyone is interested:
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAa24xicak8_ghHX58i7La7hRFh9iM79SNC94rOejOtdMRvQmJiBS6Uv5F_1BNSh9ZuSzFXyekHISgew"> </script>
<script type="text/javascript" src="/js/maps.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Google Maps
initialize();
// Other JavaScript comes here....
});
</script>
If I access
http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAa24xicak8_ghHX58i7La7hRFh9iM79SNC94rOejOtdMRvQmJiBS6Uv5F_1BNSh9ZuSzFXyekHISgew
The file loads instantly.
This is a rather old question now - the solution was to disable firebug (atleast for me).
Use Google's Ajax APIs. From some time past, all of Google's services can be accessed through the JavaScript API. It's a modular system, you only have to include the JSAPI library, and then you can dynamically load the modules you need—it won't block your site.
<script type="text/javascript"
src="http://www.google.com/jsapi?key=ABCDEFG"></script>
<script type="text/javascript">
google.load("maps", "2");
google.setOnLoadCallback(function() {
// Your logic goes here.
// It will be run right after the maps module was loaded.
});
</script>
For further details, see JSAPI's developer documentation.
On JavaScript optimization: always put your JS at the bottom of your even your Maps API script. I can't really think of any good reason to have any JS in the head.