我的 iframe 在已发布的 Web 应用程序/侧边栏中在哪里? [英] Where is my iframe in the published web application/sidebar?

问题描述

在我发布的网络应用和插件侧边栏的 DOM 中尝试控制 window 时，我遇到了各种错误.

I've been running into various errors when trying to control the window in DOM of my published web app and addon sidebar.

• window.location 返回一个模糊的未知网址，例如 n-rysutduudd.google-usercontent.com，而不是我发布的网络应用网址 script.google.com/[SCRIPT_ID]/exec

• window.location returns a vague unknown url like n-rysutduudd.google-usercontent.com instead of my published web app url script.google.com/[SCRIPT_ID]/exec

尝试将我发布的网络应用程序重定向到新网址失败window.location.href=www.google.com

Attempts to redirect my published web-app to a new url fails window.location.href=www.google.com

Web 应用程序中的表单，提交时重定向到空白页面.

Forms in web app, when submitted redirects to blank page.

经过研究，我认为这是由于在 iframe 中提供了网络内容.除了 web 应用程序在 iframe 中被沙箱化之外，文档没有显示太多内容.

After researching, I figured this is due to the web content being served in a iframe. The documentation doesn't show much except that the webapp is sandboxed in a iframe.

我研究过的相关文档:

• https://developers.google.com/apps-script/migration/iframe
• https://developers.google.com/apps-script/guides/html/限制

我调查过的一些相关问题:

Some of the relevant questions I've looked into:

• window.location.href = window.location.href 返回空白页
• Google 脚本网络应用在提交后进入空白页面
• 如何阻止重定向的 URL 被屏蔽?

我的具体问题是:我的 iframe 窗口在已发布的网络应用程序或侧边栏中的添加项究竟在哪里?

My specific question is: Where exactly is my iframe window in the published web app or my add on sidebar?

推荐答案

              PUBLISHED WEB APP
