如何运行用户输入 Ace 编辑器的代码答案

【问题标题】：How can I run the code the user enters into the Ace Editor如何运行用户输入 Ace 编辑器的代码
【发布时间】：2020-08-11 17:47:46
【问题描述】：

我在一个项目中使用 Ace Editor，我想知道如何运行用户输入到编辑器中的代码。我在想我可以使用这样的东西：

var editor = ace.edit("editor");
editor.setTheme("ace/theme/chaos");
editor.session.setMode("ace/mode/javascript");

function runProgram() {
    var code = editor.getValue();
    var display = document.getElementById("display");
    try {
       var result = eval(code);
       display.innerHTML = result;
    } catch(e) {
        alert('Error' + e);
    }
}

但出于安全考虑，我不确定是否使用 eval()。我希望找到某种方法来安全地执行和显示用户代码。请注意，我是 javascript 的初学者。

【问题讨论】：

您应该使用后端语言在 POST 请求中发送此代码，并使用它们的函数以后端语言执行它并返回执行的响应。这就是它的工作原理。这样做也更安全。
谢谢，我试试看。

标签： javascript ace-editor

【解决方案1】：

如果您在同一用户上运行用户编写的代码，则无需担心计算机安全问题，因为用户可以在浏览器控制台中运行相同的代码。

但如果您想防止用户意外破坏编辑器，您可以使用具有沙盒属性和适当 CORS 策略的 iframe。如果您从不同的域加载 iframe，它将在 chrome 中的不同进程中运行，并且无限循环不会阻塞编辑器。

这个的玩具实现是

iframe = document.body.appendChild(document.createElement("iframe"))
iframe.sandbox="allow-modals allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts"

iframe.src="data:text/html," + encodeURIComponent(`<script>
function runProgram(e) {
    console.log(e)
    var code = e.data;
    var display = document.body;
    try {
       var result = eval(code);
       display.innerHTML = result;
    } catch(e) {
        alert('Error' + e);
    }
}

window.onmessage = runProgram</script>
waiting...`)

然后当用户按下运行按钮时使用 postMessage。

iframe.contentWindow.postMessage(editor.getValue(), "*")

真正的实现会复杂得多，例如 https://github.com/jsbin/jsbin 一个流行的开源项目正在做这种事情。

【讨论】：

谢谢，这将非常有帮助。