CODEWITHSUNDEEP
javascriptgoogle-drive-api
Michael Fatica
Michael Fatica

Reputation: 23

Google Picker API UI not displaying in Chrome, not functioning in Firefox

we have been using the Google Picker API for quite some time, and it just recently started appearing to Chrome users as a blank IFRAME, with the following errors shown in the console:

[Report Only] Refused to frame 'https://docs.google.com/' because an ancestor violates the following Content Security Policy directive: frame-ancestors https://docs.google.com".

2399533774-picker_modularized_opc.js:1112 Uncaught Error: Incorrect origin value. Please set it to - (window.location.protocol + '//' + window.location.host) of the top-most page at new JJ (2399533774-picker_modularized_opc.js:1112)
    at 2399533774-picker_modularized_opc.js:1115
    at HTMLDocument.<anonymous> (picker:61)```
rpc.js?c=1&container=onepick:127 Invalid rpc message origin.  vs https://...our domain

There haven't been any changes to our Google API console settings.

In Firefox, the picker IFRAME does display, and even allows for the selection of files, but choosing a file and clicking Select causes the UI to react as if the selection was made (by disabling the Select button) but it doesn't invoke the callback.

The creation of the picker is basically straight out of the "hello world" from the documentation and again, we haven't touched this integration in a long time.

   if (pickerApiLoaded && oauthToken) {
        var view = new google.picker.View(google.picker.ViewId.DOCS);
        view.setMimeTypes("application/vnd.google-apps.spreadsheet");
        var picker = new google.picker.PickerBuilder()
        .setAppId(appId)
        .setOAuthToken(oauthToken)
        .addView(view)
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
        picker.setVisible(true);
      }

Firefox: (Dialog is visible but doesn't allow selection)

Google Picker in Firefox

Chrome: (Dialog is empty)

Google Picker in Chrome

Upvotes: 0

Views: 525

Answers (2)

Michael Fatica
Michael Fatica

Reputation: 23

We ultimately narrowed this down to a conflict with the MooTools/Squeezebox modal library used on our site by removing JS dependencies one by one until the Google Drive modal started working again. I'm not sure what Google changed, but removing Squeezebox on this page solved the issue for us. These were the culprits:

enter image description here

Upvotes: 0

ziganotschka
ziganotschka

Reputation: 26836

This is due to a new bug

Many people are affected by it, I recommend to "star" the Issue on Google's Issue Tracker to increase visibility.

Upvotes: 1

Related Questions