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

查看：49
本文介绍了我的iframe在已发布的Web应用程序/边栏中在哪里?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在尝试控制发布的Web应用程序和插件侧栏的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返回一个模糊的未知URL，例如n-rysutduudd.google-usercontent.com，而不是我发布的Web应用程序URL 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

尝试将我发布的Web应用程序重定向到新的URL失败 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中提供了网络内容.该文档显示的内容不多，只是webapp已在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/restrictions

我研究过的一些相关问题:

Some of the relevant questions I've looked into:

  • window.location.href = window.location.href returning a blank page
  • Google script web app goes blank page after submit
  • How to stop redirected URL from being masked?

我的特定问题是:发布的Web应用程序中的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 沙箱引起的由Google完成.要回答您的问题，

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.

此最里面的框架具有自己的 Cookie ，存储以及大多数其他独有的属性一个窗口.

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 或

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表单，并且如果未指定表单元素的动作属性，它将提交到空白页面.更糟糕的是，内部的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.出于所有意图和目的(，将来源列入白名单， 请求的问题)，这是有效的origin

    • 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

      accelerometer *; ambient-light-sensor *; autoplay *; camera *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; speaker *; usb *; vibrate *; 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

      • 可使用内部框架中的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.

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