Clickable URL in anchor/image not working via Google Scripts embedded into Google Classic Sites

1
votes

I am trying to embed, into Google Classic Sites, a project from Google Scripts that contains a clickable image pointing to a separate page from within this same Google Classic Site (there are reasons I am not using the Sites editor directly and inserting as an image with a link to the page).

The problem is when I click on the image/anchor, I get the dreaded "sites.google.com refused to connect." with no errors logged in Cloud Platform but console.log error is this: Refused to display 'https://sites.google.com/a/DOMAIN/SITE_NAME/PAGE_NAME/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

How I have embedded into Classic Sites from Scripts:

  1. from Scripts => Publish/Deploy as web app with settings:

    • Execute the app as: tried both me and as user
    • Who has access to the app: Anyone within DOMAIN

  2. from Scripts => Test web app for your latest code results: same as when embedded in Classic Sites

  3. from Classic Sites => Edit Page / Insert / Apps Script, then pasted URL of published Scripts project.

Here is the code from Google Apps Script I am embedding:

Code.gs file

function doGet() {
    return HtmlService.createTemplateFromFile('Buttons').evaluate()
      .setTitle('Client Home Page');
}

Buttons.html file

<!DOCTYPE html>
<html>
    <head>
        <?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>
    </head>  
    <body>            
        <a href="https://sites.google.com/a/DOMAIN/SITES_NAME/PAGE_NAME/" imageanchor="1" target="" >
            <img src="https://sites.google.com/a/DOMAIN/IMAGE_LINK" border="0" alt="Image" >
        </a>
    </body>
</html>

What I have also tried:

  • Embedding the Script as an iFrame gadget. Results: doesn't show UI at all.
  • Adding an onclick event to fetch URL instead (see code changes below). Results: embedded area where buttons display turns blank on click with no errors logged in Cloud Platform or console.

fetchUrl attempt: changes to Code.gs file

function doGet() {
    return HtmlService.createTemplateFromFile('Buttons').evaluate()
      .setTitle('Home');
}

function setUrl(url) {    
    var response = UrlFetchApp.fetch(url);
    return response.getContentText();    
}

fetchUrl attempt: changes to anchor tag in Buttons.html file

<a href="" onclick="google.script.run.setUrl('https://sites.google.com/a/DOMAIN/SITES_NAME/PAGE_NAME/')" imageanchor="1" target="" >
    <img src="https://sites.google.com/a/DOMAIN/IMAGE_LINK" border="0" alt="Image" >
</a>

Any help or insight would be greatly appreciated!

Leora

1
google-apps-scriptgoogle-sites

1 Answers

2
votes

Figured it out! I was missing the <base> tag in my HTML file (<base target="_top">).

While this is automatically supplied in any new HTML file you create within Google Apps Scripts, I had copied and pasted from code written in VS Code, therefore omitting it.

As soon as I added it back in everything works as expected. Going to leave this here in case anyone else runs into this problem.

Many thanks to anyone that attempted to look into this...

Leora