0

Background: I'm trying to create google apps script with the following description: type: standalone webapp run as: me access: anyone

Files description

  1. Code.gs - Main GS Code
  2. Home.html - Main Page
  3. Content.html - Additional content
  4. Js.html - JavaScript code content

Everything works as expected

Problem: It concerns me that user can easily see the JavaScript code content from the HTML output (i.e. code is accessible from the browser web dev tool).

Main question:

  1. Is there a way to make JavaScript code content inaccessible by user

Possible related solution / additional question

  1. I tried to implement the eval function, but couldn't get it to work link 1 link 2

I exclude it from the following snippets for now, since i couldn't get it to work, and might be off-topic (cmiiw)

(still, if it could be the solution for my problem, any further explanation / example of eval implementation using the snippets bellow would be greatly appreciated.)

  1. Separate the JavaScript into a library haven't really tried it yet because of possible performance issues or unnecessary complexity it might add since i don't intend for the JavaScript code to be used elsewhere other than within the single webapp i'm creating.

Sample

  1. A main html page ("Home") with some buttons
  2. on a button click it adds content from another html file ("Content")
  3. on another button click, it removes the added content

as it is, when user (me) checks the content of the webapp via web dev tool, the JavaScript code shows up inside the HTML output

Code.gs

function doGet(e) {
  Logger.log(Utilities.jsonStringify(e) );
  // html head
  var output = HtmlService.createTemplateFromFile('Home').evaluate();

  var output = output.asTemplate();
  return output.evaluate()
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setTitle('Home');
}


function include(filename) {
  return HtmlService.createTemplateFromFile(filename).evaluate().getContent();
}


function getHtmlOutput(filename) {
  return HtmlService.createTemplateFromFile(filename).evaluate();
}

Home.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  <style>
    div {
      color: red;
    }
  </style>
  </head>
  <body>
    <div id="content-container">
      Hello World
      <button type="button" onclick="add()">Add</button>
      <button type="button" onclick="remove()">Remove</button>
      <?!= include('js');?>
    </div>
  </body>
</html>

Content.html

<div id="content">
  This is the content
</div>

Js.html

<script>
function runGS(functionName,params=[]) {
  return new Promise((resolve,reject) => {
    google.script.run
      .withSuccessHandler(data => {
        resolve(data)
      })
      .withFailureHandler(error => {
        reject(error)
      })
      [functionName](...params);
  })
}

async function add() {
  var content = await runGS("include",["Content"]);
  var target = document.getElementById("content-container");

  target.insertAdjacentHTML("afterend",content);
  return "done";
}

function remove() {
  var target = document.getElementById("content");
  target.remove();
}

</script>
AAng
  • 13
  • 4

1 Answers1

0

While there isn't any way to hide client-side code per se, your best bet is to use an obfuscator such as this one, which is probably just as good a solution.

Note that this cannot be done in the online IDE. You will need to install Node.js and clasp and obfuscate your code on your computer before pushing it to your Google Apps Script project. To get started with clasp, if you haven't already, you can check out my blog post on this topic.

Dmitry Kostyuk
  • 1,354
  • 1
  • 5
  • 21
  • hi @Dmitry thanks for the answer. I've been using clasp already for other purposes, figured i'll have to deal with using obfuscator at some point. I'll give it a shot and update the post when i can – AAng Apr 02 '23 at 04:01