Google Apps 脚本嵌入 iFrame 时不加载答案

【问题标题】：Google Apps Script does not load when embedded into iFrameGoogle Apps 脚本嵌入 iFrame 时不加载
【发布时间】：2020-11-19 04:14:49
【问题描述】：

我正在尝试将我的 Google Apps Script WebApp 嵌入到另一个域的 iFrame 中，但该 webapp 没有加载，我只看到一个白屏。 webinspector 中也没有错误。

Web 应用程序发布时：以 m 身份执行并且 在给定域内拥有任何人的访问权限。

根据this 我实现了我的 doGet 方法是这样的：

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

IFrame 看起来像这样：

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

当用户登录 Google 时，会显示 webapp。但是，当用户未登录时，使用account.google.com refused to connect 的灰色图像

我认为原因是有一个重定向到不允许显示的谷歌登录。此外，在这种情况下，还有另一个重定向到 SAML SSO 应用程序。因此，当您通常登录 google 时，您将重定向到 SAML SSO 登录。

我有什么选择？

[编辑] 我找到了exact same problem 和一个可能的解决方案的人。显然没有简单的方法可以做到这一点......

【问题讨论】：

已发布的应用程序是否可以在没有框架的情况下隐身访问？
嗯，我需要登录谷歌才能访问它
尝试访问此 Web 应用程序的用户是否在您的域中？根据this piece of documentation，只有您域中的用户才能访问该应用。
Does script editor> executions 选项卡显示在您打开 iframed 页面时触发的 doGet？
错误是什么？

标签： google-apps-script iframe web-applications same-origin-policy x-frame-options

【解决方案1】：

当发布具有访问权限的网络应用程序时：“任何人”，最终用户需要登录。否则，用户将被重定向到谷歌登录页面。 Google 的登录页面不允许自己进行 iframe。如果您已登录，则网络应用不会重定向到 Google 的登录页面，并且不会出现此错误，否则会出现。

可能的解决方案：

事先警告用户必须登录
使用访问权限发布：“任何人都可以匿名”
如果不可能，可以使用window.length（少数几个可跨源访问的属性之一）检测 iframed 页面是否已加载窗口，如果页面拒绝连接则为 0 等等在网络应用程序中大于 0，因为您的页面是 iframed。然后可以将用户重定向到登录页面。

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

参考资料：

Same origin policy

【讨论】：

可以看看stackoverflow.com/questions/68250943/…