Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Embedding Google Apps Script in an iFrame

I am trying to embed a page that is dynamically built using Javascript in Google Apps Script into my website in an iFrame, but the iFrame's content isn't shown. Google Apps Script has a same-origin policy which prevents it from loading.

What I am trying to do is (I removed the full link):

<iframe src="https://script.google.com/a/macros/SCRIPT_ID"></iframe>

The error I am getting is:

Refused to display 'https://script.google.com/a/macros/SCRIPT_ID' 
in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Is there a way to alter the policy and load the content in an iFrame?

like image 414
Technotronic Avatar asked Nov 28 '16 10:11

Technotronic


People also ask

How do I embed a Google script?

Navigate to the page in your Site where you want to embed the web app. Click the edit icon, and then Insert > Google Apps Script. Choose the script from the list that represents your web app. If your web app is not bound to this Site, you can paste in the web app URL instead.

How do I embed a Google script in HTML?

To embed Google Apps Script Web Apps in Google Sites, Copy the published Web App URL (For testing, you can directly copy the above live form link) Go to Google Site, choose the Embed option, paste the URL you copied, and then click Insert.

Can I embed a Google site in iframe?

Based on feedback, Google has now added the ability to embed an entire webpage as an iframe in a new Google Site. This allows you to pull in content from other websites and Google tools like Apps Script and Data Studio. Select Embed URL from the Insert menu.

What happens when you embed an app script into an iframe?

The problem with this, is that if you embed your App Script into an iframe, and a user visits the page it is embedded into and they are logged out of Google, then this happens: If you open your devtools when this happens, you will also see this descriptive error message:

How do I embed a Google Apps Script on my website?

Use the Embed option from the Insert panel (or the Embed option from the Disc) Enter your Google Apps Script published web app URL in in By URL tab of the Embed from the web dialogue box Choose the Whole page option Use the Insert button to complete and then you can choose to size and position the embedded script

Who is authorized to execute the iframe embed?

A) The script is set to be authorized by your own account (executing as yourself), not the users, B) The script is set to be authorized by the end user (“execute the app as user accessing the web app”), but they are logged in and already authorized by the time they load the page the iframe embed is on.

How to embed a web app in a wordpress site?

Choose the script from the list that represents your web app. If your web app is not bound to this Site, you can paste in the web app URL instead. Click the Selectbutton, choose the desired options from the next dialog, and click Save. Save your changes to the page and then you should see your web app embedded in your Sites page.


Video Answer


1 Answers

Google had just recently enabled this feature. It has been under a 'feature request' status for quite a long time. Link here

You can now explicitly define X-Frame-Options.

To allow embedding under another domain, the option should be HtmlService.XFrameOptionsMode.ALLOWALL

Google documentation on the subject:

https://developers.google.com/apps-script/reference/html/html-output#setXFrameOptionsMode(XFrameOptionsMode)

Example:

function doGet() {
    return HtmlService.createTemplateFromFile('form.html')
        .evaluate() // evaluate MUST come before setting the Sandbox mode
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Hope this helps!

like image 162
Dmitry Avatar answered Sep 19 '22 14:09

Dmitry