客户端静态JavaScript计算器使用eval是否安全？

你的判断是对的：在你描述的「纯静态HTML、无任何服务器交互、页面无额外敏感内容/权限」的计算器场景下，使用eval不会带来超出用户自主打开浏览器开发者工具操作范围的额外安全风险。

行业里流传的eval安全警告，所有风险成立都有明确的前提条件，脱离前提谈风险没有意义：

• 常规eval风险的核心来源是执行不受信任的输入时，执行环境存在可被窃取、破坏的敏感资产：比如后端服务用eval执行用户输入会直接导致服务器被入侵；页面存储了用户登录凭证、隐私数据时，恶意输入通过eval执行可以偷取数据发送到第三方；多用户访问的平台如果允许eval用户提交的内容，会造成存储型XSS，影响所有访问该页面的普通用户。
• 你的场景里上述风险前提完全不存在：整个页面完全运行在用户自己的浏览器本地，没有任何数据回传逻辑，没有存储用户敏感信息，也不存在其他访问者会被波及。用户自己在输入框里写入恶意JS代码触发eval执行，和他自己按F12打开控制台敲代码运行的权限、效果完全一致——用户本来就对自己本地的浏览器环境有完全控制权，你不可能靠禁用eval阻止他在自己的设备上执行任意操作。

你贴的示例代码里用innerHTML渲染计算结果，这个写法虽然不会造成跨用户的安全问题，但会带来不必要的异常风险：如果用户输入的表达式执行后返回带HTML标签的字符串，innerHTML会把它解析成真实DOM渲染，可能导致页面布局错乱、出现意料之外的内容。把innerHTML换成textContent即可，后者只会把内容当做纯文本渲染，不会做DOM解析。

如果你介意eval的负面声誉，想从写法上更稳妥，可以用Function构造函数把表达式执行放在一个相对隔离的作用域里，避免执行的代码随意访问当前页面的全局变量，不过对你的纯静态计算器场景来说，这个优化属于锦上添花，不做也不会有实际安全问题。

修正后的参考实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
</head>
<body>
    <input id="input" type="text" placeholder="请输入数学表达式，比如1+2*3">
    <button onclick="calculate()">计算</button>
    <div id="result">结果显示在这里</div>
    <script>
        function calculate() {
            const inputVal = document.getElementById('input').value.trim();
            const resultEl = document.getElementById('result');
            if (!inputVal) {
                resultEl.textContent = '请输入表达式';
                return;
            }
            try {
                // 用Function包裹隔离作用域，相比直接eval更规范
                const computeResult = new Function(`return (${inputVal})`)();
                resultEl.textContent = computeResult;
            } catch (err) {
                resultEl.textContent = '表达式非法，请检查输入';
            }
        }
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者garydavenport73