iframe 中的谷歌应用脚​​本和选择器

Question

将脚本放置在另一个网站的 iframe 中时，在应用程序脚本中显示谷歌选择器的问题。 当您调用选取器时，会显示一个白色方块。

不在另一个网站的框架中，选择器工作正常。

HtmlService 谷歌应用脚​​本

function doGet() {
return HtmlService.createTemplateFromFile('form.html')
    .evaluate() 
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);}

https://stackoverflow.com/questions/40842627/embedding-google-apps-script-in-an-iframe#answer-40843413

选择器基于此文档 -

https://developers.google.com/apps-script/guides/dialogs#file-open_dialogs

我决定尝试一个演示高级脚本文件上传表单。

https://ctrlq.org/code/19747-google-forms-upload-files

将脚本插入框架，但结果是相似的 - 一个空的白色方块。

https://script.google.com/macros/s/AKfycbxlX3r_dt_ZLZC9TqloaqtdextROJoIH9mUDu3MWOiXtI6ADhqb/exec

例子

http://jsfiddle.net/qqq7df51/

是否可以解决这个问题。

Answer 1

如Enum XFrameOptionsMode中所述 ，

设置XFrameOptionsMode.ALLOWALL将使任何网站XFrameOptionsMode.ALLOWALL对页面进行XFrameOptionsMode.ALLOWALL ，因此开发人员应实施自己的保护措施，以防止点击劫持。

这样，您可能要检查防止点击劫持的实现。 尝试将“ X-Frame-Options HTTP响应”标头添加到您要保护的任何页面上，以免通过framebusting被劫持。

有关更多信息，请访问Clickjacking防御备忘单 。

Answer 2

我知道这是一篇旧帖子，但是当从 Google Apps Script Web 应用程序调用 Google Picker 并出现错误时，它是最接近搜索白空白选择器问题的帖子。

Incorrect origin value. Please set it to - (window.location.protocol + '//' + window.location.host) of the top-most page

错误日志中的建议对我不起作用，但我在这里找到了线索。

我的解决方案是将 Picker 站点原点设置为 iFrame 所在的站点。

例如，如果我将我的网络应用程序嵌入到“https://www.example.com”中，那么我的选择器方法将是：

.setOrigin("https://www.example.com")

完整构造函数的示例可能如下所示：

 //Builds the picker
  const picker = new google.picker.PickerBuilder()
    .enableFeature(google.picker.Feature.SUPPORT_TEAM_DRIVES)
    .setOAuthToken(config.oauthToken)
    .addView(view)
    .setDeveloperKey(config.developerKey)
    // .setOrigin(google.script.host.origin) // Don't use this.
    .setOrigin("https://www.example.com") // Add your base URL here.
    .setSize(DIALOG_DIMENSIONS.width,
            DIALOG_DIMENSIONS.height)
    .setCallback(pickerCallback)
    .build()

Answer 3

如果您打算同时将 Web App 项目用作独立版本和嵌入式版本，则相同的文件选择器将需要不同的源 url。 为避免硬编码和更改 url，我只从ancestorOrigins中获取正确的 URL。 它是数组中的最后一个。

var url = window.location.ancestorOrigins[window.location.ancestorOrigins.length-1];
new google.picker.PickerBuilder().setOrigin(url);