Google-api-javascript-client: gapi fails to load when use locally (not on a webserver)

[wonderfly]

_From Matthew.Schott on August 10, 2012 08:49:13_

Load the code in the linked fiddle as a local webpage (ie file:///home/test.html).
Fiddle: http://jsfiddle.net/glitchtechscience/LsAwT/2/ What is the expected output? What do you see instead? I should see two alerts. I do see two on a web server, but when run locally (html5 app), it fails with the message "Unable to post message to file://. Recipient has origin null.". What version of the product are you using? On what operating system? Latest. Chromium 18 on Ubuntu 12.04.

_Original issue: http://code.google.com/p/google-api-javascript-client/issues/detail?id=46_

[wonderfly]

_From [email protected] on August 14, 2012 01:30:07_

Try running it using a local-server(XAMPP maybe) so the header will look similar to "http://localhost/yourpath/test.html

[wonderfly]

_From [email protected] on August 14, 2012 01:37:58_

Forgot to mention, also specify "http://localhost/ at the "JavaScript origins" in the api access

[wonderfly]

_From [email protected] on August 23, 2012 09:15:28_

Thank you for submitting the issue report. The JS Client does not currently support making requests from a file:// origin. I will file this issue as a feature request.

Status: Accepted
Owner: [email protected]
Labels: -Type-Defect Type-Enhancement Usability

[wonderfly]

_From [email protected] on June 26, 2013 23:23:30_

Still can't make requests from file:// origin, its been a year waiting for this enhancement!

[wonderfly]

_From [email protected] on August 27, 2013 03:02:58_

This is a hard block. It means you cannot run any HTML website localy in a device. I know the work-around is to create a local server, but it is like killing flies with a tank.

Do you guys have any date for this?

[wonderfly]

_From [email protected] on August 27, 2013 05:44:51_

This is horrible. Can't do webview from Android!

[wonderfly]

_From [email protected] on September 30, 2013 15:05:25_

For those who said that it can´t use it on a webview on Android, that´s not true, i´m using PhoneGap and it works just fine

[wonderfly]

_From [email protected] on July 08, 2014 11:09:52_

i want to use it in a hta and i am getting the same error
which is pretty wonky as htas have all sorts of elevated privileges
pretty poor coding from google devs to need postMessage between frames for an api instead of using, like, i don't know... http requests, like an api is supposed to...

[wonderfly]

_From [email protected] on July 10, 2014 13:40:13_

In your HTA are you able to directly access the API in question using CORS (either XDomainRequest and/or XMLHttpRequest)? See https://developers.google.com/api-client-library/javascript/features/cors if you would like more details on this process. If you try this please follow up to let us know whether it worked in your application.

The postMessage approach does work in some cases where CORS is not feasible (especially in pre-CORS browsers), but I understand that it might not work in your HTA. We are interested in using standard web technology where feasible, but I can't give any sort of prediction about when or whether gapi.client might switch to using CORS internally.

[wonderfly]

_From [email protected] on July 17, 2014 12:10:24_

7ing.ivan please can give me a example with phonegap Im try but the documentation is bad

Error:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

[wonderfly]

_From [email protected] on November 30, 2014 23:19:09_

For me the request to get api work but the actual query fails with 403, I have ensured that all referres are allowed but still fails....

[valtih1978]

Still can't make requests from file:// origin, its been a year waiting for this enhancement!

I wonder why don't they deny the http:// and https:// also. Enabling anything defeats the security (that is why file:// was enchancendly denied in the first place).

[tdehaeze]

Any updates on this issue ? Can't make gapi works on my ionic app...

[bsittler]

GAPI is currently only supported for use in web applications.

Support for file://... origins is difficult because browsers typically restrict the web APIs available to those origins, including not allowing these origins to be used or sent in postMessage and also not sending them in CORS requests. In both cases they are typically converted to "null" origins, but null origins don't allow the API server the client library is talking to to identify the calling web app.

In your file are you able to directly access the API in question using CORS? If you try this please follow up to let us know whether it worked in your application.

[bmwertman]

Anything new on this? I was able to authenticate my ionic app using the Drive.authenticate method here. But I get the 403 errors from gapi.client.drive.files.list(); as well as;

Invalid 'X-Frame-Options' header encountered when loading 'https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalho…%3Atrue%7D))&rpctoken=e2x1eop3h1rr&rpcService=2qeo0ns6gu13&thirdParty=true': 'ALLOW-FROM http://localhost' is not a recognized directive. The header will be ignored.

and

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost').

when I run the Drive.showPicker() method also here.

[bsittler]

This IFRAME appears to be part of Google Docs picker API, and you'll need to seek assistance in another forum appropriate to that component - I don't know how it is supposed to work.

Also, is this in Chrome? If so, be aware that X-Frame-Options: ALLOW-FROM is documented as not working in Chrome: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options#Browser_compatibility

_Edit:_ you might try the "Send feedback" button on https://developers.google.com/picker/docs/ - I don't know what the best forum for discussing that API is.

[pabx06]

same error here can't use on local file

[bsittler]

Usage of gapi.client from non-https:, non-http: web origins is not supported. As stated in https://developers.google.com/api-client-library/javascript/start/start-js#supported-environments :

It only works within HTML documents with a <body> element served using the https (preferred) and http protocols.

[radenkozec]

@bsittler I have a same error when testing from localhost:

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://docs.google.com’) does not match the recipient window’s origin (‘http://localhost:48346’).

Not sure how to solve this? Workaround is to delete setDeveloperKey

[bsittler]

@radenkozec please start a separate entry in the issue tracker and provide more complete details -- although symptoms may be similar, the API not working on non-http:, non-https: URLs likely has distinct causes from the behavior you are seeing on an http: URL.

[ravikumarvf]

Is there any conclusion on this ? about how to make it run locally ?

[bsittler]

@ravikumarvf it should work fine with a local web server using https: or http: URIs. Other URI schemes are not supported at present.

It cannot work correctly served from a file: URI due to lack of consistent and complete cross-browser support for such non-web origins. For instance, file: URIs do not have a consistent definition of web origin, do not have access to needed storage, are not accurately represented in cross-origin communications (e.g. CORS, postMessage, Origin:, Referer:), do not have consistently isolated and secure storage ownership or cookies, do not have any consistent cross-browser way to defend themselves from other malicious content downloaded to the same computer, don't have any way to ensure a future instance of the same URI actually represents the same application (even on the same computer) due to e.g. temporary download file naming and varying apparent filesystem layouts per-app (in the case of WebView and similar embedded-HTML rendering modes), and in general do not consistently function correctly.

[mayrop]

FYI - this seems to now be an issue even in the web.

You can even see the issue in https://developers.google.com/+/web/share/
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://accounts.google.com') does not match the recipient window's origin ('https://apis.google.com').

Related:

• https://stackoverflow.com/questions/48624138/google-share-button-provokes-failed-to-execute-postmessage-on-domwindow.
• https://productforums.google.com/forum/#!topic/chrome/G81a8tcSg1w

[TMSCH]

@mayrop thanks for the report, not sure what started throwing this error, but it can be ignored.

[rparadis]

@mayrop @TMSCH I'm having a similar problem (Failed to execute 'postMessage'.... I'm using google's "Save to Drive" widget button using simple http protocol server. I wasted nearly a day trying to determine where this was coming from and how to get rid of it. Although, functional, it doesn't seem right to introduce these messages as an error. I saw a few examples of other websites using this having same problem as well.

[boulderwhis]

so are we saying that the only way to get around this issue is to upload html page to a web service? trying to access the civics API and keep running into this while testing. tried using a jquery method as well but the src link won't attach due to CORs policy

[sbimochan]

Any solution to Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:3000').

[yong-asial]

Hi, does anyone has solution to it?

[johannesjo]

I am still struggling with this. Sorry for spamming, but did anybody come up with something?

[jkreddy123]

Tried testing a simple cloud API, by running index.html from local machine. Ran into this problem. May be, i will have to build a web app and upload to heroku or somewhere else, to test this ...

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').