google apps script & picker in iframe

Question

The problem with displaying google picker in apps script when placing the script in a iframe of another web site. When you call the picker, a white square is displayed.

Not in the frame of another web site, the picker works fine.

HtmlService google apps script

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

The picker is based on this documentation -

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

I decided to try a demo premium script File Upload Form.

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

Will insert the script into the frame, but the result was similar - an empty white square.

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

Example

http://jsfiddle.net/qqq7df51/

Whether it is possible to solve this problem.

Answer 1

I know that this is an old post, but it was the closest that met the search for the white-blank picker issue when the Google Picker is called from a Google Apps Script web app with the error.

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

The suggestion in the error log didn't work for me, but I found a clue here.

My solution was to set the Picker site origin to the site that my iFrame was in.

For example, if I embedded my web app in 'https://www.example.com' then my picker method would be:

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

An example of the full constructor might look like this:

 //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

If you intend to use Web App project as standalone and as embedded version at the same time, the same file picker will require different origin urls. To avoid hard-coding and chaning urls, I just get the right one from ancestorOrigins. It's the last one in array.

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

Answer 3

As mentioned in Enum XFrameOptionsMode,

Setting XFrameOptionsMode.ALLOWALL will let any site iframe the page, so the developer should implement their own protection against clickjacking.

With this, you may want to check implementation of protection against clickjacking. Try to add the X-Frame-Options HTTP Response header to any page that you want to protect from being clickjacked via framebusting.

For more information, visit Clickjacking Defense Cheat Sheet.