Google drive picker error

Question

I am getting following error while accessing google drive picker, however the picker shows up properly without any error.

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

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.

PSB the screenshot from my developer console

http://screencloud.net/v/6431

Also I have referred to this question Google Drive Picker - Developer Key is Invalid Error but I think there has been some changes in google api so this thing is not working.

Code snippet -

var picker = new google.picker.PickerBuilder()
                             .setLocale(lkGoogleSettings.locale)
                             .setOAuthToken(accessToken)
                             .setCallback(pickerResponse)
                             .setOrigin(lkGoogleSettings.origin);

Thanks

`http://localhost' is not a recognized directive`. Perhaps Google API expects a port number, as in `http://localhost:80`? — guysigner, Jan 05 '16 at 19:06
FWIW this only happens in Chrome. The 2nd issue is reported as a bug they're not planning to fix. https://code.google.com/p/chromium/issues/detail?id=511521 — Amber, Jan 07 '16 at 17:41
I think google file picker works only in live server, you need to host it — Paresh Gami, Feb 20 '16 at 03:41
Did you find a solution for this? I ran into the same issue in the Android build of my ionic application. — Brad W, Oct 04 '16 at 22:07

silverelizard · Answer 1 · 2016-06-08T18:36:48.730

As some of the commentators have mentioned, the X-Frame-Option error is known bug in Chrome. You can see a long discussion about it here.

Now, for the real problem: origin matching. Google Drive does not play nice with localhost, with or without port, regardless of whether you add it to your origins in your permissions for your client id.

There is, however, hope. If you set up a domain in your hostfile to point to localhost, you can then add the domain to your origin in your Google App console, and everything works as expected!

I do this all the time in order to test my applications. For example:

add dev.mysite.com to your hostfile (/etc/hosts in Mac).
Replicate the domain in your permissions for your picker app in the Google App Console, and you should be good to go.
Start your site using dev.mysite.com:80* and Drive Picker should now function correctly.

*Note: you must serve on port 80. Google does not play nice with ports at all, so when you go to your site, the address must be dev.mysite.com with no port.

Any reason for the down vote? I do not believe a cosmetic edit should be enough to down vote a correct answer with an actual solution. — silverelizard, Jun 08 '16 at 18:02

Google drive picker error

1 Answers1