I am trying to embed my Google Apps Script WebApp into an iFrame on another domain but the webapp is not loaded and I only see a white screen. There is also no error in the webinspector.
The Webapp is published with: Execute as me and Access has anyone within Given Domain.
According to this I implemented my doGet method like this:
function doGet(e) {
return HtmlService
.createHtmlOutputFromFile('html/index')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
and the IFrame looks like this:
<iframe src="https://script.google.com/a/my_domain/macros/s/ADjidojcojv/exec" title="test" width="558" height="300"></iframe>
When the user is logged into Google the webapp is displayed. However when the user is not logged in a grey image with account.google.com refused to connect
I think the reason is that there is a redirect to the google sign in which does not allow to be displayed. Furthermore in this case there is also another redirect to a SAML SSO application. So when you normally sign in into google you will redirect to the SAML SSO login.
What are my options here?
[Edit] I found someone with the exact same problem and one possible solution. Apparently there is no easy way of doing this...
When publishing web-apps with access: "anyone", it is needed for the end user to be logged in. Otherwise, the user is redirected to Google login page. Google's login page does not allow itself to be iframed. If you're logged in, the web app isn't redirected to Google's login page and this error doesn't appear, else it appears.
window.length(one of the few properties that is accessible cross origin), which will be 0 if page refused to connect and more than 0 in a web-app, because your page is iframed. Then it is possible to redirect the user to the login page.<!DOCTYPE html>
<html>
<body>
body
<iframe
src="https://script.google.com/macros/s/[SCRIPT_ID]/exec"
>Loading
</iframe>
<script>
(() => {
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>