我正在加强我网站的内容安全政策。我仍然包含
unsafe-eval
,因为我前段时间开发的一个应用程序使用了它,但没有其他页面使用它。我尝试使用一些库修改它以摆脱它,但是当我尝试时程序以某种方式失败了。
我在两个地方使用
eval
这样的:
function derivative(x,y) {
var fxn = document.getElementById('deriv').value;
var result = eval(fxn);
return result;
}
function origfunc(x) {
var original = document.getElementById('original').value;
var result = eval(original);
return result;
}
我在这里只做数学运算,所以我一直在寻找像
eval
这样的东西,它只会做数学。例如,有一个名为 mathjs
的库:https://stackoverflow.com/a/16262947/6110631
我尝试使用
math.eval()
(现在是math.evaluate()
),以及parse
功能。该程序的某些部分可以正常工作,而其他部分似乎已损坏。其他库也会发生同样的事情,其中许多完全失败。很难追查原因,因为我会在库代码中看到错误,但页面上的 HTML 输出与 eval
不同,这表明该库不是合适的数学替代品。 JavaScript Expression Evaluator 也有这个问题。
一个问题是我需要继续支持相同的语法,其中可能包括:
x*x
4-x+2*y
9.8-0.2*x
x*x*x*x
e
eval
可以毫无问题地处理所有这些问题。其他库通常具有不同的语法或可能不支持多个变量等。我目前正在使用eval
,因为这些函数直接对用户输入进行操作。部分挑战来自变量本身在整个执行过程中发生变化的事实,并且其中一些库似乎无法在此期间访问它们的值。
是否有库或“更安全”的评估替代方案不会破坏任何当前输入,但允许我停止使用
eval
本身?换句话说,它会针对与 eval
相同的语法返回相同的结果? Function()
对我也不起作用,但无论如何这是不行的,因为它也是 unsafe-eval
的一部分。这意味着不仅能够进行所有数学运算,而且还可以使用相同的输入语法进行运算,这似乎很棘手(例如,x*x
而不是像 Math.mult()
这样的东西)。
这是使用“Nerdamer”进行的控制台调试:
0
euler.js:53
Expression {symbol: Symbol}
euler.js:52 0.09
euler.js:53
Expression {symbol: Symbol}
symbol: Symbol {group: 3, value: "x", multiplier: Frac, power: Frac, imaginary: false, …}
__proto__: Object
euler.js:52 0.36
euler.js:53
Expression {symbol: Symbol}
symbol: Symbol {group: 3, value: "x", multiplier: Frac, power: Frac, imaginary: false, …}
__proto__: Object
第 52 行使用
eval
- 第 53 行使用“Nerdamer”库。
52 console.log(eval(original));
53 console.log(nerdamer(original).evaluate());
我不在使用
eval
之前对表达式进行消毒很有趣。我不担心处理用户输入;我希望能够停止使用eval
,这样我就可以将它从我的 CSP 中删除。
完整代码:
我试图在 jsFiddle 中设置它,但由于某种原因无法让它在那里工作。这是所需的最小 HTML:
<table>
<tr>
<td><span>f(x) — if known: <span></td>
<td><input id="original" size="30" value="(x*x*x)/3 + 1"></input></td>
</tr>
<tr>
<td><span>f '(x): <span></td>
<td><input id="deriv" size="30" value="x*x"></input></td>
</tr>
<tr>
<td><span>Starting x-value: <span></td>
<td><input id="xinitial" size="30" value="0"></input></td>
</tr>
<tr>
<td><span>Starting y-value: <span></td>
<td><input id="yinitial" size="30" value="1"></input></td>
</tr>
<tr>
<td><span>Final x-value: <span></td>
<td><input id="xfinal" size="30" value="1.8"></input></td>
</tr>
<tr>
<td><span>Step Size: <span></td>
<td><input id="stepsize" size="30" value="0.3"></input></td>
</tr>
</table>
<div id="submitbutton">
<button id="submit">Calculate!</button>
</div>
<div>
<table id="output">
</table>
<div id="actual">
</div>
</div>
这是JS:
var func = 0;
var orig = 0;
var x0 = 0;
var y0 = 0;
var xf = 0;
var stepSize = 0;
var e = 2.718281828459045;
var lastX = 0;
var lastY = 0;
function calculate() {
document.getElementById('output').innerHTML = "";
document.getElementById('actual').innerHTML = "";
orig = document.getElementById('original').value;
func = document.getElementById('deriv').value;
stepSize = document.getElementById('stepsize').value;
x0 = document.getElementById('xinitial').value;
y0 = document.getElementById('yinitial').value;
xf = document.getElementById('xfinal').value;
var numIntervals = (xf-x0)/stepSize;
slopes = new Array(numIntervals);
y = new Array(numIntervals);
document.getElementById('output').innerHTML += '<tr><th>Δx</th><th>Slope</th><th>Δy</th><th></th><th>x</th><th></th><th>y</th></tr>';
for (i=0; i<=numIntervals; i++) {
thisX = parseFloat(x0) + parseFloat(i*stepSize);
lastX = thisX;
if (i == 0) {
y[i] = parseFloat(y0);
slopes[i] = derivative(thisX, y[i]);
}
if (i != 0) {
y[i] = parseFloat(y[i-1]) + (parseFloat(slopes[i-1]) * parseFloat(stepSize));
slopes[i] = derivative(thisX, y[i]);
if (i == numIntervals) {
lastY = y[i];
}
}
if (i == 0) {
document.getElementById('output').innerHTML += '<tr>' + '<td>' + parseFloat(stepSize) + '</td><td class="center">' + '—' + '</td><td class="center">' + '—' +'</td><td>' + '(</td><td>' + thisX.toFixed(2) + '</td><td>,</td><td>' + y[i].toFixed(5) + '</td><td>)</td>' + '</tr>';
} else {
document.getElementById('output').innerHTML += '<tr>' + '<td>' + parseFloat(stepSize) + '</td><td>' + parseFloat(slopes[i-1]).toFixed(3) + '</td><td>' + (parseFloat(slopes[i-1]) * parseFloat(stepSize)).toFixed(3) +'</td><td>' + '(</td><td>' + thisX.toFixed(2) + '</td><td>,</td><td>' + y[i].toFixed(5) + '</td><td>)</td>' + '</tr>';
}
}
if (document.getElementById('original').value != "") {
correct = origfunc(lastX);
document.getElementById('actual').innerHTML += '<b>Actual: </b>' + correct.toFixed(3) + '<br>';
document.getElementById('actual').innerHTML += '<b>Error: </b>' + (correct - lastY).toFixed(3) + '<br>';
}
}
function derivative(x,y) {
var fxn = document.getElementById('deriv').value;
//console.log(nerdamer(fxn).evaluate());
//console.log(math.evaluate(fxn));
var result = eval(fxn);
return result;
}
function origfunc(x) {
var original = document.getElementById('original').value;
//console.log(math.evaluate(original));
var result = eval(original);
return result;
}
document.getElementById('submit').onclick = function(){calculate()};
此场景中预期输出的最后 3 行如下所示:
0.3 2.250 0.675 ( 1.80 , 2.48500 )
Actual: 2.944
Error: 0.459