Google Apps Script does not load when embedded into iFrame

问题

I am trying to embed my Google Apps Script WebApp into an iFrame on another domain but the webapp is not loaded and I only see a white screen. There is also no error in the webinspector.

The Webapp is published with: Execute as me and Access has anyone within Given Domain.

According to this I implemented my doGet method like this:

function doGet(e) {
 return HtmlService
 .createHtmlOutputFromFile('html/index')
 .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

and the IFrame looks like this:

<iframe src="https://script.google.com/a/my_domain/macros/s/ADjidojcojv/exec" title="test" width="558" height="300"></iframe>

When the user is logged into Google the webapp is displayed. However when the user is not logged in a grey image with account.google.com refused to connect

I think the reason is that there is a redirect to the google sign in which does not allow to be displayed. Furthermore in this case there is also another redirect to a SAML SSO application. So when you normally sign in into google you will redirect to the SAML SSO login.

What are my options here?

[Edit] I found someone with the exact same problem and one possible solution. Apparently there is no easy way of doing this...

回答1:

When publishing web-apps with access: "anyone", it is needed for the end user to be logged in. Otherwise, the user is redirected to Google login page. Google's login page does not allow itself to be iframed. Since you're logged in, the web app isn't redirected to Google's login page and this error doesn't appear, else it appears.

Possible solutions:

Warn users beforehand that they must login
Publish using access: "Anyone even anonymous"
If that's not possible, It is possible to detect whether the iframed page has window loaded or not using window.length, which will be 0 if page refused to connect and more than 0 in a web-app, because your page is iframed. Then it is possible to redirect the user to the login page.

<!DOCTYPE html>
<html>
  <body>
    body
    <iframe
      src="https://script.google.com/macros/s/[SCRIPT_ID]/exec"
      >Loading
    </iframe>
    <script>
      const main = (() => {
        console.log("loading page");
        const f = document.querySelector("iframe");
        f.onload = (e) => {
          console.log("iframe onload");
          const fw = f.contentWindow;
          if (fw.length > 0) console.info("logged in");
          else {
            alert("Please Login!");
            window.location = "https://accounts.google.com";
          }
        };
      })();
    </script>
  </body>
</html>

References:

Same origin policy

来源：https://stackoverflow.com/questions/63155859/google-apps-script-does-not-load-when-embedded-into-iframe

标签

google-apps-script

iframe

web-applications

same-origin-policy

x-frame-options