从用户输入执行 JavaScript 的适当方法？

Posted 2023-04-13

【中文标题】从用户输入执行 JavaScript 的适当方法？

【英文标题】：Appropriate method to execute JavaScript from user input?

【发布时间】：2012-03-17 22:17:52

【问题描述】：

我需要构建一个 Web 应用程序，允许用户输入 javascript 代码，然后动态执行代码并以某种方式在同一页面上显示结果。流程是这样的：

在网页中，有一系列的textarea，在每一个textarea的下面，都有一个结果div元素（或者什么元素span，p都无所谓）。用户将在文本区域内输入 javascript 代码。他应该能够输入他想要的任何javascript代码，但最后他会调用一个自定义函数，比如 my_application_output(some_variables_computed_from_previous_code_execution)

然后会在结果 div 上显示一些内容。一个简单的例子是： 如果他在 textarea 中输入以下文本：

var a = 0;
a++;
my_application_output(a);

然后执行代码，textarea下面的结果div元素会有一个内部html内容为“1”

我不知道如何开始，比如我应该选择什么技术或系统架构。所以想在这里请教一些指点。我考虑了两个选项（不确定它们是否足够好）

使用 JavaScript eval() 函数。所以我只是直接在客户端执行来自 textarea 的代码。

使用 V8 等引擎实现后端服务。所以我用代码内容对后端进行ajax调用，然后从后端执行代码，并返回结果。然后我将结果相应地放入结果 div 中。

就个人而言，我想选择 1)，因为 eval() 似乎是一个更简单的解决方案。但是，我不确定这个功能是否有任何限制，或者它是否可以实现我想要做的事情。否则，如果我必须选择第二个选项。任何人都可以为此提出一个架构？

【问题讨论】：

eval 是邪恶的，每个人都知道。我假设你正在创建类似jsfiddle.net

@Joseph：不要教条。 Eval 是这里的完美选择。你认为 REPL 中的“E”代表什么？

@Joseph：是的，jsfiddle 就是一个很好的例子。知道如何创建这样的东西吗？

@hiukim 你成功了吗？

你决定用什么？

【参考方案1】：

选项 1 不仅更容易，而且也是更安全的选择。

为什么？每个在 Firefox 中安装了 Firebug（或者只是打开了 Chrome 开发工具）的人都已经拥有了你想要的东西，尽管可能不是一种对菜鸟友好的方式。他们编写的代码被沙盒到他们正在使用的浏览器中，仅此而已。

使用选项 2，您将在服务器上执行任意不受信任的代码。假设他们意识到您正在使用 Node.js（这里最有可能的选择），然后在您的服务器上运行 fork-bomb：

require('child_process').exec(':():|:&;:', function()  console.log('This will never run') );

更不用说更邪恶的东西了。

请记住，REPL 代表 Read-Eval-Print-Loop，它是自 Lisp 以来用于帮助程序员理解其语言的动态语言。如果新手唯一能伤害到的人就是他们自己，那么 Eval 就完全没问题了。

【讨论】：

我同意这里。选项 1 也 [可能] 在正确的上下文中运行并且总体上具有较少的开销。选项 2 可以“安全地”实施......但不是我建议解决的问题。如果说编码需要在服务器上运行，无论出于何种原因，我只会追求它。