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

Question

I'm trying to allow users to select files from their google drive via google picker. I have followed [official][1] docs/example. But getting the followings errors in the browsers console:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:54255').
Invalid 'X-Frame-Options' header encountered when loading 'https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalhost%3A54255&navHidden=true&multiselectEnabled=true&oauth_token=ya29.A0AfH6SMCtkE8tfNq1NwGKP79vthQbMqKyt1kJnEubzvC03aio5bVoMO2jg8g8uJdKSiZez03lVgbN8TlICK-X05KdVtlsmsL2TRMjbTwav7xI0OFg7JGQwzd9V6TGHpF44AZNwHNp9IwbRTEMjuTD04yVAF0D&developerKey=AIzaSyBNvieCkOMLwVGgv1rXPOxfbZxUGBdDRkY&hostId=localhost&parent=http%3A%2F%2Flocalhost%3A54255%2Ffavicon.ico&nav=((%22all%22%2Cnull%2C%7B%22mimeTypes%22%3A%22image%2Fpng%2Cimage%2Fjpeg%2Cimage%2Fjpg%22%7D)%2C(%22upload%22%2Cnull%2C%7B%22query%22%3A%22docs%22%7D))&rpcService=civfhwizsis7&rpctoken=twmqtupitwug&thirdParty=true#rpctoken=twmqtupitwug': 'ALLOW-FROM http://localhost:54255' is not a recognized directive. The header will be ignored.

I've done the following when setting up on google developer console:

Enabled Google Picker API in Google API Console
Created API Key
Created OAuth client

I've tried deploying my application as well but still got the same error.

Here is the code I'm using:

var developerKey = 'xxxxxxxYYYYYYYY-12345678';

var clientId = "1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com"

var appId = "1234567890";

var scope = ['https://www.googleapis.com/auth/drive.file'];

var pickerApiLoaded = false;
var oauthToken;

function loadPicker() {
  gapi.load('auth', {'callback': onAuthApiLoad});
  gapi.load('picker', {'callback': onPickerApiLoad});
}

function onAuthApiLoad() {
  window.gapi.auth.authorize(
      {
        'client_id': clientId,
        'scope': scope,
        'immediate': false
      },
      handleAuthResult);
}

function onPickerApiLoad() {
  pickerApiLoaded = true;
  createPicker();
}

function handleAuthResult(authResult) {
  if (authResult && !authResult.error) {
    oauthToken = authResult.access_token;
    createPicker();
  }
}

function createPicker() {
  if (pickerApiLoaded && oauthToken) {
    var view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes("image/png,image/jpeg,image/jpg");
    var picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setAppId(appId)
        .setOAuthToken(oauthToken)
        .addView(view)
        .addView(new google.picker.DocsUploadView())
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
     picker.setVisible(true);
  }
}

function pickerCallback(data) {
  if (data.action == google.picker.Action.PICKED) {
    var fileId = data.docs[0].id;
    alert('The user selected: ' + fileId);
  }
}

Am I doing something wrong? [1]: https://developers.google.com/picker/docs

This could be due to your localhost being served over http, maybe try manually inserting the address as an https address - see stackoverflow.com/q/27573017 — iansedano
Thanks for the reply @iansedano, I have also tried deploying to a live HTTPS site but still no luck. — Hammad Ahmed
Hmm, have you inserted your localhost address into the "Authorized JavaScript origins" in the cloud console when you create your client id? cloud.google.com/compute/docs/tutorials/javascript-guide — iansedano
@iansedano Yes, I added localhost address to "Authorized JavaScript origins" and redirect addresses as well. — Hammad Ahmed

iansedano iansedano · Accepted Answer · 2021-02-25T15:05:22

This is a reported bug

https://issuetracker.google.com/177046274

I would go and star these issues to let Google know that they affect you.

I can reproduce it, the picker works, but this error appears:

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

Another related bug

On a related note, if you want to have thumbnails appear in the picker, you need to use the more expansive drive.readonly, or drive scope:

https://issuetracker.google.com/64622983

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

1 Answers

This is a reported bug

Another related bug