+---------------------------------------------+
|              script.google.com              |
|                                             |<------- [#0] window.top The top frame
|                                             |
|     +---------------------------------+     |
|     |     *.googleusercontent.com     |<----+-------- [#1] Outer Sandboxed Iframe
|     |         sandboxFrame            |     |
|     |    +-----------------------+    |     |
|     |    |        /blank         |    |     |
|     |    |    userHtmlFrame      |    |     |
|     |    |                       |    |     |
|     |    |     Where the html    |<---+-----+-------- [#2] Inner Sandboxed Iframe
|     |    |    file you created   |    |     |
|     |    |       is loaded       |    |     |
|     |    |                       |    |     |
|     |    |                       |    |     |
|     |    |                       |    |     |
|     |    |                       |    |     |
|     |    |                       |    |     |
|     |    +-----------------------+    |     |
|     |                                 |     |
|     |                                 |     |
|     +---------------------------------+     |
|                                             |
|                                             |
|                                             |
+---------------------------------------------+

你说得对.大多数错误是由于 iframe 沙箱由谷歌完成.要回答您的问题，

You're right. Most of the errors are due to the iframe sandboxing done by Google. To answer your question,

• 您的窗口位于 ID 为 userHtmlFrame 的 iframe 中，其 src 设置为 /blank.

• Your window is located in a iframe with id: userHtmlFrame with it's src set to /blank.

这个框架嵌套在另一个框架中，带有 src:*.googleusercontent.com 和 id sandboxFrame.

This frame is nested inside another frame with src: *.googleusercontent.com and id sandboxFrame.

最后，sandboxFrame 嵌套在主框架内:script.google.com

Finally, The sandboxFrame is nested inside the main frame: script.google.com

• window 在您发布的应用中是指最里面的框架.

• window in your published app refers to the inner most frame.

这个最里面的框架有它自己的cookies、storage 和大多数其他独有的属性一个窗口.

This inner most frame has it's own cookies, storage and most other attributes unique to a window.

不幸的是，这个内部框架无法在其他地方导航.

Unfortunately, this inner frame cannot be navigated elsewhere.

所有窗口导航都必须在最外层框架上完成:script.google.com.这就是 文档 要求您设置 base 或 锚的 target 到 <代码>顶部框架.

All window navigation must be done on the outermost frame: script.google.com. This is why the documentation asks you to set base or anchor's target to the top frame.

没有action的表单 被提交到内部框架/blank.因此，您被重定向到一个空白页面.文档 指出，

Forms without action are submitted to the inner frame /blank. Therefore, you're redirected to a blank page. The documentation states,

在 IFRAME 模式下，HTML 表单是允许提交的，如果表单元素没有指定 action 属性，它将提交到一个空白页面.更糟糕的是，内部 iframe 将在 onclick 处理程序有机会完成之前重定向到空白页面.

With IFRAME mode however HTML forms are allowed to submit, and if a form element has no action attribute specified it will submit to a blank page. Worse, the inner iframe will redirect to the blank page before the onclick handler has a chance to finish.

• 起源您的 iframe userHtmlFrame 是 从 sandboxFrame 继承并设置为 *.googleusercontent.com.对于所有意图和目的(cors，白名单来源，fetch 请求)，这是有效的起源.

  • The origin of your iframe userHtmlFrame is inherited from sandboxFrame and set to *.googleusercontent.com. For all intents and purposes(cors, whitelisting origins, fetch requests), this is the effective origin.

    sandboxFrame 当前具有 以下功能策略:allow

    加速度计*；环境光传感器 *;自动播放 *;相机 *;加密媒体*；全屏 *;地理位置*；陀螺仪 *;磁力计*；麦克风 *;MIDI *;支付 *;画中画 *;扬声器 *;USB *;振动*；vr *

    • 目前，它具有以下沙盒属性，它限制了你可以对其他框架做的事情:
    • Currently, It has the following sandbox attributes, which limit what you can do to other frames:

    allow-downloads allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation

    • 可以使用 window.top 或 window.parent 或 window.opener 从内框架引用外部窗口/其他窗口.但是，由于 相同原产地政策.跨源访问主要受到限制.特别值得注意的是 window.postMessage，它允许帧之间的通信.
    • The outer windows/other windows can be referenced using window.top or window.parent or window.opener from the inner frame. But, There are multiple restrictions imposed due to same origin policy. Cross origin access is limited mostly. Of particular note would be the window.postMessage, which allows communication between frames.

                SIDEBAR/MODAL DIALOG
    +---------------------------------------------+
    |              docs.google.com                |
    |  +--------------------------------------+   |<------- [#0] window.top The top frame
    |  |      /macros/.../iframedAppPanel     |<--+-------- [#1] Frame1 Same origin 
    |  |  +---------------------------------+ |   |
    |  |  |     *.googleusercontent.com     |<|---+-------- [#2] Outer Sandboxed Iframe
    |  |  |         sandboxFrame            | |   |
    |  |  |    +-----------------------+    | |   |
    |  |  |    |        /blank         |    | |   |
    |  |  |    |    userHtmlFrame      |    | |   |
    |  |  |    |                       |    | |   |
    |  |  |    |     Where the html    |<---+-|---+-------- [#3] Inner Sandboxed Iframe
    |  |  |    |    file you created   |    | |   |
    |  |  |    |       is loaded       |    | |   |
    |  |  |    |                       |    | |   |
    |  |  |    |                       |    | |   |
    |  |  |    |                       |    | |   |
    |  |  |    |                       |    | |   |
    |  |  |    |                       |    | |   |
    |  |  |    +-----------------------+    | |   |
    |  |  |                                 | |   |
    |  |  |                                 | |   |
    |  |  +---------------------------------+ |   |
    |  |                                      |   |
    |  +--------------------------------------+   |
    |                                             |
    +---------------------------------------------+
    

    以上所有关于 Web 应用程序的说明也适用于在侧边栏或模式对话框中使用 HtmlService 发布的 Web 内容.然而，

    All the above notes for web app stands true also for webcontent published using HtmlService in sidebar or modal dialogs. However,

    • 这里有一个额外的 iframe 嵌套层.
    • 沙箱属性中缺少 allow-top-navigation.因此，无法在此处更改/导航顶部框架 (docs.google.com).
    • There is a extra nested layer of iframe here.
    • The allow-top-navigation is missing from the sandbox attributes. Therefore, It is not possible to change/navigate the top frame(docs.google.com) here.
    • 2021 年 9 月 1 日:allow-top-navigation 被删除，而 allow-top-navigation-by-user-activation 被添加.最终用户的安全性以开发人员的便利为代价而增加.
    • Sep 1, 2021: allow-top-navigation is removed and allow-top-navigation-by-user-activation is added instead. Security for the end user is increased at the cost of convenience for the developers.

    这篇关于我的 iframe 在已发布的 Web 应用程序/侧边栏中在哪里?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！