0

Putting this at the top of my post for a little extra clarity:

The overall goal here is to build a feature for dynamic banners where you can input some custom javascript animation code through a dynamic data feed in the form of a google sheet. My goal is to work through some ideas simply to find out what's feasible, and once I have a better understanding of that I will put my mind toward implementation and security concerns.

I am trying to use the Function object in order to take in a string of js from a separate file and convert it to executable code. I've come up on an issue though where the string being passed to the Function object is trying to use a global object in the host file and there seems to be an issue with the string not detecting the global object. I haven't used Function very much so there's likely some nuance here that I'm just not aware of.

This is difficult to explain, so hopefully the code snippets below will offer clarity:

Global Object:

const tl = gsap.timeline({paused: true, repeat: 0});

JS string:

object.jsInject = "const jsInjectContainer = document.getElementById('js-inject'); const headlineText = 'test headline'; const headline = document.createElement('h1'); headline.style.visibility = 'hidden'; headline.innerHTML = headlineText; jsInjectContainer.appendChild(headline); tl.to(headline, 1, {autoAlpha: 1}, 'start');";

Problematic portion of JS string:

tl.to(headline, 1, {autoAlpha: 1}, 'start');

Function taking in the string and returning a new function:

function jsIfyString(string) {
  return new Function(string);
}

Executing the new function:

const jsStringFunction = jsIfyString(object.jsInject);

jsStringFunction();

All this results in a ReferenceError: tl is not defined, which I assume has something to do with when and how the new Function is getting executed. Can anyone offer insight into this and how I might go about fixing it up (if possible)?

tganyan
  • 603
  • 3
  • 9
  • 23
  • 3
    Why exactly are you doing this? Executing arbitrary strings is considered a form of `eval`, which is generally regarded as, if not outright bad, at least a code smell... From the [MDN `Function` reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function): _"Calling the constructor directly can create functions dynamically but suffers from security and similar (but far less significant) performance issues to `Global_Objects/eval`."_ – Alexander Nied Jan 05 '22 at 01:27
  • Are you using modules? – Nick Parsons Jan 05 '22 at 01:30
  • You have to pass in `'tl'` as an argument to the Function Object Constructor, and pass the `tl` object reference to the function call. And as Nick points out, this cannot be used inside a module. – Randy Casburn Jan 05 '22 at 01:35
  • 2
    Are you 100% certain that `const tl` is a global variable? Even if it [won't be part of the global object](https://stackoverflow.com/q/28776079/1048572), if the declaration is in the global scope (not a module, function or block scope), this should actually work. As for workarounds, have a look at [this answer](https://stackoverflow.com/a/24032179/1048572) to provide a custom scope to the eval'd string. – Bergi Jan 05 '22 at 02:41
  • To answer those asking about security and code smell: I'm simply working through possible approaches for a feature request for dynamic rich html banners. The concept: Build a feature that will allow custom JS animation code to be input through a secure data feed (i.e. google sheet) and run dynamically in a rich html banner. My initial approach was trying to import a remote js file, but ran into a ton of issues with that and so was just trying to look for an alternative. I might pivot back to the import approach after the responses here. – tganyan Jan 05 '22 at 16:46
  • @Bergi That's a really useful link, thanks for the response! – tganyan Jan 05 '22 at 16:48
  • Possibly related, though tbh its hard to tell since you haven't posted the entire code block. The article references `let` but the same rules apply to `const`. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_tdz – chiliNUT Jan 05 '22 at 17:40
  • @chiliNUT No, "*ReferenceError: tl is not defined*" is not a TDZ error – Bergi Jan 05 '22 at 18:02
  • @Bergi oh thanks! I glossed over the article too quickly, its a reference error, but not the "not defined" one, its a different one – chiliNUT Jan 06 '22 at 01:12

0 Answers0