On this page there is an example of how to include the Google Drive Picker in a plain JavaScript web page. I've copied and pasted the sample code into a file on my machine, and followed the instructions for replacing the example strings with my own API key, Client ID, and App ID.
If I serve the page from localhost using python -m SimpleHTTPServer 8000, and visit the page, it fails in two ways. First, the Drive dialog that pops up says "There was an error! The API developer key is invalid." Second, on the console, I see the errors below. Searching the web tells me that this is probably because I'm using a non-HTTPS connection, from which the Google API tries to make an HTTPS connection to Drive. (Contrary to what they errors seem to say.)
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:8000').
(anonymous) # cb=gapi.loaded_0:46
Uncaught ReferenceError: init is not defined
at onload (https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalho…22%7D))&rpctoken=6pstmf1ss7m2&rpcService=v8gvn97850jj&thirdParty=true:3:54)
If I serve the page from localhost using this handy python script for an SSL web server, and visit the page, it fails in a different way. The Drive dialog that pops up says the following.
400. That’s an error.
Error: origin_mismatch
Request Details
proxy=oauth2relay379676703
immediate=false
scope=https://www.googleapis.com/auth/drive
origin=https://localhost:8000
response_type=token
redirect_uri=postmessage
state=912029351|0.3907265328
client_id=[REDACTED]
include_granted_scopes=true
jsh=m;/_/scs/apps-static/_/js/k=oz.gapi.en.eBn7I_cE2GI.O/m=__features__/am=AQ/rt=j/d=1/rs=AGLTcCNXKKlDNVVUdz0bvaxNh7fYe-hpSQ
gsiwebsdk=1
That’s all we know.
Although this seems to suggest that the Drive API doesn't want to hear from localhost, I have the credentials for the app (in my Google Developer Dashboard) set to accept requests from https://localhost:8000/* and http://localhost:8000/*.
What am I doing wrong?
You can't use localhost as the 'origin' address - that's a limitation of Google APIs. To deal with this issue, you might want to go for one of the options suggested in this question - either use a URL-shortener or configure your hosts file to have a custom URL resolved to 127.0.0.1.
Related
I'm trying to replicate a prior project written in pure JS into a React project. This project makes extensive use of the Google API JavaScript Client to access the Youtube Data API, and I'm encountering problems I did not encounter on the original project.
The error I encounter is odd and I shall explain. I have added the following to my api key/ oauth client credentials: http://localhost:8000. Actually, this is how it was on the original project - it is unchanged. What is odd now is this error I get:
"Not a valid origin for the client: http://Localhost:8000 has not been whitelisted for client ID {id}. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."
I double checked and it is in fact present, but I noticed that the first letter in "local" is uppercased, so I added that specifically. The whitlisted urls are now as follows:
http://localhost:8000
http://Localhost:8000
After adding that, I get the same error again, but missing a second L - http://LocaLhost:8000.
A few prior searches on stack overflow mentioned clearing browser cache and hard reloading but that has not solved this issue. Does anyone have any suggestions as to what the error may actually be?
EDIT: I've narrowed this down to have something to do with React. If I pull up my old project on my local host it works successfully on the default port for Live Server - 5500. Though if I try to run the React app on my localhost:5500 after closing live server, it fails. Any ideas?
I am calling a rest API from Https deployed Application
to Http Rest API.
I have written the logic in JavaScript by using Angular Js framework.
The web service call got failed with the below message.
The page at 'https://********someurl****' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
Requesting if any one can help me get out of this error.
Workaround:
1- Click the shield icon in the far right of the address bar.
Allow mixed content in Google Chrome
2- In the pop-up window, click "Load anyway" or "Load unsafe script".
If you want to set your Chrome browser to ALWAYS(in all webpages) allow mixed content:
1- Close Chrome. Chrome must be fully closed before the next steps.
2- Right-click the Google Chrome desktop icon (or Start Menu link). Select Properties.
3- At the end of the existing information in the Target field, add: " --allow-running-insecure-content" (There is a space before the first dash.)
4- Click OK.
5- Open Chrome and try to launch the content that was blocked earlier. It should work now.
This is just workaround and you need to solve by securing both app and rest api.
Use an https endpoint for your Rest API, otherwise you will end up with mixed content
HTTPS is important to protect both your site and your users from attack.
Mixed content degrades the security and user experience of your HTTPS site.
If you are unable to switch to https, another solution is to set up a server side end point which you access via https, which then makes the call to the http url and returns the result. In other words, making your own little HTTPS proxy to the http resource
In my case chrome was causing the issue, don't know why, other browsers work fine.
**Tip: I wasted two days trying to find out the cause, hope this will help someone.
I added SSL to a domain running Wordpress. When I access through https I get
Reference error: $ is not defined in resources/effects.js and the functions using this script break.
If I access through http then no error.
I did a Google search but could not find any reference to an issue like this. Any ideas?
I found the issue and solution. Turns out the particular jquery library i was calling was not available from the cdn over a https connection. It took a while to figure out because i was using the Firefox console to debug and it showed a successful connection, 200 OK. I eventually switched to Chrome js console and it showed this error: Failed to load resource: net::ERR_INSECURE_RESPONSE.
Also Google does not host the 1.2.7 library and the only cdn i could find that has it is cloudflare:
https://cdnjs.cloudflare.com/ajax/libs/jquery-tools/1.2.7/jquery.tools.min.js
I obviously can't use server side languages, this is just a page on my desktop.
I tried using AJAX with jquery, but I get the following error message
Sorry but there was an error: 0 [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js Line: 4"]
It has to do with the browser not loading scripts because it's hosted locally or something. So is there any way I can include files on a local machine without installing web server software?
This is an XSS error. You can't make http requests to third party sites (urls not on your domain). You would need to use a proxy to make requests to the page (or have the owner allow your site to make XSS requests).
Shameless plug of a library that I wrote the solve similar problem. We wanted to be able to splice HTML files for backend implementations without the overhead of a local HTTP server implementing server side includes. This library works on HTTP or local filesystem. But, as the repository README notes, you'll have to enable a --allow-file-access-from-files flag to your Chrome runtime. Other browsers work out of box.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
The above will take the contents of /path/to/include.html and replace the div with it.
So basically I have a basic page that is loaded via http.
Inside this application I want to include a remotely hosted JS file. Currently when I load the page I always have the active X warning about security. I pretty much tried every possible way to include th Javascript file (jquery.getScript, creating a node programmatically, escaping characters and all that stuff).
The JS file itself is on a domain that is on HTTPS but that the certificate is not valid (pointing somewhere else apparently). (It's our QA server). I do not have access on the server and therefore am not able to modify anything server side.
If I click on the warning and select "Display blocked content" the JS file is still not loaded.
The warning bar itself says :
To help protect your security, Internet Explorer has blocked this
website from displaying content with security certificate error. Click
here for options...
Options are :
Display blocked content
What's the risk ?
Information bar help
If I go to the javascript file itself I have this warning :
There is a problem with this website's security certificate.
The security certificate presented by this website was issued for
a different website's address.
Security certificate problems may indicate an attempt to fool you or
intercept any data you send to the server. We recommend that you
close this webpage and do not continue to this website. Click here
to close this webpage. Continue to this website (not recommended).
Is there a way to make a workaround ?
This message: "The security certificate presented by this website was issued for a different website's address" means that the URL/hostname that you're using to access the site isn't the URL/hostname for which the site has a certificate. If you run Fiddler (www.fiddler2.com) with HTTPS-decryption enabled, you'll get a popup alert that explains this mismatch more clearly (specifically, by showing you what Hostname the server is expecting you to be using). You can then correct your markup to refer to the site using the correct hostname, which will correct the certificate error and make the problem go away.