So bewerten Sie eine JavaScript-Funktion von einer Texteingabe

Question

Ich habe eine in-Browser-Partikel-Engine in Three.js ausgeführt. Ich möchte Animationsfunktionalität hinzufügen, also habe ich eine Texteingabe, die Code enthält, der von meiner "animieren" -Funktion aufgerufen werden sollte, die die Position und andere Informationen der Partikelemitter aktualisiert. https://i.imgur.com/vguWZAq.jpg

function animate() { 

    time = Date.now(); 

    runCustomAnimateScript(); 

    for(var i = 0; i < emitters.length; i++){ 
     emitters[i].updateParticles(deltaTime); 
    } 

    render(); 

    requestAnimationFrame(animate); 
} 

function runCustomAnimateScript(){ 
    //Filled from text input after updateCustomAnimateScript is called 
    //Called from within animate (which is run every frame) 
} 

function updateCustomAnimateScript(){ 
    //Parse document.querySelectorAll("textarea[name='customAnimateScript']").value 
    //into a script, and enter it into runCustomAnimateScript 
} 

Zur Zeit habe ich keine Möglichkeit, diese Texteingabe in eine ausführbare JavaScript-Funktion einzuschalten. Ich bin überrascht, dass das vorher noch niemand versucht hat oder zumindest gepostet hat?

Answer 1

Ich habe gerade die Lösung gefunden - mit der JavaScript-Funktion eval.

runCustomAnimateScript = function(){ 
    eval(document.querySelectorAll("textarea[name='customAnimateScript']")[0].value); 
} 

Answer 2

Die alte Art und Weise Sie beliebigen Code auswerten ist durch die eval() Methode.

Ein besserer Weg ist die Verwendung Components.utils.evalInSandbox, aber die Unterstützung kann begrenzt sein.

function runCustomAnimateScript(){ 
    const sandbox = new Components.utils.Sandbox("http://www.your-url.com/"); 
    let result = Components.utils.evalInSandbox(document.querySelectorAll("textarea[name='customAnimateScript']").value , sandbox); 
} 

Answer 3

Für Vollständigkeit, eine andere Möglichkeit, dies zu tun, ist ein <script> Tag zu erstellen, stellen Sie den Körper des Skripts mit dem Code des Benutzers, und fügen Sie das Skript auf das DOM:

document.querySelector("button").addEventListener("click", e => { 
 
    e.preventDefault(); 
 
    const script = document.createElement("script"); 
 
    script.innerHTML = document.querySelector("textarea").value; 
 
    document.body.appendChild(script); 
 
    document.body.removeChild(script); 
 
});

textarea { 
 
    width: 500px; 
 
    height: 10em; 
 
}

<textarea></textarea><button type="button">Run</button>

Seien Sie einfach vorsichtig. Sowohl diese Methode als auch eval() können Sie für Code-Injection-Angriffe öffnen.