在这里使用 eval() function 安全吗？

Question

我正在使用 JavaScript 学习 DOM 脚本，并认为制作一个简单的计算器应用程序很好，我发现逻辑很容易做到，但是使用 parseInt 将字符串类型算术表达式转换为数字类型算术表达式时遇到了问题。

我最终不得不使用 eval() function，它适用于基本的计算器应用程序，但在进一步研究中我发现 eval() function 在大多数情况下存在安全风险，我使用正则表达式来清理结果但不知道这是否足够安全。

这是我不确定在客户端浏览器上执行是否安全的代码片段。

const equals = document.getElementById("equals");

equals.addEventListener("click", (e) => {
    document.getElementById("result").innerText =  eval(document.getElementById("result").innerText).replace(/[^**-+/*\d]/g, '');                                      
});

注意：此代码在 Netlify 上部署为 static 站点。

Answer 1

你绝对应该停止使用eval() 。

从字符串执行 JavaScript 指令会带来巨大的安全风险，这使得潜在的第三方攻击者很容易在您不知情或未经许可的情况下将潜在的恶意代码注入您的应用程序。

在我看来，不使用eval()的另一个原因是，一些来源已经将其标记为过时或已弃用，并且由于其安全风险和性能低下，在某些环境中它被默认阻止。 换句话说，对eval()的支持存在问题，并且有可能从 Javascript 的未来版本中逐步淘汰它。这意味着您构建的任何使用它的东西都有可能最终停止工作。

好消息是eval()已经退出一段时间了，所以有很多更好、更安全的方法来完成几乎所有你使用eval()的事情。 事实上，您共享的代码片段根本不需要eval() 。

您正在更新的innerText属性可以直接从DOM中访问。 当我们讨论这个主题时，请避免使用innerHTML属性。 它也带来类似于eval()的安全风险。

这里的代码应该可以解决您的问题：

const equals = document.getElementById("equals");

equals.addEventListener("click", (e) => {
    let result = document.getElementById("result");
    result.innerText = result.innerText.replace(/[^**-+/*\d]/g, '');
    return true;
});

在计算器应用程序中，我能想到的唯一一个开发人员可能会想使用eval()的地方就是运行它的实际计算。 将整个数学表达式提供给eval()而不是构建适当的解析器有点作弊。 我想它（目前）有效，但这是一种不好的做法。

我构建了一个小型计算器应用程序，欢迎您学习它执行人们期望计算器执行的所有关键操作而无需触及eval() 。 请随时查看： https://calc-work.webflow.io 。

希望你觉得这有帮助。 干杯!