Search code examples
javascriptgoogle-apps-scriptiframeweb-applicationssame-origin-policy

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?


Solution

  • 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!