テキスト入力からJavaScript関数を評価する方法

Question

THREE.jsで実行中のブラウザ内パーティクルエンジンがあります。私はアニメーション機能を追加したいので、粒子エミッタの位置やその他の情報を更新する "アニメーション"機能から呼び出されるコードを含むテキスト入力があります。 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 
} 

現在、私は実行可能なJavaScript関数には、このテキスト入力を有効にする方法はありません。私は誰もこれを前にやろうとしたことはないと思っています。

Answer 1

解決策が見つかりました。JavaScript関数evalを使用しました。あなたは任意のコードを評価

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

Answer 2

古い方法はeval()方法を使用することです。

より良い方法は、Components.utils.evalInSandboxを使用することですが、サポートが制限されている可能性があります。完全のために

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

、これを行うための別の方法は、<script>タグを作成し、ユーザーのコードにスクリプトの本体を設定し、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>

注意してください。この方法とeval()の両方により、コードインジェクション攻撃が可能になります。