Google Forms embedded in Google Sheets Unclickable - CORS conflict

Question

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.

What questions have you reviewed? Have you attempted anything from these many related questions? — tehhowch
Possible duplicate of Embedding Google Apps Script in an iFrame — tehhowch
Further, just assuming that you can serve full pages from a distributed domain like Google Forms on domain B is incorrect. As you observe here, that content expects it to be on its generated domain. — tehhowch
Possibly the solution is close to the link that you posted, however there's a gap that I don't get to apply that particular solution to mine. Would you help me clarifying? — Israel Saba
I also tried all the CORS workarounds available here and in github... No success — Israel Saba

TheMaster TheMaster · Accepted Answer · 2019-03-12T17:40:07

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

Google Forms embedded in Google Sheets Unclickable - CORS conflict

2 Answers

Issue:

Solution:

Script: