I am seeing ReferenceError:gapi is not defined error when accessing the Google+ APIs from my HTML code.
My code is very simple, but not sure what is wrong with it.
Any inputs would be highly appreciated.
Please see my code below:
<html>
<head>
<title> Some title here </title>
<script src="https://apis.google.com/js/platform.js"></script>
<script>
function handleClientLoad(){
gapi.client.setApiKey('MY API KEY HERE')};
</script>
<script src="https://apis.google.com/js/client.js? onload=handleClientLoad"></script>
</head>
<body>
</body>
</html>
Error is
Execution failed: ReferenceError: "gapi" is not defined
I'm not sure if this is the answer, but I notice that there is a space between "client.js?" and "onload=". This might not be in your original code, but it does cause the client.js request to return different code.
I was able to fix the issue. I should have added more details to the question but didnt thought that the issue could be somewhere else. Sorry for the same.
When we create a Web App project in Google Drive, the javascript code which runs on the server and the code which runs on the client(a browser) should be specified in different files. These files are Code.gs and JavaScript.html respectively. "gapi" is a client code (defined in client.js) and I was referencing to it in the server file. Since server code is running in the Google servers, it has no clue about our client.js and platform.js libraries. Hence the error. When I moved the error causing code to JavaScript.html, it worked fine.
Thanks.,
Related
I am making a simple login page with JavaScript and Firebase except I keep coming across this error
Untaught TypeError: Firebase.database is not a function
After searching the internet and trying everything, I still have no results. The problem persists on the signUp page when signing up for an account.
I have got to the point where the account will be made and can be seen, but in my real-time database in Firebase console nothing shows up where I am trying to write in the database that I want the inputted ‘firstName’ there.
I have attached the code below:
—Login
https://jsfiddle.net/jLf5q34o/
—SignUp
https://jsfiddle.net/dq8o1tLv/
—I also have the full project online at:
https://inputgeo.com/experiment/
I would appreciate any help from anyone. If I haven’t explained this very well please let me know and I will try to explain this again.
Checking the script requests, you haven't imported firebase-database
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-database.js"></script>
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 am using some JavaScript in my ASP.Net page like this:-
<script type="text/javascript" src="MyScript.js"></script>
<script type="text/javascript">
function validate_everything()
{
do_foo();
}
</script>
where MyScript.js exists in the same directory as the Default.aspx, and contains this (only):-
function do_foo()
{
var fred = 2;
return fred;
}
When I attempt to run this (using Internet Explorer) it produces the error:-
0x800a1391 - JavaScript runtime error: 'do_foo' is undefined
The real code (with actual useful work) handled in the same way was working fine yesterday, and fine earlier this morning. I modified it and this error started appearing; I reverted the changes and the error still appears. Before, using Chrome, the real version worked. Now, nothing happens (I assume the reason is the same).
I appreciate this question is a hardy perennial. My problem differs from those here and here in that I'm not using JScript, and this one in that I'm not adding the script from the code-behind.
I have used this approach in several other applications and the error does not occur there. Is that path going to pick up the file from the Default.aspx directory? Is there anything I need (in web.config or anywhere else) that I am lacking?
Edit on inspecting the page source (Chrome) the JavaScript in the .aspx file is listed as expected. The included file is shown thus:
<script type="text/javascript" src="MyScript.js"></script>
but no script is shown (ought there to be?)
I have a website which is using big JS data stores in an external JS file.
The problem is my website sometimes works and sometimes doesn't :/
Source code basically looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="data.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
// All HTML code is here //
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
//Another JS code to display data
}
</script>
</body>
</html>
Probably the data file "data.js" is too big and sometimes it is loading to slow and another code loads before this data.
I assume that cause sometimes after run the website everything works perfect, but sometimes I have errors in the console like "missing ] after element" or "variable1FromDataJS is not defined" but I'm sure in this code everything is correct!
How can I be sure that my external file data.js will be loading as the first? (In the JS code inside of I'm using document.addEventListener("DOMContentLoaded", function(event) { }
Or maybe you think the cause of a problem is something diffrent?
"missing ] after element" and "variable1FromDataJS is not defined" are indications that you have script errors that are causing portions of your Javascript to abort execution and thus some variables and data is not defined like you expect.
You need to find and fix those script errors and only proceed when you have a completely clear console that is reporting no errors. All errors in your console should be fully understood and fixed.
Now that you have let us look at the actual site, when I look at the Network tab in the Chrome browser, I see that the download of the data.js file fails sometimes with this error in Chrome net::ERR_CONTENT_LENGTH_MISMATCH. It gets part or most of the way through the download, but does not complete successfully. Depending upon exactly where it fails, you get a different script error. I can see no reason why this would be a client-side error. I think this is something wrong in the way your server is serving up data.js. I don't know if it isn't correctly finished the request or if you have a concurrency issue in your server or if there's just a programming error in creating data.js, but I think you need to fix this on the server.
I see this in the Chrome log when it fails:
GET http://maps.890m.com/data.js net::ERR_CONTENT_LENGTH_MISMATCH
<script> elements that are in the original HTML of your page and are not marked with the defer or async attributes will execute in the order they are encountered in the web page. The second <script> tag will not execute before the first one has loaded and executed. If the first script throws an exception either upon parsing or upon execution, then it will be aborted and the next script in line will execute when ready. But, because the first script aborted, things that you expected that first script to do will not have been done.
But, the upshot of this sequential execution of script tags is that you don't have to worry about timing if data.js is large. It will still load and execute before any <script> tags that come after it are executed.
I'm creating an small module for activeCollab composed by some webpages. I'm using PHP and Javascript/jQuery/AJAX. When I enter into the main page of the module I'm creating everything is working fine, but if later I try to go to other modules my web application is crashing. Is not showing any information. The only way for reviving it is refreshing the navigator.
If I check the error console of my navigator, I see that when I'm exiting from my custom webpage it says
`Uncaught Error: History.js Adapter has already been loaded...`
The header of my HTML file has this information:
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
And this code is making my Javascript functions work properly.
What can be happening? I googled and I didn't found much information about this issue. Every help would be appreciated.
Finally I solved it, the problem was that my application is loading by default its own jQuery file and there was a conflict between this one and the ones I was trying to import. The solution was easy: I only had to delete the lines I wrote inside the "head" tag.
Thanks for your help!