1

I am trying to embed a navigation bar written in html and served by google script as the webapp into the google sites page.

The navigation bar works correctly if I use in <A> html attribute TARGET="_blank".

If I use in <A> html attribute TARGET = "_top" the link does not work (clicking it does not seem to result in any browser action).

Console error:

Unsafe attempt to initiate navigation for frame with origin 'https://sites.google.com' from frame with URL 'https://n-rosb5zxog27qlyotjggwwxuzbuy4htzgn74xhia-0lu-script.googleusercontent.com/userCodeAppPanel'. The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.

Clicking link without any attribute results in link opening in IFRAME (part of embedded google site) with the following error message:

sites.google.com refused to connect

I have revied the following questions:

but they does not seem to answer whether navigating google site is viable threw navigation bar generated in google scripts.

Example: https://sites.google.com/mage.pl/test/strona-g%C5%82%C3%B3wna There is no way to redirect a whole page. None of the applied options works.

Minimal reproductive example:

Code:

function doGet() {
 return HtmlService.createHtmlOutputFromFile("nawigacja.html").setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

Html:

    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

      /* The navigation menu */
      .navbar {
        overflow: hidden;
        background-color: #ffffff;
      }

      /* Navigation links */
      .navbar a {
        float: left;
        font-size: 16px;
      font-family: arial;
        color: #000000;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      /* The subnavigation menu */
      .subnav {
        float: left;
        overflow: hidden;
      }

      /* Subnav button */
      .subnav .subnavbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: #000000;
        padding: 14px 16px;
        background-color: inherit;
        font-family: arial;
        margin: 0;
      }

      /* Add a red background color to navigation links on hover */
      .navbar a:hover, .subnav:hover .subnavbtn {
        background-color: #dedede;
      }

      /* Style the subnav content - positioned absolute */
      .subnav-content {
        display: none;
        position: absolute;
        left: 0;
        background-color: #dedede;
        width: 100%;
        z-index: 1;
      }

      /* Style the subnav links */
      .subnav-content a {
        float: left;
        color: black;
        text-decoration: none;
      }

      /* Add a grey background color on hover */
      .subnav-content a:hover {
        background-color: #eee;
        color: black;
      }

      /* When you move the mouse over the subnav container, open the subnav content */
      .subnav:hover .subnav-content {
        display: block;
      }

    </style>
  </head>
  <body>

    <!-- Load font awesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- The navigation menu -->
      
    <div class="navbar">
      <div class="subnav">
        <button class="subnavbtn">Menu item<i class="fa fa-caret-down"></i></button>
        <div class="subnav-content">
                <a href="https://google.com" TARGET="_blank">Blank</a>
          <a href="https://sites.google.com/" TARGET="_top">Top</a>
          <a href="https://www.google.com" TARGEt="_self">Self</a>
        </div>
      </div>


  </body>
</html>
Abdel5
  • 1,112
  • 3
  • 16
  • 39
  • 1
    Could you provide a [mcve]? `clicking it does not seem to result in any browser action)` Was there a error thrown in the browser console? – TheMaster Nov 16 '21 at 17:03
  • @TheMaster: Please find attached example here: https://sites.google.com/mage.pl/test/strona-g%C5%82%C3%B3wna – Abdel5 Nov 19 '21 at 08:19
  • You didn't answer my question. Show the error in browser console(DevTools>Console). – TheMaster Nov 19 '21 at 08:59
  • @TheMaster: Thanks for patience and help. The post was supplemented with console error. – Abdel5 Nov 19 '21 at 15:56
  • How are you framing it? Provide relevant html of Google sites. Also check the sandbox attributes of ``sandboxframe`` in devtools>Inspector, whether it has `allow-top-navigation-by-user-activation` – TheMaster Nov 19 '21 at 16:01

1 Answers1

0

Thank you for provide Google Sites example website.

I tried to look at your website and found that there are 3 nested iframe tag as shown in the image below.

https://i.stack.imgur.com/uepA9.jpg

The sandbox's attributes on the top of the iframe on the new Google Sites are

allow-scripts
allow-popups
allow-forms
allow-same-origin
allow-popups-to-escape-sandbox
allow-downloads allow-modals

Attributes of the second nested iframe are

allow-downloads
allow-forms
allow-modals
allow-popups
allow-popups-to-escape-sandbox
allow-same-origin allow-scripts
allow-top-navigation-by-user-activation

And your navigation bar is located under the nested iframe level 3.

Maybe attributes from iframe first level is inherited to next nested level so when the link in navigation bar is clicked, the current tab can't be redirected to new URL with _top or _parent attribute.

To have the embedded navigation bar redirected to new URL in the current tab, it may need Google to add the sandbox attributes allow-top-navigation-by-user-activation in the new Google Sites.

If there are anything wrong in my post, please give me comments.

I am sorry for my not very good English.

cunbong
  • 1
  • 1