如何执行用户在我的页面上输入到我的 ACE 编辑器的代码

Posted 2023-05-07

【中文标题】如何执行用户在我的页面上输入到我的 ACE 编辑器的代码

【英文标题】：How can I execute code that a user inputs into my ACE editor on my page

【发布时间】：2014-05-07 03:29:02

【问题描述】：

我在我的页面上使用ACE Editor 作为我的文本编辑器，用户将输入代码。

如果可能，我希望执行用户在浏览器中输入的代码。如何从编辑器获取输入并使用 Browsers V8 javascript 编译器？

然后我将尝试在 Node.js 上运行它，但首先我必须学习 Node :)。

【问题讨论】：

你成功完成这项工作了吗？很想知道你是怎么做到的？

【参考方案1】：

获取一些用户输入的代码并使用 JavaScript 运行它相对简单。本质上，您将从 ACE 获取代码：

var code = editor.getValue();

然后使用 javascript 运行它。在最简单的层面上，您可以这样做：

eval(code);

但是，你probably don't want to use eval()。相反，您可能会执行以下操作：

// grabbed from https://***.com/questions/6432984/adding-script-element-to-the-dom-and-have-the-javascript-run
var script = document.createElement('script');
try 
  script.appendChild(document.createTextNode(code));
  document.body.appendChild(script);
 catch (e) 
  script.text = code;
  document.body.appendChild(script);

这会奏效。但是，它仍然会导致一些问题，因为那时用户代码可能会影响您的环境。在这种情况下，从安全角度来看，它可能并不可怕（除非用户可以共享他们的代码），但它会令人困惑。因此，您需要sandbox your code。

This answer explains sandboxing client side javascript，使用window.postMessage，您可以将 javascript 发送到沙盒 iframe 并在那里对其进行评估。

如果您希望将此服务器端引入并执行 Node 代码，则需要以不同的方式进行沙盒。 在服务器上，沙盒更令人担忧，因为用户可以使用 Javascript 做更多事情，并且可能与您的服务器进行恶意交互。幸运的是，有 a few sandboxes for Node that should help。

【讨论】：

谢谢你，尼克，我很感激。

【参考方案2】：

获取代码很简单，只需执行code = editor.getValue() 简单地使用 V8 编译器也很简单，创建 iframe 并执行

try 
    var result = iframeWindow.eval(code)
 catch(e) 
    // report error...

但这不会很有用，因为它很容易创建无限循环并破坏页面。 你可以看看https://github.com/jsbin/jsbin/blob/master/public/js/runner/loop-protect.js#L7来解决循环问题。

【讨论】：

谢谢，我会调查的。我还将发布我已经拥有的代码。