Im getting this console error on my localhost when connecting to google drive API, but the picker I have configured in my script successfully displays my drive's contents:

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

Invalid 'X-Frame-Options' header encountered when loading ';origin=http%3A%2F%2Flocalho…2photos%22))&rpctoken=yxxydsx40r21&rpcService=2dngvfb4tj9x&thirdParty=true': 'ALLOW-FROM http://localhost:8000' is not a recognized directive. The header will be ignored.

Do I ignore this or will it introduce trouble for me down the road?

Im getting this console error on my localhost when connecting to google drive API, but the picker I have configured in my script successfully displays my drive's contents:

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').

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

Do I ignore this or will it introduce trouble for me down the road?

• javascript
• google-api
• google-drive-api
• google-picker

• 1 Probably these would help you: stackoverflow.com/questions/27573017/…, stackoverflow.com/questions/27882594/… and stackoverflow.com/questions/16145475/… – KRR Commented Apr 15, 2015 at 21:03
• 4 Have you solved this problem? – phuwin Commented Sep 8, 2016 at 12:12
• I have the same problem even though, the app is well setup in the google console (my domain is registered in the oauth part) and I don't have any http iframe in an https website like in the link given by @KRR. – Insomniak Commented Sep 13, 2016 at 0:13
• 1 Which Google API are you trying to use? Are you trying to load google docs in an iframe or another window and then communicate with it? – Morad Ankri Commented Jan 26, 2017 at 4:59
• i think its browser issue. Try using the latest version of chrome and check of the same persists. – Atul Sharma Commented Feb 15, 2017 at 7:29

4 Answers 4

This is a CORS issue Cross Origin Resource Sharing. You will need to add CORS on your server so that it sets correct headers. What is CORS and how to solve

Read up on: Wrong Origin using HTTPRequests

This is a bug

https://issuetracker.google.com/issues/177046274

There seems to be a few workarounds there for people using it as part of an Apps Script Add-on, making reference to this stack question:

Google Picker API Invalid origin value error

Though this doesn't work for the official quickstart using JavaScript.

I have tested this with Chrome and Firefox and both give the same results.

If this is affecting you please be sure to go and star the issue linked above.

While using Google APIs I find it easier setting up a virtual host and adding it to the OS hosts file. If you know how to set up self-signed certificates it can also be helpful.

Personally set up all my projects using Vagrant and Homestead with the SSL flag on. That way I can use the URL https://project.local/ and the browser doesn't complain as much about the X-Frame-Options

To enable SSL put ssl: true under the authorize: ~/.ssh/id_rsa.pub in the Homestead.yaml file that gets generated. By default the certificate won't be trusted so you will have to tell your OS that you want to trust it. I am afraid I don't remember how exactly I did that the last time.

You have to control Google's HTTP headers , make sure to use valid options X-Frame-Options