Search code examples
javascriptgoogle-drive-api

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


Solution

  • 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.