Where is my iframe in the published web application/sidebar?

by 
              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       |    |     |
|     |    |                       |    |     |
|     |    |                       |    |     |
|     |    |                       |    |     |
|     |    |                       |    |     |
|     |    |                       |    |     |
|     |    +-----------------------+    |     |
|     |                                 |     |
|     |                                 |     |
|     +---------------------------------+     |
|                                             |
|                                             |
|                                             |
+---------------------------------------------+

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

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

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

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

Notes:

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

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

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

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

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.

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

  • The sandboxFrame currently has the following feature policy: 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-by-user-activation

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

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

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

Changelog:

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

More Related Contents:

  1. Navigating embedded Google Apps Script iFrame from the parent
  2. Moving google apps script to v8 file upload stopped working from sidebar
  3. UiApp has been deprecated. Please use HtmlService instead
  4. Call a custom GAS function from external URL
  5. How do I communicate a page(modal dialog) with its sibling (sidebar)?
  6. Is there any limit on number of concurrent hits or simultaneous executions on Google App Script Web App
  7. Call a function from external URL
  8. Embedding Google Apps Script in an iFrame
  9. “function not found” error when making both GET and POST requests to a Web App
  10. Use project Javascript and CSS files in a Google Apps Script web app?
  11. Stopping the error “Authorisation is required to perform that action” in Google Apps Script
  12. Download file from Google Drive to local folder from Google Apps Script
  13. How to automatically import data from uploaded CSV or XLS file into Google Sheets
  14. How do I make a Sidebar display values from cells?
  15. How to understand LockService and implement it correctly?
  16. How do I add formulas to Google Sheets using Google Apps Script?
  17. How to enable autocomplete for Google Apps Script in locally-installed IDE
  18. Deleting rows in google sheets using Google Apps Script
  19. Delete a row in Google Spreadsheets if value of cell in said row is 0 or blank
  20. How to use a google apps script in multiple documents
  21. Is there a complete definition of the Google App Script Syntax somewhere? [duplicate]
  22. Google Apps Script Auto Generated Library Documentation
  23. Initiate a download from google apps script
  24. onEdit() doesn’t catch all changes
  25. Converting .xls to google spreadsheet in google apps script
  26. publish a Google Spreadsheet through Google Apps Scripts
  27. How to pause App Scripts until spreadsheet finishes calculation
  28. Can the google spreadsheet ‘query’ function be used in google apps script?
  29. google script openById : You do not have permission to perform that action
  30. Redirect after submitting Google Form

Leave a Comment