Issue:
You can try
window.top.location = link;
It’ll load the link in the top frame. If you are framing the web-app itself in your website, then you should use
window.parent.parent.location = link;
But this won’t work because the sandbox prevents navigating other frames in the document. sandbox="allow-top-navigation" only allows top frame navigation and not the intermediate frames. Since the top frame is your site and not script.google.com, it can’t be navigated and you’ll get the error
Unsafe JavaScript attempt to initiate navigation for frame with URL
https://myexamplesite.com… from frame with URL https://*.googleusercontent.com/… The frame attempting navigation is sandboxed, and is therefore disallowed from navigating its ancestors.
Solution:
- Use
window.postMessage()
==================
|Your site |<-myexamplesite.com [TOP#0]
| |
| ============= |
| |GASWebApp |<-|--script.google.com[Frame#1]
| | | |
| |========= | |
| ||SandBox| | |
| ||User |<-|--|-- Where your html code is
| ||Frame | | | (*.googleusercontent.com)
| |========= | | [Frame#2 and #3(Double nested iframe)]
| | | |
| ============= |
| |
| |
| |
==================
Snippet:
Sandboxed Html:
<script>
if(window.parent.parent !== window.top){ //if #1 !== top
//Framed in a another web-app
//TODO Use proper target origin instead of *
window.parent.parent.parent.postMessage("[FRAME#1_LINK_TO_CHANGE]","*");//Post to #0
}
</script>
Top frame(#0):
<!-- Frame the Apps script Web-App Frame#1-->
<iframe
src="https://script.google.com/macros/s/[SCRIPT_DEPLOYMENT_ID]/exec"
>Loading...</iframe
>
<script type="text/javascript">
const handleMessage = function(event) {
if (
event.origin !==
'https://[SCRIPT_ORIGIN]script.googleusercontent.com'
) {
alert('Origin Disallowed');
return;
}
//TODO Check syntax of event.data before changing iframe src
document.querySelector('iframe').src = event.data; //Change #1 Link
};
window.addEventListener('message', handleMessage);
</script>