Search code examples
javascripthtmlgoogle-apps-scriptgoogle-apps

Getting wrong url in Google App Script in IFRAME sandbox mode

I have a Google App Script which renders my html pages with custom style and scripts using sandbox mode as IFRAME and it is accessible for everyone with authorization.

Code.gs

function getScriptUrl() {
 var url = ScriptApp.getService().getUrl();
  console.log(ScriptApp.getService());
 return url;
}

function doGet(e) {
  if (!e.parameter.page) {
    // When no specific page requested, return "home page"
    return HtmlService.createTemplateFromFile('index').evaluate()
        .setTitle('L1 - UX')
        .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  }
  // else, use page parameter to pick an html file from the script
  return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate()
      .setTitle('L1 - UX')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- stylesheets -->
        <?!= include('stylesheets'); ?>        
    </head>
    <body>
        <?var url = getScriptUrl();?>
         <!-- application content -->
         <div class="container-fluid">
          <div class="row">
            <!-- left sidebar -->
            <div class="col-sm-3 col-md-2 sidebar">
              <ul class="nav nav-sidebar">
                <li><a href='<?=url?>?page=overview'>Overview</a></li>
                <li class="active"><a href='<?=url?>?page=index'>Form</a></li>
                <li><a href='<?=url?>?page=report'>Reports</a></li>
                <li><a href='<?=url?>?page=export'>Export</a></li>
              </ul>
            </div> <!-- left sidebar -->
            <!-- main content -->
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
               <h2 class="sub-header">Content</h2>
            </div> <!-- main content -->
           </div>
         </div> <!-- application content -->
         <!-- JavaScripts -->
         <?!= include('javascripts'); ?>
    </body>
</html>

Here the url which I am getting from the ScriptApp.getService().getUrl() is wrong. But it is giving correct url if I omit the setSandboxMode(HtmlService.SandboxMode.IFRAME), but this time my app styles are not working correctly and it looks wired.

Update:

I am accessing main page like this (working) - https://script.google.com/macros/s/<script>/dev?page=index

When accessing like the above it's generating the wrong url.

The actual published link is - https://script.google.com/macros/s/<script>/exec

Solution

  • The /dev is your clue. The development mode is linked to current code whereas the exec is linked to published version.

    You are returning the URL the dev script is resolved to.

    Save the code and publish the latest version. Should then work as expected