First of all I checked already this, this, this, this, this, this and this. And they don't seem to be a duplicate of my problem exactly.
I have a web app, generated by Google Script. In my Code.gs, inside my doGet(e) function, I have a routing mechanism for handling different webpages, which I simplified below in a if else statement block. The doGet(e) returns different pages based on the URL, meaning, if the URL ends in ?v=page1 it returns page1.html, if it ends in ?v=about it returns about.html, and so on. It all works fine if I type the whole thing in the Address URL space in the browser.
Now, my home.html has a menu with hyperlinks for those pages. The pages open fine if I click on the links, as long as the default target is _top.
Now, my problem is: I put an iframe below the menu so all the pages would open in the same home. They failed with error below:
Load denied by X-Frame-Options: “SAMEORIGIN” from “https://script.google.com/macros/s/AKfycbz80HBBQPcs-sYm9CsVNT7iyeBQjySR1FXN0TmgjKc/dev?v=page1”, site does not permit cross-origin framing from “https://n-72ap4753yyujkagtmqc7xoskf2cznnrfk23rzbq-0lu-script.googleusercontent.com/blank”.
I figured the reason would be the app was not published yet, so I publish the app and started returning page1.html with .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL). Now the error is:
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://n-72ap4753yyujkagtmqc7xoskf2cznnrfk23rzbq-0lu-script.googleusercontent.com’) does not match the recipient window’s origin (‘https://script.google.com’).
The error seems to be related to the page hitting another address in googleusercontent.com and that could be causing the issue?
The home page:
As you can see below in my home.html, there are 3 links:
iframes opens the wikipedia article about HTML/Iframes in the iframe of my home.html, just fine.
Page1 should open my page1.html in my home.html iframe section, but that is where the error takes place.
about open the about.html as another page, on _top of everything, so it works fine. But as soon as the iframe issue is solved I will change the target for that one to open in the iframe as well.
My files are as below:
Code.gs:
function doGet(e) {
Logger.log(e.parameters.v);
if (e.parameters.v == "page1") {
return HtmlService.createTemplateFromFile("page1").evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
} else if (e.parameters.v == "about") {
return HtmlService.createTemplateFromFile("about").evaluate();
} else
return HtmlService.createTemplateFromFile("home").evaluate();
}
home.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
#nav-wrapper {
background-color: bisque;
padding: 8px;
}
#img-logo {
height: 2%;
width: 2%
}
#nav {
display: inline-block;
list-style-type: none;
}
#nav > li {
display: inline-block;
padding: 0 24px 0 0;
}
#nav > li > a {
padding: 8px;
text-decoration: none;
outline: 0;
}
#nav > li > a:link, a:visited {
color: DarkSlateGray;
}
#nav > li > a:hover {
background-color: GoldenRod;
border-radius: 8px;
box-shadow: 4px 4px grey;
}
#iframePages {
width: 100%;
height: 800px;
overflow: scroll;
border: none;
}
</style>
</head>
<body>
<?
var url = ScriptApp.getService().getUrl();
var imgLogo = "https://png2.cleanpng.com/sh/e2fa53a06dccb65dbd183cfa6b13c455/L0KzQYm3VsIzN5dmj5H0aYP2gLBuTgRpbV5rfd9qbHWwcsPoif4ucKZyedC2YoLkebA0kP9tgZh0hp9xdX3kfn7vhfFlNaF0hOtwb37kfH75ifZtcZ9sRadrMnTkRoPsWPJkQJI2RqU8OEa3Q4q4UcUzQWg2UKU6OEW6Qoe1kP5o/kisspng-the-female-brain-human-brain-polygon-human-head-polygonal-rifling-5b2da62e8bc8a1.3386439115297183185726.png";
?>
<script>
var url=<?= url ?>;
console.log(url);
</script>
<nav>
<div id="nav-wrapper">
<a href="<?= url ?>" class="brand-logo"><img id="img-logo" src="<?= imgLogo ?>"></a>
<ul id="nav">
<li><a href="https://en.wikipedia.org/wiki/HTML_element#Frames" target="iframePages">IFrames</a></li>
<li><a href="<?= url ?>?v=page1" target="iframePages">Page1</a></li>
<li><a href="<?= url ?>?v=about">About</a></li>
</ul>
</div>
</nav>
<iframe id="iframePages" name="iframePages"></iframe>
</body>
</html>
page1.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Page 1</h1>
</body>
</html>
about.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>About</h1>
</body>
</html>
the URL:
https://script.google.com/macros/s/AKfycbxBBaGG_rZl1jAuNqDzL8O9un7bfn9Qm_cfA_nAjMxE1w-dl2U/exec
Error image:
Error in the console. Frame on the left hand side is empty.
Please keep in mind this is a simplified version of my full app which is providing the same behavior so I could share.
Can anyone please shed some light on this?
