Google Forms embedded in Google Sheets Unclickable - CORS conflict

问题

I have created a spreadsheet to which I display Google Forms from it using the sandbox, iframe mode. However, the google forms do not respond to clicks, when clicking on the embedded iframe. It seems to be something related to CORS because if I enable my CORS suppresser plugin it becomes clickable. However, I don't want to have to install a CORS plugin on every computer I install the feature. How do I solve this problem to everyone accessing the spreadsheet?

function panel(){
  
  var form = FormApp.openById('formId');
  var formUrl = form.getPublishedUrl();
  
  var response = UrlFetchApp.fetch(formUrl);
  var formHtml = response.getContentText();
  
  var htmlApp = HtmlService
      .createHtmlOutput(formHtml)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setTitle('Form')
      .setWidth(600) 
      .setHeight(800);

  SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}

Whenever I click next I receive back the following messages on my console on Google Chrome Browser.

Access to XMLHttpRequest at 'https://www.gstatic.com//freebird//js/k=freebird.v.en.lcU4npEiYUw.O/rt=j/d=0/rs=AMjVe6hdoeb-_UmrKEHSn6K-MdbidWgqhw/m=syu,syv,syt,syw,syx,syy,syz,syj,sy10,sy1q,sy2n,sy31,KFVhZe' from origin 'https://n-tnjo46dbraljse3yd32xl22ypwhdx36fhlaiora-0lu-script.googleusercontent.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

回答1:

Issue:

• You're downloading html and trying to serve it in your own iframe. This will be considered cross-site forgery and the browser won't allow it due to CORS.

Solution:

• Google forms allows itself to be embedded.

Script:

function panel(){

  var form = FormApp.openById('formId');
  var formUrl = form.getPublishedUrl(); // Should end in `/viewform`; If not, modify it accordingly.

//  var response = UrlFetchApp.fetch(formUrl);
//  var formHtml = response.getContentText();

  var htmlApp = HtmlService
      .createHtmlOutput('<h1>MY FORM</h1>')
      .append('<iframe src ="' + formUrl + '?embedded=true" width="700" height="520" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>')
      .setTitle('Form')
      .setWidth(750) 
      .setHeight(800);

  SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}

回答2:

Maybe you could try to open your form, explore (F12) and copy the generated HTML into a new HTML file from your script, then exploit it with HtmlService.createHtmlOutputFromFile (instead of the combination of FormApp and UrlFetchApp) ? This way you will have better control on the HTML, but you will have to copy each change on the form to your HTML file in the script...

来源：https://stackoverflow.com/questions/55122067/google-forms-embedded-in-google-sheets-unclickable-cors-conflict