Google Apps Script remove warning banner

Question

I am putting a GeoChart on my Google Site using a Google Apps Script. Viewing the page when I am not logged into my google account shows a grey banner at the top with states: "This application was created by another user, not by Google." See it here.

Is there a way to remove this banner or move it to the bottom of the page so it looks better? I found a short discussion here (see fourth comment), but this did not work with the HtmlOutput object I am using in the doGet

function doGet() {
return HtmlService.createHtmlOutputFromFile('prate').setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

Answer 1

For anyone who cares, i got around this by embedding a google page with this issue in an iframe and using negative margins. Cant see the bars. Just throwing it out there in-case anyone else could use the suggestion

Answer 2

If you embed the Google Script web app in another website using the IFRAME tag, the warning banner will be hidden. Make sure you set the page's X-Frame-Options header to XFrameOptionsMode.ALLOWALL and it will let any site iframe the web app page.

See docs.

Answer 3

The two options that would seem possible for suppressing that warning from a WebApp made using HtmlService are:

1. Custom CSS, e.g. in Stylesheet.html (assuming you've started from the WebApp script template).

   .warning-bar {
     visibility: hidden;
   }
   

   I tried this, and found it had no effect on the final display. If there is an element with class="warning-bar" inside the iframe'd HTML, that element will be hidden. Likewise if we try to modify the warning bar by id, #warning; no impact on the element outside of our iframe.

   There is no CSS support for parent elements, so this is a dead end.

2. Use client-side JavaScript to manipulate the elements outside of our iframe. By adding code to JavaScript.html (again, assuming WebApp script template), we can try to change document elements.

   With jQuery:

   $('.warning-bar:first',parent.document).hide();
   

   With pure JavaScript:

   top.getElementById('warning').style.display = 'none';
   

   Neither of those work. The configuration that Google uses for hosting Google Apps Script blocks JavaScript running in an iframe from accessing items in the parent page. Here's the error that shows up in the JavaScript console:

   Uncaught SecurityError: Blocked a frame with origin "https://n-gtoiuxrqufcpexrnkeysovsfb7ibnjwczjyz6ii-script.googleusercontent.com" from accessing a frame with origin "https://script.google.com". Protocols, domains, and ports must match.

   They've forced our script's iframe to have a host domain that differs from that of the surrounding document, enabling the single-domain security policy to block the exact sort of actions we're trying to do.

According to the issue you linked to in your quesiton, the only option for avoiding that annoying message is to switch to a paid Google Apps Domain (e.g. Business or Education).