How do I safely “eval” user code in a webpage?

Question

I\'m working on a webapp to teach programming concepts. Webpages have some text about a programming concept, then let the user type in javascript code into a text editor wi

Answer 1

Your biggest issue will always be preventing infinite loops for occurring in user-provided code. You may be able to hide "private" references by running eval in the right context, e.g.:

let userInput = getUserInput();
setTimeout(() => {
  let window = null;
  let global = null;
  let this = null;
  // ... set any additional references to `null`
  
  eval(userInput);
}, 0);

And you could wrap the above code in a try/catch to prevent syntax and logic errors from crashing outside of the controlled eval scope, but you will (provably) never be able to detect whether incoming user input defines an infinite loop that will tie up javascript's single thread, rendering its runtime context completely stalled. The only solution to a problem like this is to define your own javascript interpreter, use it to process the user's input, and provide a mechanism to limit the number of steps your javascript interpreter is willing to take. That would be a lot of trouble!