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

Question

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

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

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

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

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

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

我的解决方案是将 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 2

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

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

Answer 3

如Enum XFrameOptionsMode中所述，

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

有了这个，您可能想要检查防止点击劫持的实施情况。尝试将 X-Frame-Options HTTP Response 标头添加到您想要防止通过 framebusting 被点击劫持的任何页面。

欲了解更多信息，请访问Clickjacking Defense Cheat Sheet。