当前位置：首页 > 文章列表 > 文章 > 前端 > 为什么 eval() 可能是 JavaScript 代码最大的敌人

为什么 eval() 可能是 JavaScript 代码最大的敌人

来源：dev.to 2024-12-05 14:36:57 0浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《为什么 eval() 可能是 JavaScript 代码最大的敌人》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

介绍

javascript 的 eval() 函数允许开发人员动态评估或执行一串 javascript 代码。虽然在某些情况下看起来很方便，但使用 eval() 可能会导致严重的问题，包括安全漏洞、性能下降以及可能导致应用程序崩溃的不可预测的行为。本文将探讨为什么 eval() 通常被认为是不好的做法、它的风险以及可以用来实现相同功能的更安全的替代方案。

什么是eval()？

eval() 是 javascript 中的一个全局函数，它将字符串作为参数并将其作为 javascript 代码执行。传递给 eval() 的字符串由 javascript 解释器进行解析和评估，这可能会导致动态代码执行。例如：

const expression = '2 + 2';
console.log(eval(expression)); // outputs: 4

在上面的示例中，eval() 将字符串 '2 + 2' 作为 javascript 代码进行计算，返回结果 4。

eval() 的魅力

eval() 的主要吸引力在于它能够评估动态代码字符串。当处理动态生成的代码、用户输入或执行数据序列化和反序列化等任务时，这种灵活性非常有用。然而，虽然对于某些用例来说，这似乎是一个简单的解决方案，但在大多数情况下，风险远远超过了便利性。

eval() 的风险

安全问题

使用 eval() 的最大风险之一是安全性。由于 eval() 执行任何 javascript 代码，因此如果将其用于评估不受信任的数据，则可能会使您的应用程序遭受恶意代码执行。当涉及用户输入时，这尤其危险。

示例：恶意代码注入

考虑以下场景，其中用户输入传递给 eval()：

// imagine alert() could be any other kind of js harmful function...
const userinput = 'alert("hacked!")'; // malicious input
eval(userinput); // executes malicious code

在此示例中，攻击者可以输入导致有害操作的 javascript 代码，例如显示包含网络钓鱼诈骗输入的警报框、窃取数据或执行其他恶意操作。这称为跨站点脚本 (xss) 攻击。

以这种方式使用 eval() 为攻击者注入任意 javascript 代码打开了大门，这可能会危及整个应用程序。

性能问题

eval() 引入了性能问题，因为它强制 javascript 引擎动态解释和执行代码，从而阻止了某些优化的发生。 javascript 引擎，例如 v8，会在编译时优化静态代码，但是当引入动态代码执行时，这些优化将被禁用，从而导致执行速度变慢。

示例：性能影响
考虑在性能关键循环中使用 eval() 的情况：

for (let i = 0; i < 100000; i++) {
  eval('var x = i * i');
}

此代码执行与循环的非动态版本相同的操作，但引入了在每次迭代时解释和执行字符串“var x = i * i”的开销。这种不必要的开销可能会显着降低应用程序的速度，尤其是在较大的数据集或性能关键的环境中。

调试噩梦

当你使用 eval() 时，调试变得更加困难。由于 eval() 执行动态代码，因此开发人员很难跟踪正在执行的内容并确定发生错误的位置。 javascript 调试工具依赖于静态分析，而 eval() 会阻止这些工具正确分析代码，从而使诊断和修复问题变得更加困难。

示例：隐藏错误
考虑以下在 eval() 内有错误的代码：

eval('console.log(unknownvariable)'); // throws error but hard to trace

在这个例子中，抛出了unknownvariable is not defined的错误，但由于代码是通过eval()动态执行的，因此追踪问题的根源更具挑战性。这可能会导致令人沮丧且耗时的调试。

不可预测的行为

eval() 的另一个风险是它可能导致不可预测的行为。由于它动态执行代码，因此它可能会影响全局范围、修改变量或以意想不到的方式与代码的其他部分交互。这可能会导致崩溃或难以重现的错误。

示例：范围界定问题

let x = 10;
eval('x = x + 5'); // modifies the global variable `x`
console.log(x); // outputs: 15

在这种情况下，eval() 会修改全局范围内变量 x 的值，这可能会导致应用程序其他地方的行为发生意外变化。这使得维护和调试应用程序变得困难，尤其是随着代码库的增长。

我的个人故事

我在开发之旅的早期就第一次遇到了 eval() 函数。当时，它似乎是一个有趣的动态执行 javascript 字符串的工具。我最初将它用于小型项目中的 web 自动化和数据抓取，主要用于从 html 元素中获取数据。在大多数情况下，它运行得很好。

然而，在我从事个人 next.js 项目的过程中，eval() 的真正危险变得显而易见。我使用 eval() 动态处理自定义 tailwindcss 配置字符串，认为这会简化该过程。不幸的是，这个决定导致了一个重大问题，甚至没有在调试系统中正确显示。由于其不稳定的性质，我怀疑 eval() 是罪魁祸首，因此我进行了更深入的研究——果然，我是 100% 正确的。

这次经历有力地提醒我们，过去看似无害的动态技术工具仍然可能在现代发展中造成重大问题。这是一个了解何时接受新做法并避免过时做法的教训，即使它们看起来像是一个快速解决方案。

有哪些更安全的替代方案？

虽然 eval() 对于某些用例来说似乎是一个简单的解决方案，但应该使用几种更安全的替代方案。

json.parse() 和 json.stringify()
如果您需要解析或处理动态数据，json.parse() 和 json.stringify() 是更安全的替代方案。这些方法使您能够以安全且可预测的方式处理结构化数据。

示例：使用 json.parse()

const jsonstring = '{"name": "john", "age": 30}';
const parseddata = json.parse(jsonstring);
console.log(parseddata); // outputs: {name: "john", age: 30}

与 eval() 不同，json.parse() 只处理有效的 json 数据，不会执行任意代码。

function() 构造函数
如果您绝对需要评估动态 javascript 代码，function() 构造函数是 eval() 的更安全的替代方案。它允许您从一串代码创建一个新函数，但它无法访问本地作用域，从而降低了意外副作用的风险。

示例：使用 function()

const dynamiccode = 'return 2 + 2';
const result = new function(dynamiccode)(); // executes the code safely
console.log(result); // outputs: 4

在这种情况下，function() 从字符串“return 2 + 2”创建一个新函数并执行它，但它不会像 eval() 那样修改本地或全局作用域。

模板文字和安全解析
对于需要动态字符串但不需要执行代码的应用程序，模板文字和安全解析库是很好的选择。模板文字允许您将动态数据嵌入到字符串中，而无需评估代码。

示例：使用模板文字

const name = 'John';
const greeting = `Hello, ${name}!`; // Safe way to embed dynamic data into strings
console.log(greeting); // Outputs: Hello, John!

通过使用模板文字并避免动态代码评估，您可以安全地处理数据，而不会引入安全风险。

什么时候可以使用 eval()？

虽然通常最好避免 eval()，但在极少数情况下可能有必要。如果您发现自己处于 eval() 不可避免的情况，这里有一些最小化风险的提示：

限制范围：在隔离的函数或环境中使用 eval()，并且永远不要将用户生成的输入直接传递给 eval()。
清理输入：如果必须对动态数据使用 eval()，请确保对输入进行清理和验证以防止注入攻击。
谨慎使用：如果动态代码在您的控制之下（例如服务器端生成的代码），风险较低，但 eval() 仍应谨慎使用。