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);