How to replace identifiers with their associated values for off-site evaluation?

I would like to have a tag:

<script src="https://mysource.com/script?foo=bar"></script>

https://mysource.com/script is a cloud function endpoint that returns a script that should run in the browser using bar as a value for foo. The script can’t evaluate a function and simply send back the result because its expected behavior is to cause side effects like adding things to the window object.

I was able to do it by doing things like:

  //prevents code injection like eval("evilcode")
  function sanitize(){}

  const foo = sanitize(req.query.foo);
  const myFunc = ()=>{... <uses foo somewhere> ... <causes side effects> ...};
  let strFunction = myFunc.toString();
  strFunction = strFunction.replace("foo", foo);
  const script = "("+strFunction+")();";
  res.status(200).send(script);

But I can’t help wonder if there is a better way to do it. Google does what I’m trying to do in their gtag scripts. If you go to https://www.googletagmanager.com/gtag/js?id=AW-950577603 and ctrl+f AW-950577603 you’ll see that the queried id (AW-950577603) appears inside the javascript code. But I have no idea if what they are doing is exactly what I’m doing or if they’ve done it in a better way. Suggestions?

Answer

Your code:

const myFunc = ()=>{... <uses foo somewhere> ... <causes side effects> ...};
let strFunction = myFunc.toString();
strFunction = strFunction.replace("foo", foo);
const script = "("+strFunction+")();";

Instead of text-replacing foo, you could make foo a parameter:

const myFunc = (foo)=>{... <uses foo somewhere> ... <causes side effects> ...};
let strFunction = myFunc.toString();
const script = "("+strFunction+")("+foo+");";