1

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

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

1 Answers1

1

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

iansedano
  • 6,169
  • 2
  • 12
  • 24
  • setting domain via .setOrigin isn't working, I get the same error "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin". – Hammad Ahmed Feb 25 '21 at 16:56
  • also I get "Cannot read property 'host' of undefined" when trying console.log(google.script.host.origin); Am I missing something? – Hammad Ahmed Feb 25 '21 at 16:58
  • @HammadAhmed Maybe try port 8000? I just went through the quickstart and it worked for me on port 8000 with no https or anything. When you try, do you get the login screen? You are hosting this on an html page, right? – iansedano Feb 26 '21 at 09:09
  • Still getting this issue after deployment to HTTPS not sure how port 8000 can help in the live environment. Yes, I was getting the login screen and dialog also appears but also get this error in the console. – Hammad Ahmed Feb 26 '21 at 13:11
  • Ah you should have mentioned that at the beginning. That is a bug, I have edited my answer. – iansedano Feb 26 '21 at 13:51