How to execute JavaScript code from input

Question

I'm creating a web game where the user types the code and the result is displayed on the screen, for Web Design classes. I've already made something to recognize HTML and CSS codes and now I'm trying with JavaScript. My problem is to execute JavaScript code. The first class is about variables.

I created a editable screen with a cursor where the user types the code:

The square is the cursor in input. I put the first part of code above the input and the score bellow just to show what is going to happen. The user insert his code (just a variable declaration) and press a submit button to test if is correct. What a tried to get the code and execute was:

$("#submit").on("click", function(){
    var full_code = '$(document).ready(function() {' 
                        + $(".text").val() 
                        + 'setInterval(function() {ola.style.display = (ola.style.display == \'none\' ? \'\' : \'none\');}, 500);});';
    console.log(full_code);
    var functionJS = new Function(full_code);
    functionJS();
});

In this example I just wanted to create a blinking animation. So I tried to get the previous code and append to user code and the rest of code to execute all the string as a function, but the part of the code: ola.style.display is not working because it says that the variable ola is null. What user should types is like: var ola = document.getElementById("ola");. What is wrong with the code? And is this the better way to do this?

eval iirc? Dangerous though https://www.w3schools.com/jsref/jsref_eval.asp https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea — JGFMK, Feb 18 '19 at 18:06
@JGFMK Although the use of *eval* on the client side should in theory never break anything important, only the client code. (Servers should always validate incoming data/requests.) — 3limin4t0r, Feb 18 '19 at 18:10
I highly suggest not letting the user write his own javascript code. This leaves room for xss which is very dangerous. https://en.wikipedia.org/wiki/Cross-site_scripting — Aniket G, Feb 18 '19 at 18:11
These two questions might be related: https://stackoverflow.com/questions/17513212/safely-sandbox-and-execute-user-submitted-javascript and https://stackoverflow.com/questions/195149/is-it-possible-to-sandbox-javascript-running-in-the-browser — 3limin4t0r, Feb 18 '19 at 18:17
To improve security, you could have the input ran from within an iFrame. In Addition, load the iframe from a different domain to help ensure additional security. — imvain2, Feb 18 '19 at 18:18

score 3 · Accepted Answer · edited Dec 06 '22 at 18:09

3

As in setInterval() we have to give a function that is asynchronous, so we have to give reference explicitly inside the function of the elements that we are accessing inside the functions otherwise it will give null as in your case.

https://stackoverflow.com/a/54753138/11052486

Above suggests a better way to select elements using jQuery, otherwise simply document.getElementById('ola') will also work.

One better way to execute JavaScript is by using eval(), which may help you.

I have made a simple HTML page for your example:

document.getElementById('execute').onclick = function() {
  eval(document.getElementById('box').value);
}

<div>
  <textarea id="box" rows="5" cols="80"></textarea>
  <br>
  <button style="width: 2cm;height: 1cm;" id="execute">Execute</button>
</div>

I think above code is implementing what you actually wants.

Output Of HTML Code and a sample code in textarea:

Output Of HTML Code and a sample code in textarea

Clicking Execute Button causing creation of new button and blinking of button.

Successfully blinking new button:

Successfully blinking new button

edited Dec 06 '22 at 18:09

Erman Kadir Kahraman

469
6
6

answered Feb 18 '19 at 18:50

Ankit Agrawal

596
5
12

I did it. What I needed to do was just get the element that I want to blink and then it's *id* to insert into the string to execute the function. The finished code is: `$("#submit").on("click", function(){ var item = document.getElementById("item").querySelector("div"); var full_code = '$(document).ready(function() {' + $(".text").val() + 'setInterval(function() {' + item.id + '.style.display = (' + item.id + '.style.display == \'none\' ? \'\' : \'none\');}, 500);});'; console.log(full_code); eval(full_code); });` – Mateus Rocha Feb 19 '19 at 12:10
But your answer gave me a hint. Thanks @Ankit Agrawal – Mateus Rocha Feb 19 '19 at 12:11
Thank you so muchh!!!! finally something that works – Alon Eilat Dec 03 '20 at 08:46

score 2 · Answer 2 · edited Feb 18 '19 at 18:19

2

I may need to see more code on how this is all working, but I believe that ola is null is because of how you're selecting it.
Since you're working with jQuery you could do something similar to $('#ola') to select the correct element and then you can evaluate the styling. https://api.jquery.com/id-selector/

edited Feb 18 '19 at 18:19

RonC

31,330
19
94
139

answered Feb 18 '19 at 18:14

mintii

21
2

1

Good call, since the use of ola in `full_code` is inside a literal string it's definitely going to need to be set via something like `var ola = $('#ola');` earlier in that literal string. – RonC Feb 18 '19 at 18:23

How to execute JavaScript code from input

2 Answers2

Output Of HTML Code and a sample code in textarea:

Successfully blinking new button: