Google 选择器 API UI 未在 Chrome 中显示，无法在 Firefox 中运行

Question

我们使用 Google 选择器 API 已经有一段时间了，它最近才开始向 Chrome 用户显示为空白 IFRAME，并显示以下错误控制台：

[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

我们的 Google API 控制台设置没有任何变化。

在 Firefox 中，选择器 IFRAME 会显示，甚至允许选择文件，但是选择一个文件并单击 Select 会导致 UI 做出选择一样的反应（通过禁用 Select 按钮）但它不会调用回调。

选择器的创建基本上直接来自文档中的“hello world”，而且我们已经很长时间没有触及这个集成了。

   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：（对话框可见但不允许选择）

Chrome：（对话框为空）

Answer 1

这是由于新 bug

很多人都受到它的影响，我建议在 Google 的问题跟踪器上为问题“加注星标”以提高知名度。

Answer 2

我们通过一个一个地删除 JS 依赖关系，直到 Google Drive 模态再次开始工作，最终将其缩小到与我们网站上使用的 MooTools/Squeezebox 模态库的冲突。我不确定 Google 发生了什么变化，但是删除此页面上的 Squeezebox 为我们解决了这个问题。这些是罪魁祸首：

Google 选择器 API UI 未在 Chrome 中显示，无法在 Firefox 中运行

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

javascript

google-drive-api

这是由于新 bug