我正在制作一个计算器，作为用户浏览器的静态 HTML 页面。该页面并非旨在将任何信息提交回服务器。除了这个计算器之外，网页上不会出现任何其他内容。
在这种情况下使用“eval”安全吗？或者换句话说，在这种情况下使用 eval 是否会导致额外的安全风险？
对我来说，用户似乎无法通过简单地打开浏览器开发工具来对此页面做任何邪恶的事情。我一直读到“从不”使用 eval，但在这种情况下，它似乎很有意义。
这是一个计算器示例：
<!DOCTYPE html>
<html lang="en">
<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>Calculator</title>
</head>
<body>
<input id="input" type="text">
<button onclick="{
let result= '';
try {
result = eval(document.getElementById('input').value);
} catch (error) {
result = error;
}
console.log(result);
document.getElementById('result').innerHTML=result;
}">calculate</button>
<div id="result">result here</div>
</body>
</html>
它可能会打开页面以执行任意代码。考虑一下是否有人设法说服您的一个或几个用户：“尝试将其粘贴到输入字段中。您不会相信接下来会发生什么！”如果你保存的话这是一个很大的潜在问题any客户端上与用户相关的数据 - 例如 cookie 中的登录凭据，或本地存储或 IndexedDB 中的数据等。
即使您不存储任何此类数据，清理输入值以使其仅包含数学表达式而不包含其他内容也可能是个好主意。例如，只允许您想要的数字和运算符可能很简单+-*/。这很容易做到，而且很安全，所以你应该这样做。
另外，不要将函数放入内联处理程序中（或根本使用内联处理程序） - 这是非常糟糕的做法。正确使用附加事件监听器addEventListener.
document.querySelector('button').addEventListener('click', () => {
const sanitizedValue = document.getElementById('input').value
.replace(/[^-+/*\d]/g, '');
try {
document.getElementById('result').textContent = eval(sanitizedValue);
} catch(e) {
document.getElementById('result').textContent = 'Syntax not correct';
}
});
<input id="input" type="text">
<button>calculate</button>
<div id="result">result here</div>
.replace(/[^-+/*\d]/g, ''); does:
- Match any character that is not:
- 将所有此类匹配的字符替换为空字符串
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
